關(guān)于CSS預(yù)處理器less的使用（未完待續(xù)）

簡單明了，直接上教程：

下面我們先大體了解些我接下來講的less的功能特性：

    屬性
    嵌套
    混合方法
    繼承
    導(dǎo)入
    函數(shù)
    其他

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)、聲明變量

結(jié)構(gòu): @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)、無參數(shù)方法

.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)、默認(rèn)參數(shù)方法

 .border(@a:10px,@b:50px,@c:30px,@color:#000){
          border:solid 1px @color;
          box-shadow: @arguments;//指代的是 全部參數(shù)
      }
      #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 運算符 ，相當(dāng)于 與運算 &&，必須條件全部符合才會執(zhí)行
        .border(@width,@color,@style) when (@width>100px) and(@color=#999){
            border:@style @color @width;
        }
    
        // not 運算符，相當(dāng)于 非運算 !，條件為 不符合才會執(zhí)行
        .background(@color) when not (@color>=#222){
            background:@color;
        }
    
        // , 逗號分隔符：相當(dāng)于 或運算 ||，只要有一個符合條件就會執(zhí)行
        .font(@size:20px) when (@size>50px) , (@size<100px){
            font-size: @size;
        }
    }
    #main{
        #card>.border(200px,#999,solid);
        #card .background(#111);
        #card > .font(40px);
    }


    比較運算有： > >= = =< <。
    = 代表的是等于
    除去關(guān)鍵字 true 以外的值都被視為 false：

(6)、數(shù)量不定的參數(shù)

       .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的金豆之路

主要領(lǐng)域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路