less的运用

一、less

1、关于less的介绍

• Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

• 先安装node，参考链接：Node.js 安装配置 | 菜鸟教程

  检测node是否安装成功

• 新建一个less文件夹，其内有style.less文件（注意是以后缀名.less命名的文件）

2、关于less的使用

(1)变量

常用于公共样式属性的复用，语法：@变量名称: 变量值；

@pic: 100%;
img {
      width: @pic;
      height: @pic;
     }
@bgColor: red;
.box {
    background-color: @bgColor;
}

 (2)混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）

.bordered {
    border-top: dashed 20px red;
    border-right: solid 10px blue;
}
.box {
    .bordered()
}

（3）嵌套 

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力

header {
    .box1 {
        font-size: 12px;
    }
    .box2 {
        text-decoration: line-through;
    }
    > .box3 {
        font-weight: 600;  
        & {
            color: blue;
        }  
    }
}

3、@规则：@ 规则（例如 @media 或 @supports）可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）。

4、运算（Operations）

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

5、转义（Escaping）

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation。

6、映射（Maps）

与less变量类似，它类似js里面从对象中获取属性的值
语法 ：.或者#映射类() {属性名:属性值; 属性名:属性值;}

7、作用域（Scope）

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

8、注释（Comments）

单行：// 注释内容
多行：/* 注释内容 */

/* 一个块注释
 * style comment! */
@var: red;
// 这一行被注释掉了！@var: white;

9、导入（Importing）

引入方法和引入css方法一样，less文件的后缀名称可以省略，使用时注意后边的分号;必须加，否则报错