关于CSS预处理器less的使用（未完待续）

短命女 2021-09-29 03:56 348阅读 0赞

简单明了，直接上教程：

下面我们先大体了解些我接下来讲的less的功能特性：

1.  属性
2.  嵌套
3.  混合方法
4.  继承
5.  导入
6.  函数
7.  其他

## 1、属性 ##

（1）、值变量

@dividerColor:#000;
    	
    div{ 
     	background: @dividerColor;
    }

（2）、选择器变量

@footer: .footer;
    
    @{ footer}{ 
    
    }

（3）、属性变量

@color:color;
    
    div{ 
     @{ color}:#000;
    }

（4）、url 变量

@images:'../images' ;
     
     div{ 
        background:url('@{images}/img.png');
    }

(5)、声明变量

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

@background: { background:red;}; #main{ 
         @background();
    }

(6)、变量运算

@width:300px;
    @color:#222;
    div{ 
     width:@width-20;
     height:@width-20*5;
     margin:(@width-20)*5;
     color:@color*2;
     background-color:@color + #111;
    }

(7) 、变量作用域

就近原则

@var: @a;
     @a: 100%;
     #wrap { 
            width: @var;
            @a: 9%;
     }

(8) 、用变量去定义变量

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

## 嵌套 ##

（1）、& 的妙用

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

.big{ 
       .small{ 
    	&:after{ 
    	color:red;
    }
    	&_small{ 
    	color:green;
    	}
    }
    }

(2) 媒体查询

div{ 
    @media scress{ 
      @media (max-width:768px){ 
    width:100px;
    }
    @media tv{ 
    width:200px;
    }
    }
    
    
    }

唯一的缺点就是 每一个元素都会编译出自己 @media 声明，并不会合并。

## 混合方法 ##

(1)、无参数方法

.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();
          }

(2)、默认参数方法

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

（3）、方法中的匹配模式

#main{ 
    .csser(left,50px,#999);
    }
    .csser(top，@width:20px,@color:#000){ 
    border-color:transparent transparent @color transparent;
    }

(4) 、方法的命名空间

#card(){ 
              background: #723232;
              .d(@w:300px){ 
                  width: @w;
                  
                  #a(@h:300px){ 
                      height: @h;//可以使用上一层传进来的方法
                      width: @w;
                  }
              }
          }
          #wrap{ 
              #card > .d > #a(100px); // 父元素不能加 括号
          }
          #main{ 
              #card .d();
          }
          #con{ 
              //不得单独使用命名空间的方法
              //.d() 如果前面没有引入命名空间 #card ，将会报错
              
              #card; // 等价于 #card();
              .d(20px); //必须先引入 #card
          }

*  在 CSS 中`>` 选择器，选择的是 儿子元素，就是 必须与父元素 有直接血源的元素。
 *  在引入命令空间时，如使用 `>` 选择器，父元素不能加 括号。
 *  不得单独使用命名空间的方法 必须先引入命名空间，才能使用 其中方法。
 *  子方法 可以使用上一层传进来的方法  
    (5)、方法的条件筛选

#card{ 
            
            // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
            .border(@width,@color,@style) when (@width>100px) and(@color=#999){ 
                border:@style @color @width;
            }
        
            // not 运算符，相当于 非运算 !，条件为 不符合才会执行
            .background(@color) when not (@color>=#222){ 
                background:@color;
            }
        
            // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
            .font(@size:20px) when (@size>50px) , (@size<100px){ 
                font-size: @size;
            }
        }
        #main{ 
            #card>.border(200px,#999,solid);
            #card .background(#111);
            #card > .font(40px);
        }

*  比较运算有： > >= = =< <。
 *  = 代表的是等于
 *  除去关键字 true 以外的值都被视为 false：

(6)、数量不定的参数

.boxShadow(...){ 
              box-shadow: @arguments;
        }
       .textShadow(@a,...){ 
              text-shadow: @arguments;
          }
       #main{ 
              .boxShadow(1px,4px,30px,red);
              .textShadow(1px,4px,30px,red);
          }

(7)、方法使用important！

.border{
              border: solid 1px red;
              margin: 50px;
          }
          #main{
              .border() !important;
          }