less基础语法

Posted 2020-10-02

 

变量

//->LESS代码
    @link-color: #428bca;
    @link-color-hover: darken(@link-color, 10%);
    a {
        color: @link-color;
        &:hover {
            color: @link-color-hover;
        }
    }
    .box {
        color: @link-color;
    }

    //->编译为CSS的结果
    a {
        color: #428bca;
    }
    a:hover {
        color: #3071a9;
    }

　　

混入（Mixins）

// 定义一个样式选择器
 .roundedCorners(@radius:5px) { 
     -moz-border-radius: @radius; 
     -webkit-border-radius: @radius; 
     border-radius: @radius; 
 } 
 // 在另外的样式选择器中使用
 #header { 
     .roundedCorners; 
 } 
 #footer { 
     .roundedCorners(10px); 
 }
//经过编译生成的 CSS 文件如下：
#header { 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 
#footer { 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
}

------------------------------------------------------------------------
//->LESS代码
 .transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
　　 -webkit-transition: @arguments;
　　transition: @arguments;
}
.box1 {
      .transition;
 }

//->编译为CSS的结果
 .box1 {
　　-webkit-transition: all 1s linear 0s;
　　 transition: all 1s linear 0s;
 }

　　

继承（extend）

//->LESS代码
    .public {
        width: 100px;
        height: 100px;
    }

    nav ul {
        &:extend(.public);
        list-style: none;
    }

    //->编译为CSS的结果
    .public, nav ul {
        width: 100px;
        height: 100px;
    }

    nav ul {
        list-style: none;
    }
或者：
    //->LESS代码
    .public {
        width: 100px;
        height: 100px;
    }
    nav ul:extend(.public) {
        list-style: none;
    }
    //->编译为CSS的结果和第一种写法一样

　　

作用域

//->LESS代码
    @color: #ccc;
    .box {
        @color: #eee;
        .gray {
            color: @color;
        }
    }
    .box2 {
        .gray {
            color: @color;
        }
    }

    //->编译为CSS的结果
    .box .gray {
        color: #eee;
    }
    .box2 .gray {
        color: #ccc;
    }

　　

运算

    @init: #111111; 
    @transition: @init*2; 
        .switchColor { 
        color: @transition; 
    }
    //经过编译生成的 CSS 文件如下：
    .switchColor { 
         color: #222222; 
    }
------------------------------------------------------------------------------
    //->LESS代码
    .mixin (@a) when (lightness(@a) >= 50%) {
      background-color: black;
    }
    .mixin (@a) when (lightness(@a) < 50%) {
      background-color: white;
    }
    .box1{
      .mixin(#ddd);
    }
    .box2{
      .mixin(#555);
    }
    //->编译为CSS的结果
    .box1 {
        background-color: black;
    }
    .box2 {
        background-color: white;
    }

　　

 函数

LESS 还有一个专门针对 color 的操作提供一组函数。下面是 LESS 提供的针对颜色操作的函数列表：
lighten(@color, 10%); // return a color which is 10% *lighter* than @color 
darken(@color, 10%); // return a color which is 10% *darker* than @color 
saturate(@color, 10%); // return a color 10% *more* saturated than @color 
desaturate(@color, 10%);// return a color 10% *less* saturated than @color 
fadein(@color, 10%); // return a color 10% *less* transparent than @color 
fadeout(@color, 10%); // return a color 10% *more* transparent than @color 
spin(@color, 10); // return a color with a 10 degree larger in hue than @color 
spin(@color, -10); // return a color with a 10 degree smaller hue than @color
PS: 上述代码引自 LESS CSS 官方网站，详情请见 http://lesscss.org/#-color-functions
使用这些函数和 javascript 中使用函数一样。

init: #f04615; 
 #body { 
    background-color: fadein(@init, 10%); 
 }
经过编译生成的 CSS 文件如下：

#body { 
    background-color: #f04615; 
}

　

递归

在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard条件表达式，就可以写出循环结构。使用递归循环最常见的情况就是生成栅格系统的CSS：


    //->LESS代码
    .generate-columns(4);
    .generate-columns(@n, @i: 1) when (@i <= @n) {
      [email protected]{i} {
        width: (@i * 100% / @n);
      }
      .generate-columns(@n, (@i + 1));
    }

    //->输出的CSS
    .column-1 {
        width: 25%;
    }

    .column-2 {
        width: 50%;
    }

    .column-3 {
        width: 75%;
    }

    .column-4 {
        width: 100%;
     }

　　

导入（import）

    //->LESS代码
    @import "public.less";

    .box {
      &:after {
        .clear;
      }
    }

    //->输出的CSS:会把public中的样式也输出
    .clear {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
    }

    .box:after {
        display: block;
        height: 0;
        content: "";
        clear: both;
        zoom: 1;
　　
    }