CSS编译工具Less的基础用法

来源:博客园【青春筑梦】 2019-01-19 10:54:20
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);
}
原文出处:https://www.cnblogs.com/yaotu/p/10272787.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文来源地址若非本站均为转载,若侵害到您的权利,请及时联系我们,我们会在第一时间进行处理。