less笔记
程序员文章站
2022-05-02 12:22:44
1. 变量 2. 混合 3. 运算 4. 条件判断 ......
1. 变量
//less @color: #4d926f; //使用 #header { color: @color; }
2. 混合
//less .rounded-corners (@radius: 5px) { border-radius: @radius; } //使用 #footer { .rounded-corners(10px); }
3. 运算
//less @the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); } @arguments包含了所有传递进来的参数 .box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) { box-shadow: @arguments; }
4. 条件判断
//less .arrow(@direction,@color,@pixel:5px) when (@direction = up) { .arrowup(@color); .arrowset(@pixel); } .arrow(@direction,@color,@pixel:5px) when (@direction = down) { .arrowdown(@color); .arrowset(@pixel); } //使用 div.d1{ .arrow(right,red); }
上一篇: ai怎么设计英文字母logo标志?