下面我们先大体了解些我接下来讲的less的功能特性：
- 属性
- 嵌套
- 混合方法
- 继承
- 导入
- 函数
- 其他
1、属性
（1）、值变量
@dividerColor:#000; div{ background: @dividerColor; }
（2）、选择器变量
@footer: .footer; @{footer}{ }
（3）、属性变量
@color:color; div{ @{color}:#000; }
（4）、url 变量
@images:'../images' ; div{ background:url('@{images}/img.png'); }
(5)、声明变量
结构: @name: { 属性: 值 ;}; 使用：@name();
@background: {background:red;}; #main{ @background(); }
(6)、变量运算
@width:300px; @color:#222; div{ width:@width-20; height:@width-20*5; margin:(@width-20)*5; color:@color*2; background-color:@color + #111; }
(7) 、变量作用域
就近原则
@var: @a; @a: 100%; #wrap { width: @var; @a: 9%; }
(8) 、用变量去定义变量
@fnord: "I am fnord."; @var: "fnord"; #wrap::after{ content: @@var; //将@var替换为其值 content:@fnord; }
嵌套
（1）、& 的妙用
& ：代表的上一层选择器的名字，此例便是header。
.big{ .small{ &:after{ color:red; } &_small{ color:green; } } }
(2) 媒体查询
div{ @media scress{ @media (max-width:768px){ width:100px; } @media tv{ width:200px; } } }
唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。
混合方法
(1)、无参数方法
.card { background: #f6f6f6; -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58); box-shadow: 0 1px 2px rgba(151, 151, 151, .58); } #wrap{ .card(); }
(2)、默认参数方法
.border(@a:10px,@b:50px,@c:30px,@color:#000){ border:solid 1px @color; box-shadow: @arguments;//指代的是 全部参数 } #main{ .border(0px,5px,30px,red);//必须带着单位 }
（3）、方法中的匹配模式
#main{ .csser(left,50px,#999); } .csser(top，@width:20px,@color:#000){ border-color:transparent transparent @color transparent; }
(4) 、方法的命名空间
#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 中
>选择器，选择的是 儿子元素，就是 必须与父元素 有直接血源的元素。
- 在引入命令空间时，如使用
>选择器，父元素不能加 括号。
- 不得单独使用命名空间的方法 必须先引入命名空间，才能使用 其中方法。
- 子方法 可以使用上一层传进来的方法 (5)、方法的条件筛选
#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); }
- 比较运算有： > >= = =< <。
- = 代表的是等于
- 除去关键字 true 以外的值都被视为 false：
(6)、数量不定的参数
.boxShadow(...){ box-shadow: @arguments; } .textShadow(@a,...){ text-shadow: @arguments; } #main{ .boxShadow(1px,4px,30px,red); .textShadow(1px,4px,30px,red); }
(7)、方法使用important！
.border{ border: solid 1px red; margin: 50px; } #main{ .border() !important; }
