less的常用语法总结和案例

1.变量

常用于定义属性值，让我们可以统一维护和修改，减少重复的操作。

@brightRed: #FF3163;  //定义属性值值的变量


// 亮红色
.brightRed {
    color: @brightRed;  //使用变量
}

2.混合

多个元素有相同的属性时，可以将公共的属性抽离出来，然后引入。

2-1：直接混合

.tool-row {   //公共样式，add-receiving-address和del-address都拥有的样式
  height: 42px;
  line-height: 42px;
  display: inline-block;
  cursor: default;
}
.add-receiving-address {
  width: 124px;
  color: @brightRed;
  .tool-row;  //引入公共样式
}
.del-address {
  width: 80px;
  .tool-row;  //引入公共样式
}

2-2：带参数的混合（类似函数可以传参）

（1）定义带参数的属性

.border-radius (@radius) {
   border-radius: @radius;
}

#header {
  .border-radius(4px);
}

.button {
  .border-radius(6px);  
}

（2）定义带默认参数值的属性

.border-radius (@radius : 5px) {
   border-radius: @radius;
}

#header {
  .border-radius(4px);
}

3.模式匹配

常看到页面上有换肤功能，一键切换背景颜色，那么久可以用模式匹配了。

//让.mixin根据不同的@switch值而表现各异（第一个参数对应switch的值）
.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

//运行
@switch: light;  （这时候我们的背景色就是亮色）

.class {
  .mixin(@switch, #888);
}



//编译以后
class {
  color: #a2a2a2;
  display: block;
}
/*mixin就会得到传入颜色的浅色。如果@switch设为dark，就会得到深色。

具体实现如下：
第一个混合定义并未被匹配，因为它只接受dark做为首参
第二个混合定义被成功匹配，因为它只接受light
第三个混合定义被成功匹配，因为它接受任意值

只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的*/

4.嵌套

最常用的语法了，将子类写在父类里面

.card-body-left {
   width: 820px;
     .content-left {
       padding-top: 10px;
         img {
               width: 80px;
         }
     }
}

用&指代当前类

.logo {
    width: 300px;
    &:hover { text-decoration: none }  //即.logo:hover
  }

5.运算

（1）任何数字、颜色都可以参与运算

@base : 10%;
@filter : @base * 2;
@other : @base + @filter;

color : #888 / 4;
background-color : @base=color + #111;
height : 100% / 2 + filterl;

（2）less运算能够分辨颜色和单位

@var  : 1px + 5; //6px
width  : (@var + 5 ) *2; //被允许使用括号
border: (@width * 2) solid black;  // 可以在符合属性中进行使用

6.函数

（1）less本身提供了一系列的颜色运算函数。颜色会被转化成为HSL色彩空间，然后在通道级别操作。

lighten(@color, 10%);     // 返回一个比@color低10％更轻的颜色
darken(@color, 10%);      // 返回一个比@color高10％较暗的颜色
saturate(@color, 10%);    // 返回比@color多饱和度10％的颜色
desaturate(@color, 10%);  // 返回一个比@color少饱和度10％的颜色
fadein(@color, 10%);      // 返回一个比@color少10％透明度的颜色
fadeout(@color, 10%);     // 返回一个比@color多10％透明度的颜色
fade(@color, 50%);        // 返回一个颜色透明度为50％的颜色
spin(@color, 10);         // 返回色调比@color大10度的颜色
spin(@color, -10);        // 返回一个比@color小10度色调的颜色
mix(@color1, @color2);    // 返回一个混合@ color1和@ color2的颜色


//使用：
@base: #f04615;
.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

（2）可以获取颜色的具体参数

hue(@color)                     //获取色相
saturation(@color)             //获取饱和度
lightness(@color)              //获取明度

7.命名空间

有时候，我们可能更好地组织CSS或是单纯的为了更好地封装，我们会将会一些变量或是混合模块进行打包操作，为了后续进行复用

//定义命名空间#bundle，并在里面封装了一个按钮的样式
#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

//使用：引入#bundle中的按钮样式
#header a {
  color: orange;
  #bundle > .button;
}

8.JavaScript表达式

（1）JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

@var: `"hello".toUpperCase() + '!'`;  // @var :"HELLO!"

（2）可以访问JavaScript的环境

@height: `document.body.clientHeight`;