使用less开发css_html/css_WEB-ITnose
最近在和小伙伴讨论如何高效的编写css代码的问题,于是我们想到了使用css的预处理语言。例如(less,sass等)。最后我们决定使用less(相对于其他css预处理语言更简单,语法更接近css)。
先说说什么是less?
简单的说,你可以在你的css文件中使用变量、函数等方式来编写你的css。
less具有哪些功能?
怎样在你的项目中使用less?
1.首先下载less.js。
2.创建你的less文件,如index.less。
3.在你的中引入上面2个文件
rel="stylesheet/less" type="text/css" href="css/index.less"/>
这里要注意2点:一是link标签的rel属性必须是’stylesheet/less’,二是less.js必须在index.less之后引入。
现在你就可以正式体验less了。
1.嵌套
像嵌套html一样嵌套书写css
.wrap{background:@gray;padding:30px;h1{font:18px/2 ‘microsoft yahei’}}
2.混入
无须在html上添加多个class,只需要在css中就可以做到
.box2{.wrap}
3.参数混入
像js函数一样可以传递参数,无需重复书写css
1.比如需要css3的圆角效果首先定义一个类,圆角值作为参数传入,并设置5px的默认值:
.border(@a:5px){-webkit-border-radius:@a;-moz-border-radius:@a;border-radius:@a;}
2.使用:.box3{.border(20px)}
4.选择器继承
感觉这个功能跟混入有点类似,没多大用
5.运算
这个比较实用,使用数字或变量进行运算
@base_margin: 10px;
@double_margin: @base_margin * 2;
使用:.box5{.border(10px);border:@base_width / 2 solid #ccc}
6.color函数
lighten函数:通过百分比来减轻颜色;less还提供其他变暗或者调整颜色饱和度函数
lighten(@gray, 10%),实际上只显示 @gray 90%的颜色
其他功能就不一一介绍了,如果你想更详细的了解less,可以去网上搜索更多的资料。
less 的主要好处有三个:
一些 css 规则组合定义为 mixin 在其它元素内部使用
增加可读性复用性降低维护难度
版权声明:本文为博主原创文章,未经博主允许不得转载。
上一篇: 百香果蜂蜜是用冷水还是热水冲泡?百香果蜂蜜一般能保存多久?
下一篇: UIWebView与javascript交互三通过OC页面来改变html页面上的值_html/css_WEB-ITnose
推荐阅读
-
使用css_html/css_WEB-ITnose
-
使用妹子UI开发的体验分享_html/css_WEB-ITnose
-
html5开发之viewport使用_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(2)CSS3利用图层叠加实现多背景_html/css_WEB-ITnose
-
CSS3实战开发:使用CSS3实现photoshop的过滤效果_html/css_WEB-ITnose
-
flex布局的使用,纪念第一次开发手机网站_html/css_WEB-ITnose
-
使用gulp-uncss清理多余无用css_html/css_WEB-ITnose
-
flex布局的使用,纪念第一次开发手机网站_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(3)线性渐变_html/css_WEB-ITnose
-
使用Bootstrap 3开发响应式网站实践02,轮播_html/css_WEB-ITnose