自动化高效css开发,畅谈less的灵活变化
css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率。但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢的心情来写css,于是,有一些聪明的程序员就发明了less。
less是为了简化css开发,灵活css开发而出现的,其功能非常强大,灵活性也很高,上手也很快,所以越来越受到前端开发的青睐,其中的基本语法我就不讲了,相信度娘上有无数的教程可以参阅,我就来讲点利用less灵活的特点做的一些东西。
1 less 解决 css3 的兼容前缀
.box-shadow(@shadow){
-webkit-box-shadow:@shadow;
-moz-box-shadow:@shadow;
-o-box-shadow:@shadow;
box-shadow:@shadow;
}
#box{.box-shadow(2px 2px 3px #ccc);}//调用
以此类推,老板再也不用担心我的css3跨浏览器兼容了;
2 以代码块的方式封装less功能
.list(@show:4, @width:100%, @line:10px){
width: @width; overflow: hidden;
ul{
.cf; margin-right: -@line; background-color: red
}
li{
float:left; width: (@width - (@show - 1) * @line) / @show; margin-right: @line;margin-bottom: @line;
img{ max-width: 100%; }
}
}
#xx_list{.list(4, 1030px, 10px);}//调用,参数为:一行显示4个,总宽度,行间距
直接就能出item列表了,(.cf为清除浮动less,具体代码如下:)
.cf(){
min-height: 1px;zoom:;
&:after{content:""; display: block;height:; clear: both;visibility:hidden}
}
3 less写自定义颜色渐变按钮以及按钮伪类
.q-grad(@bgcolor:red, @origin: left, @alpha: 0.2) {
background-color: @bgcolor;
background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha));
}
.btn(@color, @bor-ra:2px, @fcolor: @color / 2){
.q-grad(@color, top, 0.1); color: @fcolor; border:1px solid @color / 1.2; cursor: pointer; .border-radius(@bor-ra);.transition(all 0.2s ease);
&:hover{
background-color: @color / 1.1;
}
&:active{
background-image: none;
}
}
.btns{.btn(@tcolor, 3px); padding: 15px 50px;}//调用
一次性又搞定了渐变,搞定了按钮的伪类,cool!
4 全局参数设置网站主题
@url:"../images/";
@bgcolor: #fff;
@fcolor:#666;
@hcolor:#ccc;
...
调用的时候写对应参数,如果可能,用好less的颜色计算功能,就能调试好整个网站的配色,让你的网站一点也不单调!
自动化高效css开发,畅谈less的灵活变化的更多相关文章
- 高效CSS开发核心要点摘录
做网站的,我们都知道尽量减少请求数,压缩CSS代码量,使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度,也就是优化网站的性能. 下面分析了一些CSS的书写方式,很多都是我们知道并且正在使用 ...
- Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录 一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
- 35款加速网站开发的 CSS 开发工具
网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松.快速地学习 CSS 技术.这些工具中在高效开发 Web 应用程序中发挥重要作用. 在这篇文章中,我们收集了35个最好的 CSS ...
- Grunt搭建自动化web前端开发环境--完整流程
Grunt搭建自动化web前端开发环境-完整流程 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前 ...
- electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
- 2015年最佳的12个 CSS 开发工具推荐
CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...
- 【转】精心推荐几款超实用的 CSS 开发工具
原文转自:http://www.html5cn.org/article-5741-1.html 摘要: 当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文 ...
- 值得拥有!精心推荐几款超实用的 CSS 开发工具
当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文章中,我为大家收集了超有用的 CSS 开发工具. 对于 Web 开发人员来说,找到有用的 CSS 开发工 ...
- 几款超实用的 CSS 开发工具
当你开发一个网站或 web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文章中,我为大家收集了超有用的 CSS 开发工具. 对于 Web 开发人员来说,找到有用的 css 开 ...
随机推荐
- js入门基础7-2 (求模-隔行变色)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- PHP中__autoload()的不解之处,求高手指点
一整段代码: 运行结果: 使用__autoload(),分为两页代码: 第一段代码: ACMEManager.php,代码如下: 运行结果:
- Ultra-QuickSort(树状数组+离散化)
Ultra-QuickSort POJ 2299 Time Limit: 7000MS Memory Limit: 65536K Total Submissions: 50495 Accep ...
- MySQL--连接属性
The capability flags are used by the client and server to indicate which features they support and w ...
- SQL Serverf 索引 - 索引压缩 、附加特性 <第十篇>
一.索引压缩 数据和索引压缩在SQL Server2008被引入.压缩一个索引意味着将在一个页面中获得更多的关键字信息.这可以造成重大的性能改进,因为存储索引需要的页面和索引级别更少.因为索引中的键值 ...
- AC大牛经典语录
超经典: 1. 为了世界的和平,为了女生的安全,我拼命做题,做题,做题! 2. A ac a day, keeps the doctor away! 3. from good to great ...
- 微软GitHub组织
微软aspnet团队的GitHub 微软dotnet团队的GitHub 微软的GitHub 微软云团队的GitHub 微软在GitHub的开源底部有其它组织
- Calculation(dfs+状压dp)
Problem 1608 - Calculation Time Limit: 500MS Memory Limit: 65536KB Total Submit: 311 Accepted: ...
- C#listbox使用方法
1. 属性列表: SelectionMode 组件中条目的选择类型,即多选(Multiple).单选(Single) Rows 列表框中显示总共多少行 Sel ...
- C#实训 打字游戏
StatusStrip控件 状态条 =进度条+标签 等集合体