当前位置： 移动技术网 > IT编程>网页制作>CSS > less笔记

less笔记

2019年01月16日  | 移动技术网IT编程  | 我要评论

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);
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网