LESS CSS学习

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