看完我的笔记不懂也会懂----less

目录

• Less学习
  • 语法篇
    • 注释
    • 变量
    • 映射(Maps)
    • @规则嵌套和冒泡
    • less中的嵌套规则
    • less中的混合
    • less的运算
    • extend延伸/继承
    • less忽略编译(转义)
    • 导入（Import）

Less学习

语法篇

注释

1. //注释
   这样的注释内容不会被编译到CSS文件中
   

2. /*注释*/
   这样的注释内容会被编译到CSS文件中
   

变量

1. 定义变量使用@开头
2. 当定义变量用作CSS值: 直接@变量名
3. 当定义变量用作CSS属性名、选择器或编译前进行运算: 需要使用语法: @{变量名}
4. 变量的延迟加载 :less中每个{}都是一个作用域，变量会先在自己的作用域中查找进而向上(作用域链)

@我是less变量;
@w: width;
@h: height;
@wl: 100px;
@selector: #box1;
@result: ~"fuck-@{wl}";

@{selector}{
    @{w}: @wl;
    @{height}: @result;     //height: fuck-100px;
}
/* 上述写法等价于CSS */
#box1{
    width: 100px;
    height: fuck-100px;
}

/* 变量延迟加载示例代码 */
@var: 123;
.box1{
    @var: 222;      //此时@var = 222
    .paper{
        @var: 666;  //此时@var = 666
        three: @var;    /*此时@var=3;  参考JS中的变量提升*/
        @var: 3;
    }
    .news{
        two: @var;    /*此时@var=222;  去上级作用域中找(非同级) 参考JS中的作用域链*/
    }
}

映射(Maps)

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

//编译为
.button {
  color: blue;
  border: 1px solid green;
}

@规则嵌套和冒泡

冒泡: @ 规则(例如 @media 或 @supports)可以向后代选择器一样进行嵌套，但是@规则会被放在最前面。

.test{
  width: 100px;
  @media (min-width: 1200px){
	width: 500px;
	@media (max-width: 1500px){
	width: 1000px;
  	}
  }
  @media (min-width: 768px){
	width: 666px;
  }
}

/*  以上less会被解析成CSS如下 */
.test{
  width: 100px;
}

// 第一个@冒泡
@media (min-width: 1200px){
  .test{
	width: 500px;
  }
}
// 第二个@冒泡
@media (min-width: 1200px) and (max-width: 1500px){
  .test{
	width: 1000px;
  }
}
// 第三个@冒泡
@media (min-width: 768px){
  .test{
	width: 666px;
  }
}

less中的嵌套规则

1. 后代关系

   #father{.son{}}
   ``` less
   #father{
       .son{
           color: red;
       }
   }
   
   /*以上等同于CSS*/
   #father .son{
       color: red;
   }
   

2. 伪元素、伪类

   #box1{&:hover{}}
   ``` less
   #box1{
       &:hover{
           color: red;
       }
   }
   
   /*以上等同于CSS*/
   #box1:hover{
       color: red;
   }
   

less中的混合

混合就是将一套规则运用到另一个选择器中

1. 普通混合

   /*混合规则*/
   .mix{    //这个less混合(样式)会作为类出现在CSS中
       width: 100px;
       height: 100px;
       background: #bfa;
   }
   
   .box1{
       .mix;
   }
   
   .box2{
       .mix;
   }
   

2. 不带参数混合(命名空间和访问符)

   /*混合规则*/
   .mix(){    //这个less混合(样式)不会出现在CSS中
       width: 100px;
       height: 100px;
       background: #bfa;
   }
   
   .box1{
       .mix;
   }
   
   .box2{
       .mix;
   }
   

   命名空间和访问符

   #funSet(){
       width: 100px;
       height: 100px;
       border: 1px solid black;
   
       .fun1(){        //这个less混合(样式)不会出现在CSS中
           box-sizing: border-box;
           &:hover{
           background-color: red;
           }
       }
   
       .fun2(){        //这个less混合(样式)不会出现在CSS中
           display: block;
       }
   }
   
   .use{
   #funSet();
   #funSet.fun2();     //相当于调用fun2这个函数
   }
   
   //编译后结果
   .use{
       width: 100px;
       height: 100px;
       border: 1px solid black;
       display: block;
   }
   

3. 带参数混合

   /*混合规则*/
   .mix(@w){    //这个less混合(样式)不会出现在CSS中
       width: @w;
       height: 100px;
       background: yellowgreen;
   }
   
   .box1{
       .mix(100px);
   }
   
   .box2{
       .mix(100px);
   }
   

4. 带多个参数混合

   @w: 100px;
   @h: 200px;
   @color: greenyellow;
   /*混合规则*/
   .mix(@w,@h,@color){    //这个less混合(样式)不会出现在CSS中
       width: @w;
       height: @h;
       background: @color;
   }
   
   .box1{
       .mix(100px,200px,blue);
   }
   
   .box2{
       .mix(100px,200px,blue);
   }
   

5. 参数带默认值混合

   /*混合规则*/
   .mix(@w:20px){    //这个less混合(样式)不会出现在CSS中
       width: @w;
       height: 200px;
       background: greenyellow;
   }
   
   .box1{
       .mix(100px);    //修改  @w(width)  默认值
   }
   
   .box2{
       .mix();    //不会报错,因为有默认值
   }
   

