超详细的Lass

一、认识Lass

LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性。

二、Lass安装

	npm install less -g

三、使用

直接在style标签上加入less

四、Lass特点

1、less可以用@关键字定义变量 用~转义

@color:red
p{color:@color}

// 05 转义 转义后都是字符串
@str:~".loginBlock .test span";
@b:~"1px solid red";

@{str}{
  color:@waring;
  border:@b;
}

2、嵌套使用

ul {
  list-style: none;
  li {
    line-height: 44px;
    a {
      text-decoration: none;
      &:hover {
        color: red;
      }
    }
  }
}

3、内置函数颜色，字符串，数学

@bg:rgb(25, 46, 36);
.test{
  .s1{background-color: @bg;};
  .s2{background-color: lighten(@bg,20%);}
  .s3{background-color: lighten(@bg,40%);}
}

4、命名空间、映射

#bg(){
  background-color: aquamarine;
  font-size: 24px;
}
#colors() {
  primary: blue;
  secondary: green;
  size:24px;
}

.testp{
  // .test.s2(); //取选择器里面的所有属性与属性值
  font-size:#colors[size];
  // 映射某一个值
  background-color: .test.s3[background-color];
}

5、存在作用域

@color:red;
.loginBlock{
  @color:blue;
  .testp{
    color:@color;
    //就近原则没有找上级绿色
  }
}

6、计算

@w: 10px;
.test {
  span {
    display: inline-block;
    height: 44px;
    // background-color: aqua;
    margin: 10px;
  }
  .s1 {
    padding: 0 @w;
  }
  .s2 {
    padding: 0 @w+10;
  }
  .s3 {
    padding: 0 @w*3;
  }
}

效果图