less基础小结

CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。为了方便前端开发的工作量，出现了less.

less的使用注意事项

less使用.less作为文件后缀。通过第三方工具，可以一键或者实时编译成对应的css文件。也就是说：实际项目中，我们编辑的是.less文件，但引用时依旧像往常一样引用.css文件。通过第三方工具（例如Koala），可以实现.less文件一发生改变，就生成同名的.css文件。

LESS的基础语法基本上分为以下几个方面：变量、混合(Mixins)、嵌套规则、运算、函数、作用域等

变量 

以 @ 开头 定义变量，并且使用时 直接 键入 @名称。

 变量的好处是显而易见的，在平时工作中，我们就可以把 常用的变量 封装到一个文件中，这样利于代码组织维护。 用以下导入方法
注意，由于变量只能定义一次，其本质就是“常量”； 

1.属性值作为变量：@变量名:值;

//定义变量(全局变量)
@COLOR:#ff0000;
@WIDTH:200px;

div{
  background:@COLOR;
  padding:@WIDTH;
}


//编译后的css

div{
  background: #ff0000;
  padding: 200px;
}

 

2.选择器作为变量

@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;
 }

3.属性名作为变量　

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

4.路径作为变量   项目结构改变时，修改其变量即可

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

5.声明变量 

   - 结构: @name: { 属性: 值 ;};
     - 使用：@name();

@background: {background:red;};
  #main{
      @background();
  }
  @Rules:{
      width: 200px;
      height: 200px;
      border: solid 1px red;
  };
  #con{
    @Rules();
  }
 
  //生成的 CSS 
  #main{
    background:red;
  }
  #con{
    width: 200px;
    height: 200px;
    border: solid 1px red;
  }

6.用变量定义变量  解析的顺序是从后向前逐层解析。

@fnord:  "I am fnord.";
@var:    "fnord";
#wrap::after{
  content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
  content: "I am fnord.";
}

7.变量的作用域。一句话，就近原则；和js的作用域一样，即内部的变量可以覆盖全局变量；或者是相同的变量，后面的值会覆盖前面声明的。

 less内容
    @var: red;
    #page {
      @var: white;
      #header {
        color: @var; // white
      }
    }



/* Less */
      @var: @a;
      @a: 100%;
      #wrap {
        width: @var;
        @a: 9%;
      }
    
      /* 生成的 CSS */
      #wrap {
        width: 9%;
      }

8.变量的运算

- 加减法时 以第一个数据的单位为基准
  - 乘除法时 注意单位一定要统一

 /* Less */
      @width:300px;
      @color:#222;
      #wrap{
        width:@width-20;
        height:@width-20*5;
        margin:(@width-20)*5;
        color:@color*2;
        background-color:@color + #111;
      }
    
      /* 生成的 CSS */
      #wrap{
        width:280px;
        height:200px;
        margin:1400px;
        color:#444;
        background-color:#333;
      }
    

嵌套

& ：代表的上一层选择器的名字，此例便是header

      /* Less */
      #header{
        &:after{注意：不能省略&，如果省略会给每一个子元素添加一个after。
          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;
      }

混合

1.无参数方法  方法犹如 声明的集合，使用时 直接键入名称即可

  /* Less */
      .card { // 等价于 .card()
          background: #f6f6f6;
          -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
          box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
      }
      #wrap{
        .card;//等价于.card();
      }
      /* 生成的 CSS */
      #wrap{
        background: #f6f6f6;
        -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
        box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
      }

 要点：
  `.` 与 `#` 皆可作为 方法前缀。
  方法后写不写 `()` 看个人习惯。

2.默认参数方法

Less 可以使用默认参数，如果 没有传参数，那么将使用默认参数。

@arguments 犹如 JS 中的 arguments 指代的是 全部参数。

传的参数中 必须带着单位。

   /* 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;
      }

3.方法的匹配模式

与 面向对象中的多态 很相似

  /* Less */
      .triangle(top,@width:20px,@color:#000){
          border-color:transparent  transparent @color transparent ;
      }
      .triangle(right,@width:20px,@color:#000){
          border-color:transparent @color transparent  transparent ;
      }
    
      .triangle(bottom,@width:20px,@color:#000){
          border-color:@color transparent  transparent  transparent ;
      }
      .triangle(left,@width:20px,@color:#000){
          border-color:transparent  transparent  transparent @color;
      }
      .triangle(@_,@width:20px,@color:#000){
          border-style: solid;
          border-width: @width;
      }
      #main{
          .triangle(left, 50px, #999)
      }
      /* 生成的 CSS */
      #main{
        border-color:transparent  transparent  transparent #999;
        border-style: solid;
        border-width: 50px;
      }

要点

 - 第一个参数 `left` 要会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换。

  - 如果匹配的参数 是变量，则将会匹配，如 `@_` 。

得到返回变量的返回值

.public(@pd1;@pd2){
    @s:(@pd1+@pd2)
}

div{
    .public(10;10);
    padding:@s;    
}


//生成的css
div {
  padding: 20;
}

4.使用important:   相当于这个方法中的每一个属性都设置了一遍important，不允许覆盖

.border{
  border: solid 1px red;
  margin: 50px;
}
#main{
  .border() !important;  //border里面的每个属性都会被important
}
/* 生成后的 CSS */
#main {
  border: solid 1px red !important;
  margin: 50px !important;
}

5.继承属性：extend是less的一个伪类。它可以继承所匹配声明中的全部样式。

.mainBg{
  background: red;
  .fontSize{
    color: #fff;
  }
}
 
#main{
  background: green;
  width: 100px;
  height: 100px;
  &:extend(.mainBg);
}
#con{
  background:blue;
  width: 100px;
  height: 100px;
  &:extend(.mainBg .fontSize);
}
#wrap:extend(.mainBg all) {
  width: 100px;
  height: 100px;
  font-size: 30px;
}
//生成的css
.mainBg,
#main,
#wrap {
  background: red;
}
.mainBg .fontSize,
#con,
#wrap .fontSize {
  color: #fff;
}
#main {
  background: green;
  width: 100px;
  height: 100px;
}
#con {
  background: blue;
  width: 100px;
  height: 100px;
}
#wrap {
  width: 100px;
  height: 100px;
  font-size: 30px;
}

6.导入

在less文件中可以引入其他的less文件。使用关键字import。

   导入 less 文件 可省略后缀

import "main"; 
//等价于
import "main.less";

@import 的位置可随意放置

#main{
  font-size:15px;
}
@import "style";

 加reference属性，不会编译该引入文件，但是可以使用该文件的变量Less 中 最强大的特性
使用 引入的 Less 文件，但不会 编译它。

/* Less */
@import (reference) "bootstrap.less"; 

#wrap:extend(.navbar all){}

 

加once属性，表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。

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

加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;
}

7.避免编译

less里面有一个避免编译，有时候我们需要输出一些不正确的css语法或者使用less不认识的专有语法。要输出这样的值我们可以在字符串前加上一个~

这个calc，有时候我们是让浏览器计算，不是让less计算

.test_03{
　　width: 300px;
　　height: ~'calc(300px - 30px)';
}


//编译后
.test_03 {
　　width: 300px;
　　height: calc(300px - 30px);
}

8、注释  

/* */ CSS原生注释，会被编译在 CSS 文件中。

/   / Less提供的一种注释，不会被编译在 CSS 文件中

css仅支持块注释。less里块注释和行注释都可以使用：