less css预处理语言 less介绍

1.关于less（calc（css源生计算属性））

它是一门CSS预处理，扩充了CSS语言，增加了变量、Mixin混合、函数特性等，使css更容易维护和扩展。它不是一种直接使用的语言，而是生成css的语言。less可以运行在node或者浏览器端。
（常见的css预编译器有三种：less、sass、stylus）

less中的注释

以//开头的注释，不会被编译到css文件中。
以/**/包裹的注释会被编译到css文件中。

less中的变量

使用@来声明一个变量：@pink： pink；

1. 作为普通变量属性值来使用：直接使用@pink

@pink：pink；
div {
  background：@pink；
}
//less其变量只能定义一次，如果重复定义，后面的回响js中的变量提升一样，覆盖前面的变量。

2. 做为选择器和属性名：#@{selector的值}的形式

选择器变量

 /* Less */
      @mySelector: #wrap;
      @Wrap: wrap;
      @{mySelector}{ //变量名 必须使用大括号包裹
        color: #999;
        width: 50%;
      }
      .@{Wrap}{
        color:#ccc;
      }
      #@{Wrap}{
        color:#666;
      }  
      /* 生成的 CSS */
      #wrap{
        color: #999;
        width: 50%;
      }
      .wrap{
        color:#ccc;
      }
      #wrap{
        color:#666;
      }

属性名变量（常用）

 /* Less */
      @borderStyle: border-style;
      @Soild:solid;
      #wrap{
        @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
      }
      /* 生成的 CSS */
      #wrap{
        border-style:solid;
      }

3. 作为URL: @{url}
   项目结构改变时，可以方便我们修改，目的是为了方便项目的维护。

/* Less */
      @images: "../img";//需要加引号
      body {
        background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
      }
      /* 生成的 CSS */
      body {
        background: url("../img/dog.png");
      }

4. 变量延迟加载

less中的嵌套规则

1.基本嵌套规则
2.&的使用

  /* Less &表示为上一级选择器是名字*/
      #header{
        &:after{ //&表示与#header同级，不加&表示为#header的子级
          content:"Less is more!";
        }
        .title{
          font-weight:bold;
        }
        &_content{//理解方式：直接把 & 替换成 #header
          margin:20px;
        }
      }
      /* 生成的 CSS */
      #header::after{
        content:"Less is more!";
      }
      #header .title{ //嵌套了
        font-weight:bold;
      }
      #header_content{//没有嵌套！
          margin:20px;
      }

less中的混合Mixin

混合就是将一系列属性从一个规则集引入到另一个规则集的方式
简单来说混合就是用来抽离公共的样式，避免css代码的臃肿，提高复用性。

1. 普通混合

在这里插入代码片

2. 不带输出的混合
3. 带参数的混合

.setSize(@width_size,@height_size){
  width:@width_size;
  height:@height_size;
}

4. 带参数并且有默认值的混合

/* Less */
      .border(@a:10px,@b:50px,@c:30px,@color:#000){
          border:solid 1px @color;
          box-shadow: @arguments;//指代的是 全部参数
      }
      #main{
          .border(0px,5px,30px,red);//必须带着单位
      }
      #wrap{
          .border(0px);
      }
      #content{
        .border;//等价于 .border()
      }
    
      /* 生成的 CSS */
      #main{
          border:solid 1px red;
          box-shadow:0px,5px,30px,red;
      }
      #wrap{
          border:solid 1px #000;
          box-shadow: 0px 50px 30px #000;
      }
      #content{
          border:solid 1px #000;
          box-shadow: 10px 50px 30px #000;
      }    

less的继承

exthend是less的一个伪装类，它可以继承匹配声明中的全部样式。

 /* Less */
      .animation{
          transition: all .3s ease-out;
          .hide{
            transform:scale(0);
          }
      }
      #main{
          &:extend(.animation);
      }
      #con{
          &:extend(.animation .hide);
      }
    
      /* 生成后的 CSS */
      .animation,#main{
        transition: all .3s ease-out;
      }
      .animation .hide , #con{
          transform:scale(0);
      }

其中all全局搜索替换，匹配所有声明

/* Less */
      #main{
        width: 200px;
      }
      #main {
        &:after {
          content:"Less is good!";
        }
      }
      #wrap:extend(#main all) {}
    
      /* 生成的 CSS */
      #main,#wrap{
        width: 200px;
      }
      #main:after, #wrap:after {
          content: "Less is good!";
      }

在less文件中可以导入其他less文件，使用的是import关键字

1. 导入less文件，可以省略后缀。
2. @import可以放在任何地方

import “index.less”;
import “index”;//导入less文件可以省略后缀。

3. reference用来引入less文件，但不会编译它。

@import (reference) “bootstrap.less”;
#wrap:extend(.navbar all){}

4. once @import语句的默认行为。表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。

@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored

5. multiple 使用@import (multiple)允许导入多个同名文件。

* Less */
   
// file: foo.less
.a {
  color: green;
}
// file: main.less
@import (multiple) "foo.less";
@import (multiple) "foo.less";
   
/* 生成后的 CSS */
.a {
  color: green;
}
.a {
  color: green;
}

避免编译 使用_{’该内容不会编译’/}“不会编译的内容”

 #main{
     width:~'calc(300px-30px)';
 }
    
/* 生成后的 CSS */
#main{
    width:calc(300px-30px);
}

less 中可以使用js,因为less本身就是使用js实现的

 /* Less */
      @content:`"aaa".toUpperCase()`;
      #randomColor{
        @randomColor: ~"rgb(`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`,`Math.round(Math.random() * 256)`)";//在这里先定义赋值
      }
      #wrap{
        width: ~"`Math.round(Math.random() * 100)`px";
        &:after{
            content:@content;
        }
        height: ~"`window.innerHeight`px";
        alert:~"`alert(1)`";
        #randomColor();
        background-color: @randomColor;
      }
      /* 生成后的 CSS */
    
      // 弹出 1
      #wrap{
        width: 随机值（0~100）px;
        height: 743px;//由电脑而异
        background: 随机颜色;
      }
      #wrap::after{
        content:"AAA";
      }