LESS的存在主要用于解决CSS的问题,包括不方便维护扩展、不利于复用等,因为CSS是一门非程序式语言,没有变量、函数、作用域等概念,而LESS在CSS语法的基础上,引入了变量、运算以及函数等功能,简化了CSS的编写,降低了维护 成本。
LESS可以直接在客户端使用,也可以在服务器端使用,但是更推荐将LESS编译生成静态CSS文件,在HTML文档中应用。
首先下载LESS.JS文件(http://lesscss.org),然后在HTML中加入
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
注意一定要先引入样式文件后引入脚本文件
LESS语法规则
1.变量
LESS中变量用@定义,@BLUE:#00C;
(SASS中使用$)
2.混合
把两个样式融合成一个样式
.classa{}
.classb{
.classa;
}
这样调用B的时候就包括了A样式,在SASS中,需要在样式规则前添加@mixin声明.
@minxin classa{
}
classb{
@include classa;
}
3.带参数混合
带参数混合就像函数一样,适用于不同浏览器的兼容问题
.border-radius( @radius: 3px ) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; }这样只要写一个radius就可以了。
4.选择器继承
.classA{}
.classB{
@extend .classA;
}
相当于.classA , .classB{}
5.嵌套规则
如果你不想要一个复杂的嵌套 .A .B .C{}
可以直接嵌套把所有的样式都写了
.A{
...
.B{...
&:visited{...}
//还可用&来引用元素样式到伪元素上
}
}
6.运算
@border:10px;
@half_border:@border/2
很好理解,在LESS中可以直接对变量做运算,在SASS中甚至可以对不同单位的变量进行运算
7.color函数
color函数是用来对已有颜色进行变化的,包括lighten(减轻颜色)、darken(加深颜色)等
8.条件语句和控制
很遗憾在LESS中不支持条件语句和控制,不过使用SASS可以。包括if else for and or not = > <==等都可以使用
@if $color>30% {
...
}
@else{
...
}
9.命名空间
命名空间用于给CSS样式分组
#defaults{
.classa{}
.classb{}
}
h1{
#default >.classa;
}
10.作用域
LESS中的作用域可以理解为ROOT级(全局可用)和选择器级别.互不影响
11.导入
标准的@import 'class.less'即可
12.字符串插入
@url='www.csdn.com'
字符串通过@{url}来调用,比变量多了个{ }
13.转义
14.js表达式
@height='document.body.clientHeight'
15.输出格式
参考资料:
1.https://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/
2.中文译文:http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html © w3cplus.com