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

简单明了，直接上教程：

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

    属性
    嵌套
    混合方法
    继承
    导入
    函数
    其他

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

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路