Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
一、使用方法
1、在 Node.js 环境中使用 Less ：
npm install -g less
> lessc styles.less styles.css/
2、在浏览器环境中使用 Less ：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
二、语法特性
1、变量：
1)普通变量：@名称
示例：
- less文件
@color: #ff6600;
Div{
color: @color;
border: 1px solid @color;
}
- 编译后的css文件
Div{
color: #ff6600;
border: 1px solid #ff6600;
}
2)选择器和属性名变量：@{变量名}
示例：
- less文件
@mySelector: #wrap;
@borderStyle: border-style;
@{mySelector}{
@{borderStyle}: solid;
}
- 编译后的css文件
#wrap{
border-style:solid;
}
3)Url变量：用" "将变量的值括起来，同样将变量以@{变量名}的方式使用
示例：
- less文件
@myUrl: "../images";
body{
background: url("@{myUrl}/xxx.png") no-repeat center;
}
- 编译后的css文件
body{
background: url("../images/xxx.png") no-repeat center;
}
4)申明变量：
格式：@name: {Key: value;}
使用：@name{};
示例：
- less文件
@Rules:{
width: 200px;
height: 200px;
border: solid 1px red;
};
#wrap{
@Rules();
}
- 编译后的css文件
#wrap{
width: 200px;
height: 200px;
border: solid 1px red;
}
5)变量运算和变量的作用域：
运算规则：加减法时，以第一个数据的单位为基准；乘除法时，注意单位一定要统一。
作用域规则：就近原则，存在变量提升,使用前不一定要预先声明
示例：
- less文件
@width:300px;
#wrap{
width: @width + 100;
p{
@width:200px;
height: (@width - 20) *2;
color: @color * 2;
}
};
@color:#222;
- 编译后的css文件
#wrap{
width: 400px;
};
#wrap p{
height: 360px;
color: #444;
}
2、嵌套：
- css不建议进行多层嵌套，嵌套的层数越多，性能就越差，所以尽量写同级；
- &:表示它的上一级选择器，多用于伪类；
- 媒体查询（缺点：每一个元素都会编译出自己@media声明，并不会合并）
示例： - less文件
#wrap{
color: #333;
.className1 {
border: 1px solid #eee;
background: #f0f0f0;
height: 200px;
&:hover {
background: #f60;
}
@media (max-width:768px){
height: 100px;
}
}
.className2 {
border: 1px solid #eee;
background: #fffffff;
height: 300px;
}
&:after {
content: '';
}
}
- 编译后的css文件
#wrap{
color: #333;
}
#wrap .className1 {
border: 1px solid #eee;
background: #f0f0f0;
height: 200px;
}
#wrap .className1:hover {
background: #f60;
}
@media (max-width:768px){
#wrap .className1 {
width:100px;
}
}
#wrap .className2 {
border: 1px solid #eee;
background: #fffffff;
height: 300px;
}
#wrap:after {
content: '';
}
3、mixin 混合：
1)无参数方法：“.”与“#”都可以作为方法前缀，当调用mixin时，括号是可选的。如果你想创建一个mixin，但你不想让mixin在生成css中输出，你可以在它后面加上括号 () 。mixin不仅可以包含属性，还可以包含选择器。
示例：
- less文件
.a, #b{
color: #333;
}
.noCss() {
background: #f0c0c0;
&:hover {
background: #f60;
}
}
#wrap{
.a();
.noCss()
}
p {
#b;
}
- 编译后的css文件
.a, #b{
color: #333;
}
#wrap{
color: #333;
background: #f0c0c0;
}
#wrap:hover{
background: #f60;
}
p {
color: #333;
}
2)带参数：可以为其参数设置默认值,命令参数引用的时候仅使用参数名称引用即可，不需要有任何特殊的顺序
参数是 分号 或 逗号 分割的。
建议使用分号。因为逗号有双重含义：它既可以被解释为mixin参数的分隔符，也可以作为css列表分隔符，容易混淆。
如果使用逗号作为mixin分隔符，那么就不可能创建使用逗号分隔的列表作为参数。另一方面，如果编译器在mixin调用或声明中看到至少一个分号，那么它假设参数由分号分隔，所有逗号都属于css列表：
---- 两个参数和每个包含逗号分隔的列表: .name(1, 2, 3; something, else)
----三个参数，每个参数包含一个数字：.name(1, 2, 3)
---- 使用假分号来创建一个包含逗号分隔的css列表的mixin调用：.name(1, 2, 3;)
---- 逗号分隔的默认值：.name(@param1: red, blue;)
示例：
- less文件
.size(@width; @height) {
width: @width;
height: @height;
}
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
border-radius: @radius;
}
#wrap{
.size(1000px; 300px);
.border-radius;
}
.main{
.size(@height:400px; @width:1200px);//引用的时候仅使用参数名称引用即可，不需要有任何特殊的顺序
}
- 编译后的css文件
#wrap{
width: 1000px;
height: 300px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.main{
width: 1200px;
height: 400px;
}
3)不定参数：
@arguments在mixin中有一个特殊的含义，它包含所有传入的参数，当mixin被调用时。如果你不想处理个别参数，这很有用。
… 可让你的mixin采取一个可变数目的参数。
.mixin(...) { // 匹配0-N 个参数
.mixin() { // 只匹配0个参数
.mixin(@a: 1) { // 匹配0-1个参数
.mixin(@a: 1; ...) { // 匹配0-N个参数
.mixin(@a; ...) { // 匹配1-N个参数
- less文件
.boxShadow(...){
box-shadow: @arguments;
}
.textShadow(@a,...){
text-shadow: @arguments;
}
#wrap{
.boxShadow(1px,5px,20px,black);
.textShadow(1px,5px,20px,black);
}
- 编译后的css文件
#wrap{
.boxShadow: 1px 5px 20px black;
.textShadow: 1px 5px 20px black;
}
4)方法的匹配模式
同一个方法名的多个方法，由于传入的参数不同而实现不同的功能。
示例：
- less文件
.triangle(top,@width:20px,@color:#000){
border-color:transparent transparent @color transparent ;
}
triangle(right,@width:20px,@color:#000){
border-color:transparent @color transparent transparent ;
}
.triangle(bottom,@width:20px,@color:#000){
border-color:@color transparent transparent transparent ;
}
.triangle(left,@width:20px,@color:#000){
border-color:transparent transparent transparent @color;
}
.triangle(@_,@width:20px,@color:#000){
border-style: solid;
border-width: @width;
}
#main{
.triangle(left, 50px, #999)
}
- 编译后的css文件
#main{
border-color:transparent transparent transparent #999;
border-style: solid;
border-width: 50px;
}
5)命令空间 Namespaces：
// 下面写法都一样
#outer > .inner;
#outer > .inner();
#outer.inner;
#outer.inner();
在引入命令空间时，如使用 > 选择器，父元素不能加括号
不得单独使用命名空间的方法必须先引入命名空间，才能使用其中方法
子方法可以使用上一层传进来的方法
示例：
- less文件
#card(){
background: #723232;
.d(@w:300px){
width: @w;
#a(@h:300px){
height: @h;//可以使用上一层传进来的方法
width: @w;
}
}
}
#wrap{
#card > .d > #a(100px); // 父元素不能加 括号
}
#main{
#card .d();
}
#con{
//不得单独使用命名空间的方法
//.d() 如果前面没有引入命名空间 #card ，将会报错
#card; // 等价于 #card();
.d(20px); //必须先引入 #card
}
- 编译后的css文件
#wrap{
height:100px;
width:300px;
}
#main{
width:300px;
}
#con{
width:20px;
}
6)!important 关键字
使用 !important 关键字，将会标记调用所有继承的属性为!important
示例：
- less文件
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.important {
.foo(2) !important;
}
- 编译后的css文件
.important {
background: #f5f5f5 !important;
color: #900 !important;
}
7)条件语句
Less没有if / else 但是less具有一个when，and，not与“，”语法。
示例：
- less文件
#card{
// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
.border(@width,@color,@style) when (@width>100px) and(@color=#999){
border:@style @color @width;
}
// not 运算符，相当于 非运算 !，条件为 不符合才会执行
.background(@color) when not (@color>=#222){
background:@color;
}
// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
.font(@size:20px) when (@size>50px) , (@size<100px){
font-size: @size;
}
}
#main{
#card>.border(200px,#999,solid);
#card .background(#111);
#card > .font(40px);
}
- 编译后的css文件
#main{
border:solid #999 200px;
background:#111;
font-size:40px;
}
8)循环语法：递归的方法实现
示例：
- less文件
.position-left(4);
.position-left(@n, @i: 0) when (@i < @n) {
.left-@{i} {
width: (100% / @n);
left: (@i * 100% / @n);
}
.position-left(@n, (@i + 1));
}
- 编译后的css文件
.left-1 {
width:25%;
left: 0;
}
.left-2 {
width:25%;
left: 25%;
}
.left-3 {
width:25%;
left: 50%;
}
.left-4 {
width:25%;
left: 75%;
}
4、属性的拼接语法
+代表的是逗号，+_代表的是空格。
示例：
- less文件
.Animation() {
transform+_: scale(2);
}
.boxShadow() {
box-shadow+: inset 0 0 10px #999;
}
.main {
.Animation();
transform+_: rotate(15deg);
.boxShadow();
box-shadow+: 0 0 20px black;
}
- 编译后的css文件
.main {
transform: scale(2) rotate(15deg);
box-shadow: inset 0 0 10px #999, 0 0 20px black;
}
5、继承(扩展)
extend是less的一个伪类。它可以继承所匹配声明中的全部样式。all全局搜索替换
注意事项：
1、选择器和扩展之间 是允许有空格的：a:hover :extend(li a).
2、可以有多个扩展: a:hover:extend(li a):extend(.className) - 注意这 与 a:hover:extend(li a, .className)一样。
示例：
- less文件
.animation{
transition: all .3s ease-out;
.hide{
transform:scale(0);
}
}
#main{
&:extend(.animation);
}
#con{
&:extend(.animation .hide);
}
#All:extend(.animation all){}
- 编译后的css文件
.animation,#main,#All {
transition: all 0.3s ease-out;
}
.animation .hide,#con,#All .hide {
transform: scale(0);
}
6、导入@import
1、导入less文件，可以省略后缀。
2、@import可以放在任何地方
3、reference引入一个less文件，但不会编译它，@import (reference) “xxx.less”;
4、once（默认行为），表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。@import (once) “xxx.less”;
5、multiple，允许导入多个同名文件。@import (multiple) “xxx.less”;
7、避免编译
~"anything"：在编译时，任何包含在 ~"anything" 中的内容，将会原封不动的输出到编译后的CSS文件中
示例：
- less文件
@max1000: ~"(max-width: 1000px)";
#wrap {
content: ~"'Are you ok?'"
}
li {
@media @max1000 {
width:100px;
}
}
- 编译后的css文件
#wrap {
content: 'Are you ok?';
}
@media (max-width: 1000px) {
li {
width: 100px;
}
}
