less學習

less是什麼

css裏邊的jquery 可使用多種編譯環境將less轉換爲css 我是用的是node安裝less 文件.less
write less do more
依程序員的角度去編寫css
css3的出現 css 兼容性寫法使用less更容易 -webkit- -moz- -o-等使用less的混合寫法更加方便

less中的變量

@name:value
在使用的時候 height:@name

less中的類混合

在沒有less以前 想讓一個div有兩個類獲得效果 只能是給這個div加兩個類 從而達到兩個類的效果混合
可是有了less以後 再也不須要兩個類 只須要在less中將須要混合的類放在一塊兒
less

.bg{
    height: @test_width;background: red;.border;
}
.border{
    border: 10px solid #0D3349;
}

生成的css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

有了這個功能 就能實現就可以實現將許多類的公共代碼抽取出來 再使用混合爲每個類加入這部分公共的代碼

less中可帶參數的混合

爲待混合的部分增長參數 這樣在其餘類調用的時候更加靈活
less

.bg{
    height: @test_width;background: red;.border(11px);
}
.border(@border_width){
    border: @border_width solid #0D3349;
}

生成的css代碼

.bg {
  height: 300px;
  background: red;
  border: 11px solid #0D3349;
}

爲這個參數指定默認值
less 爲@border_width指定默認值10px

.bg{
    height: @test_width;background: red;.border();
}
.border(@border_width:10px){
    border: @border_width solid #0D3349;
}

值得注意的是.bg只是一個定義的過程 在.border裏邊調用才能夠生成css
這樣在調用這個混合的時候即便沒有參數的時候也不會報錯 生成的css以下
css

.bg {
  height: 300px;
  background: red;
  border: 10px solid #0D3349;
}

less中的匹配模式

至關於js中的if 但不徹底是
less沒有出現以前 在頁面上寫一個三角形的方法

.sanjiao{
  width: 0;height: 0;overflow: hidden;
  border-width:10px ;
  border-color: transparent transparent red transparent;
   border-style: dashed dashed solid dashed;
  //dashed  是爲了兼容ie6
}

使用了less的匹配模式來實現

.tringle(top,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:dashed dashed solid dashed ;
}
.tringle(bottom,@w:10px,@c:red){
  border-width:@w;
  border-color: @c;
  border-style:solid dashed dashed  dashed ;
}
.tringle(@_,@w:10px,@c:red){   //無論會執行那個tringle都會執行這一個  並且後邊的這兩個參數必須攜帶
    width: 0;height: 0;overflow: hidden;
}
.sanjiao_shang{
   .tringle(top)
}
.sanjiao_xia{
  .tringle(bottom)
}

生成的css

.sanjiao_shang {
  border-width: 10px;
  border-color: red;
  border-style: dashed dashed solid dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao_xia {
  border-width: 10px;
  border-color: red;
  border-style: solid dashed dashed  dashed ;
  width: 0;
  height: 0;
  overflow: hidden;
}

less中能夠對變量進行預算 只要這個變量帶着單位 運算的時候是須要運算整數 不須要管單位 同時顏色也能夠進行運算

less中的嵌套規則

可是在css中儘可能的少去嵌套 增長web性能
less

.list{
  width: 600px;margin: 30px auto;
  padding:0;
  li{
    height: 30px;
  }
  a{
    &:hover{           //&表明的就是上一層選擇器
      color: #6ba82f;
    }
  }
}

生成的css

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
}
.list li {
  height: 30px;
}
.list a:hover {
  color: #6ba82f;
}

less中的@arguments

less代碼

.test(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.tt1{
  .test()
}

將會生成的css代碼

.tt1 {
  border: 30px red solid;
}