一. 变量
1 @ 10px; 2 @height: @width + 10px;//带单位的加减, 以运算符左边单位为主 3 4 #header { 5 @width; 6 height: @height; 7 } 8 编译为 9 #header { 10 10px; 11 height: 20px; 12 }
二. 代码片段(混合)
.center(@type:absolute){//定义代码片段center,其中()可以不带;带()表示是代码片段, 不生成最终代码, 而不带表示class, 会生成代码 position: @type;//参数可以多个 top: 50%; left: 50%; transform: translate(-50%,-50%); } .wrapper{ position: relative; height: 300px; 300px; background: red; .inner{ 100px; height: 100px; background: yellow; .center();//执行代码片段 } }
3 映射: 从代码片段中获取某个属性
1 #color(){ 2 danger: red; 3 success: yellow 4 } 5 .wrapper{ 6 position: relative; 7 height: 300px; 8 300px; 9 background: #color()[danger];
}
4嵌套时候 &表示父级 >表示直接子元素
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
.a li.demo{
color: red
}
.a { li { &.demo { color: red } } }
5 转义~: 字符串作为属性值或变量值时候, 要用转义;
6函数:
(1). if(condition, result1, result2)
1 @some: foo; 2 3 div { 4 margin: if((2 > 1), 0, 3px); 5 color: if((iscolor(@some)), @some, black); 6 } 7 //Result: 8 9 div { 10 margin: 0; 11 color: black; 12 }
(2)darken(颜色, 百分百) lighten()
1 // 颜色加深案例 2 3 .color(){ //定义很多颜色主题 4 red: #f40; 5 green: green; 6 } 7 8 @color: .color()[red]; // 确定当前主题 9 10 div{ 11 .size(); 12 margin:10px; 13 } 14 .demo1{ 15 background: @color; 16 } 17 .demo2{ 18 background: darken(@color,10%); //不断加深 19 } 20 .demo3{ 21 background: darken(@color,20%);//不断加深 22 }