less 學習筆記

1 什麼是less

LESS 包含一套自定義的語法及一個解析器，用戶根據這些語法定義本身的樣式規則，這些規則最終會經過解析器，編譯生成對應的 CSS 文件。LESS 並無裁剪 CSS 原有的特性，更不是用來取代 CSS 的，而是在現有 CSS 語法的基礎上，爲 CSS 加入程序式語言的特性,less 編譯工具koala.exe

2 less語法

less中有不少的語法規則，但我的以爲less中比較經常使用的也是最重要的就下面幾個：

變量、混合規則（mixin）、模式匹配、嵌套，& 指代上一層的選擇器

不經常使用的：arguments 避免編譯 ！important

1. 先來看下變量的簡單用法，less中有變量運算，(參與運算任何一個參數帶有單位便可)

//less 重點
//變量
//mixin 混合
//模式匹配
//嵌套規則

@test-width:100px;
@test-size:12px;
.wrap{
    color: red;
    width:(@test-width*3);
    font-size: @test-size*12;
    height: @test-width+12;
}

編譯產出物，就是css啦

.wrap {
  color: red;
  width: 300px;
  font-size: 144px;
  height: 112px;
}

2. 混合規則（mixin）,至關於定義一個類，在別的類中直接包含進來，看下具體狀況吧

@test-width:100px;
@test-size:12px;
.wrap{
    color: red;
    width:(@test-width*3);
    font-size: @test-size*12;
    height: @test-width+12;
    /*下面是mixin進來的default-border的樣式*/
    .default-border;
}

.default-border{
    border: solid 1px red;
    box-shadow: 0px 0px;
}

對應的css編譯結果爲==>

.default-borde會出如今css中，若是是定義成

.default-border(@varName){...}這個不會出如今產出物css中，定義的產出物只會出如今mixin中,看下面的代碼-2

.wrap {
  color: red;
  width: 300px;
  font-size: 144px;
  height: 112px;
  /*下面是mixin進來的default-border的樣式*/
  border: solid 1px red;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
}
.default-border {
  border: solid 1px red;
  -webkit-box-shadow: 0px 0px;
  box-shadow: 0px 0px;
}

代碼2-

 1 .border01(@b1){
 2     border: solid @b1*10 red;
 3 }
 4 
 5 .width-1(@w1:100px;){
 6     font-size:@w1;
 7     border-radius: @w1 - 14;
 8 }
 9 
10 .test{
11     .border01(3);
12     .width-1();
13 }

View Code

產出物代碼2-

1 .test {
2   border: solid 30 #ff0000;
3   font-size: 100px;
4   border-radius: 86px;
5 }

View Code

 

3.模式匹配

預先定義一系列的類，這些都會有不一樣的參數，不一樣的參數其內部的樣式是不一樣的，mixin的時候根據傳入的參數不一樣而自動匹配到不一樣的類

例如：四個不一樣方向的箭頭

 1 //direction bottom: 
 2 .tg(bottom){
 3     border-width: @test-width - 70;
 4     border-color: red transparent transparent  transparent ;
 5     border-style: solid dashed dashed dashed ; 
 6 }
 7 //direction right: 
 8 .tg(right){
 9     border-width: @test-width - 70;
10     border-color:  transparent transparent  transparent red ;
11     border-style:  dashed dashed dashed  solid; 
12 }
13 //direction left: 
14 .tg(left){
15     border-width: @test-width - 70;
16     border-color:  transparent red transparent  transparent  ;
17     border-style:  dashed solid dashed dashed  ; 
18 }
19 //無論匹配到哪個，這個必定會匹配到的，@_必須這種寫法，全部的參數必須保持一致
20 .tg(@_){
21     width: 0;
22     height: 0;
23     overflow: hidden;
24 }
25 
26 .sj{
27     .tg(bottom);
28 }

 

對應產出物==> 全部.tg不出出如今css中,只有.sj會出如今css中

1 .sj {
//這就是想下的箭頭
2   border-width: 30px;
3   border-color: red transparent transparent  transparent ;
4   border-style: solid dashed dashed dashed ;
5   width: 0;
6   height: 0;
7   overflow: hidden;
8 }

 

3.嵌套規則和 &

 1 .list{
 2     margin: 0;
 3     padding: 0;
 4     list-style:none;
 5     li{
 6         width: 100px;
 7         height: 50px;
 8     }
 9     a{
10         float: left;
11         border:solid 1px red;
12         //&表明他的上一層選擇器符號
13         &:hover{
14             background: red;
15         }
16     }
17 }

產出物==>

 1 .list {
 2   margin: 0;
 3   padding: 0;
 4   list-style: none;
 5 }
 6 .list li {
 7   width: 100px;
 8   height: 50px;
 9 }
10 .list a {
11   float: left;
12   border: solid 1px red;
13 }
14 .list a:hover {
15   background: red;
16 }

4. 其餘不重要的

arguments

.t-arguments(@style:solid,@width:1px,@color:#ffddff){
    border: @arguments;
}
.test-arguments{
    .t-arguments(dashed,5px);
}

output==>

.test-arguments {
  border: dashed 5px #ffddff;
}

避免編譯

1 /*koala 會吧210px-20px編譯，這不是咱們想要的，calc是css3的屬性，應交給瀏覽器編譯*/
2 .t-comile{
3     width:calc(210px-20px);
4 }
5 /*避免編譯*/
6 .t-cancel-compile{
7     width: ~'calc(210px-20px)';
8 }

output==>

1 /*koala 會吧210px-20px編譯，這不是咱們想要的，calc是css3的屬性，應交給瀏覽器編譯*/
2 .t-comile {
3   width: calc(190px);
4 }
5 /*避免編譯*/
6 .t-cancel-compile {
7   width: calc(210px-20px);
8 }

!important,會把全部的mixin進來的全部的屬性都後綴加上！important

.t-important(@width:200px,@height:200px){
    width: @width;
    height: @height;
}
.test-important{
    .t-important() !important;
}

 

output==>

.test-important {
  width: 200px !important;
  height: 200px !important;
}