JavaScript基础学习——CSS预处理Less

一、CSS预处理

目前CSS预处理语言主要有：Less,SASS,Stylus等。浏览器不能编译.less/.scss/.sass/.styl等文件，在html文件引入前面这些样式文件，必须先编译成.css文件。

二、在VSCode中编译less

1、安装插件：按Ctrl + Shift + x，打开扩展面板，安装Easy LESS。

2、修改设置文件（settings.json），在settings.json中添加如下代码：
    "[less]":{
        "editor.suggest.insertMode": "replace"
    },
    "less.compile": {
        "compress": false, /* 是否进行压缩处理 */
        "sourceMap": false,/* 是否生成map（映射文件)文件，如果为true，则可以在控制台看到less的行数 */
        "out": true,/* 编译后输出 */
        "outExt": ".css" /* 设置编译后的文件的扩展名 */
    }

三、Less官网：http://lesscss.cn

四、CSS预处理

CSS预处理是一种将CSS作为目标生成文件的，使用变量、函数及简单的逻辑实现更加简洁、适应性更强、可读性更好、更易于代码维护的兼容浏览器的页面样式文件。通过编程来写CSS。

五、Less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。形成的文件的扩展名为：.less。

使用的目的：是为了提升开发效率。

六、Less语法

1、变量

格式：@变量名: 值;

注意：在less中引用变量时，要把变量当成一个常量处理。

创建的后缀一定是xxx.less

@bgColor:pink;

div{
  background-color: @bgColor;
}

2、混合用法

在less中定义一些通用的属性集为一个class，然后再在另一个样式中去调用它。

@color:rbg(255,189,91);
@boxShadow:0px -2px 2px 2px #999;

.box{
  color: @color;
  width: 200px;
  height: 50px;
  box-shadow: @boxShadow;
  margin-bottom: 10px;
}

p{
  color: @color;
  width: 200px;
  height: 100px;
  border: 1px solid #000;
}


@cl:#eee;
@highlight:"cl";
#header{
  color: @@highlight;
}

3、带参数的混合用法

      用法1：
        .类名(){

          /*css样式表;*/

        }

.bd{
  border-top: 1px solid #000;
  border-bottom: 1px solid #999;
}

.txtOverflow{
  width: 200px;
  overflow: hidden;
}

#box{
  color: red;
  .bd;
}

p{
  .bd;
  .txtOverflow;
}

      用法2：
        .类名(参数列表){
          属性名： 参数1；
          属性名： 参数2；
          ....
        }

      用法3：
        .类名(参数1:默认值,参数2:默认值,...){
          属性名： 参数1；
          属性名： 参数2；
          ....
        }

.bd(@lineWidth:3px){
  border-top: @lineWidth solid #000;
  border-bottom: @lineWidth solid #000;
}

.txtOverflow{
  width: 200px;
  overflow: hidden;
}

#box{
  color: red;
  .bd(2px)
}

p{
  .bd(1px);
  .txtOverflow
}

span{
  .bd();
  .bd
}

.shadow(@x1,@y1,@blur1,@color1,@x2:2px,@y2:2px,@blur2:3px,@color2:gray){
  box-shadow: @x1 @y1 @blur1 @color1;
  text-shadow: @x2 @y2 @blur2 @color2;
}

article{
  .shadow(3px,3px,5px,green,1px,0,2px,#000);
}
address{
  .shadow(3px,3px,5px,green);
}

.txtOver(){
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p1{
  .txtOver();
}

4、嵌套规则
      格式：
        父级（父类）｛
          属性：属性值;
          ...
          子级（子类）｛
            属性：属性值;
            ...
            &:hover{
              属性：属性值;
              ...
            }
            &:before{
              属性：属性值;
              ...
            }
            &:nth-of-type(n){
              属性：属性值;
              ...
            }
            ...
          ｝
        ｝

.box{
  width: 100%;
  height: 200px;overflow: hidden;
  span{
    color: red;
    display: block;
  }
  ul{
    list-style: none;
    li{
      float: left;
      margin-right: 10px;
      &:nth-child(2){
        color: blue;
      }
      p{
        line-height: 1.5em;
        span{
          color:red;
          font-style: italic;
          }
        a{
          text-decoration: none;
          color: #123456;
          position: relative;
          &:hover{
            text-decoration: underline;
            color: red;
          }
        &:before{
          content:"";
          display: block;
          width: 100%;
          height: 1px;
          position: absolute;
          left: 0;
          top: 0;
          border-top: 1px solid #000;
          }
        }
      }   
    }
  }
}

5、运算

在Less中可以使用加、减、乘和除运算。

注意：减号左右要加空格，其它运算符可以不加。

@w:100px;
@num:10px;

p{
  width: @w*2.5;
}

.contain1{
  margin: @num * 2 @num *1.5 @num @num - 2;
}

.container2{
  margin: (@num+5)*2 @num*1.5 @num @num - 20; /* 减号左右要加空格，其它运算符左右可以不加空格 */ 
}

6、作用域

作用域在编译采用最近原则。首先会从当前作用域内查找变量或混合模块，如果没找到，则去父级作用域中查找，直到找到为止。

@var:red;

header{
  @var:blue;
  nav{
    background-color: @var;
  }
}

section{
  border: 1px solid @var;
}

footer{
  @var:pink;
  color: @var;
}

7、函数

（1）Color函数

颜色会先被转化为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%); 返回一个@color颜色的50%透明度的颜色
          spin(@color, 10); 返回一个比@color 色调大10度的颜色
          spin(@color, -10); 返回一个比@color 色调小10度的颜色
          mix(@color1, @color2) 返回一个@color1和@color2混合的颜色

提取颜色信息：
          hue(@color); 返回@color颜色的色调通道
          saturation(@color); 返回@color颜色的饱和度通道
          lightness(@color); 返回@color颜色的亮度通道

@cl1:rgb(71, 20, 105);
@cl2:#fff;

p{
  color: lighten(@cl1, 20%);
}

span{
  color: darken(@cl2, 100%);
}

em{
  color: saturate(@cl1, 20%);
  background-color: fadein(@cl1, 20%)
}

sup{
  color: mix(@cl1, @cl2);
}

a{
  background-color: hsl(hue(@cl1),60%,70%);/* h:0-360,s:0-100%,l:0-100% */
}

（2）Math函数
        round（x，y） 对x四舍五入，保留y个小数点
        ceil（x） 向上取整
        floor（x） 向下取整
        percentage（x） 取百分数。eg：percentage（0.6）返回60%
        min(a,b,c,d,e…); 取最小值
        max(a,b,c,d,e…); 取最大值

@w: 2.4px;

div{
  border: round(@w*3) solid #000;
}

.width(@width){
  width: percentage(@width);
}

.box{
  .width(.8);
  height: max(10px,20px,-9px,-100px);
}

8、避免编译

在开发时，可能会现Less不识别的代码，或者不让编译，这时需要用到Less的专用语法-避免编译。用双引号引起来，再在前面加上~。

.calc(@x){
  height: @x;
 }
 
 .box{
   width: ~"calc(100px - 20px)";
   .calc(100px - 20px);
 }