6. 多个参数带默认值混合

   /*混合规则*/
   .mix(@w:20px,@h:20px,@color:#bfa){    //这个less混合(样式)不会出现在CSS中
       width: @w;
       height: @h;
       background: @color;
   }
   
   .box1{
       .mix(100px,200px,blue);    //修改默认值
   }
   
   .box2{
       .mix();    //不会报错,因为有默认值
   }
   
   .box3{
       .mix(100px);    //修改的是width,即第一个参数
   }
   
   .box4{
       .mix(red);    //报错  变量是顺序传入的(关键字参数可以解决)
   }
   

7. 关键字参数

   /*混合规则*/
   .mix(@w:20px,@h:20px,@color:#bfa){    //这个less混合(样式)不会出现在CSS中
       width: @w;
       height: @h;
       background: @color;
   }
   
   .box1{
       .mix(100px,200px,blue);
   }
   
   .box2{
       .mix();    //不会报错
   }
   
   .box3{
       .mix(@color: pink);    //使用关键字不会报错
   }
   

8. 匹配模式

   @w:20px;
   @h:20px;
   /*共有规则*/
   .public(){    //这个less混合(样式)不会出现在CSS中
       width: @w;
       height: @h;
   }
   
   .box1(id,@color:pink){ //id是匹配模式的特点，相当于标识符
       .public();
       background: @color;
   }
   
   .box1(id2,@color:blue){ //id2是匹配模式的特点，相当于标识符
       .public();
       background: @color;
   }
   
   // ===== 匹配模式类似于多态(示例是box1的两种形态) =====
   
   //创建一个蓝色的正方形
   .square{
       .box1(id2)   //id2是匹配模式的特点，相当于标识符
   }
   //上述less代码等同于CSS如下:
   .square {
       width: 20px;
       height: 20px;
       background: blue;
   }
   

9. 匹配模式(改进)
   
   改进:让混合调用时不需要再调用共有规则[ .public() ]

   @w:20px;
   @h:20px;
   /*共有规则*/
   .box1(@_,@color){    //使用同样名称但是形参写上@_,var1,var2
       width: @w;
       height: @h;
   }
   
   .box1(id,@color:pink){ //id是匹配模式的特点，相当于标识符
       //.box1();        //调用时自动加上5-6行代码
       background: @color;
   }
   
   .box1(id2,@color:blue){ //id2是匹配模式的特点，相当于标识符
       background: @color;
   }
   
   // ===== 匹配模式类似于多态(示例是box1的两种形态) =====
   
   //创建一个蓝色的正方形
   .square{
       .box1(id2)   //id2是匹配模式的特点，相当于标识符
   }
   //创建一个黑色的正方形
   .square2{
       .box1(id,black)   //id2是匹配模式的特点，相当于标识符
   }
   //上述less代码等同于CSS如下:
   .square {
       width: 20px;
       height: 20px;
       background: blue;
   }
   
   .square2 {
       width: 20px;
       height: 20px;
       background: black;
   }
   

10. @arguments变量

>  类似于JS中的参数伪数组

    /*共有规则*/
    .box1(@1,@2,@3){
        border: @arguments;
    }

    .myClass{
        .box1(1px,solid,black);
    }
    //上述less代码等同于CSS如下:
    .myClass{
        border: 1px solid black;
    }

less的运算

less的四则运算( 加减乘除 )可以对 任何的数字、颜色、变量进行运算，

1. 单位以最左侧的单位类型为准

.test{
  width: 10em + 2px;
}

//编译结果
.test{
    width: 12em;
}

1. 如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换

.test{
  width: 10em + 2px;
}

//编译结果
.test{
    width: 2 + 5px - 3cm; // 结果是 2+5-3 = 4  最左边单位是 px;
}

.box1{
    width: (100px + 100px);    //width: 200px;
}

//  可以只有一边带单位
.box1{
    width: (100px + 100);    //width: 200px;
    height: (50 + 50px);    //height: 100px;
}

extend延伸/继承

.beExtended{                //用于被外挂功能的CSS样式
  box-sizing: border-box;
}

.box1{
   &:extend(.beExtended all);  //加上all会将包括伪类在内一起继承
   width: 100px;
   height: 100px;
   background: pink;

   .box2{
	 font-size: 16px;
     background: #bfa;

	 &:hover{
	   width: 200px;
	   height: 200px;
	   background-color: yellow;
     }
   }
 }

 //  上述less等同于CSS如下:
 .beExtended,
.box1 {
  box-sizing: border-box;
}

.box1 {
  width: 100px;
  height: 100px;
  background: pink;
}
.box1 .box2 {
  font-size: 16px;
  background: #bfa;
}
.box1 .box2:hover {
  width: 200px;
  height: 200px;
  background-color: yellow;
}

less忽略编译(转义)

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

.box1{
    width: (100px + 100px);    //该语句会通过less预编译
    height: ~"calc(100px + 10px)";  //该语句less不会预编译(原封不动)
}

导入（Import）

相当于将 被引用 的文件 复制 一份放入 引用 文件中

@import "library"; // less文件可以省略后缀
@import "myStyleSheet.css";