關(guān)于Less的學(xué)習(xí)筆記

姘擱『發(fā)布于2019-08-30 15:52 / 1083人閱讀

摘要：簡(jiǎn)介部分記錄是一門預(yù)處理語(yǔ)言，它擴(kuò)充了語(yǔ)言，增加了諸如變量混合函數(shù)等功能，讓更易維護(hù)方便制作主題擴(kuò)充，是一種動(dòng)態(tài)樣式語(yǔ)言。運(yùn)算可進(jìn)行加減乘除的運(yùn)算。

Less簡(jiǎn)介部分記錄：

1、 Less是一門CSS預(yù)處理語(yǔ)言，它擴(kuò)充了CSS語(yǔ)言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓CSS更易維護(hù)、方便制作主題、擴(kuò)充，是一種動(dòng)態(tài)樣式語(yǔ)言。
2、編譯工具：Koala。
3、注釋（兩種方式）：

 /*   此種注釋會(huì)被編譯，即此句注釋會(huì)出現(xiàn)在編譯好的CSS文件中。 */   
 //   不會(huì)被編譯。

4、變量：
聲明變量：@變量名:值;
5、混合使用：可帶參數(shù)，也可不帶參數(shù)。
好處：CSS3兼容性使用，修改方便。
6、匹配模式：滿足條件后才匹配。
7、運(yùn)算：可進(jìn)行加減乘除的運(yùn)算。

Less代碼學(xué)習(xí)部分記錄：

1、定義編碼方式：

@charset "utf-8";

2、普通的CSS代碼編寫：

body{
    background-color: cornsilk;
}

3、注釋的區(qū)別：

/* Can see */
// Can"t see

4、變量的聲明使用：

@test_width:320px;

.box{
    width: @test_width;
    height: @test_width;
    background-color: #FF7F50;
}

5、混合：

（1）不帶參數(shù)的混合：

.border{
    border: 10px solid #5F9EA0;
}
.box{
  .border;
}

（2）帶參數(shù)的混合：

1）沒(méi)有默認(rèn)值，一定要傳參：

.border_02(@border_width){
    border: @border_width solid firebrick;
}
.test_mix{
    .border_02(30px);
}
.box{
  .test_mix;
}

2）帶默認(rèn)值：

.border_03(@border_width:20px){
    border: @border_width solid lightgreen;
}
.test_mix_03{ 
    .border_03();//可以不傳參
    .border_03(50px);//可以傳參
}
.box{
    .test_mix_03;
}

6、CSS3兼容性使用舉例：

.border_radius(@radius:8px){
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
.radius_test{
    width: 200px;
    height: 120px;
    background-color: darksalmon;
    margin-top: 20px;
    .border_radius();
}

7、匹配模式：

（1）舉例：畫一個(gè)三角形

/*畫一個(gè)三角形的原始方法*/
.triangle{
  width: 0;
  height: 0;
  margin-top: 10px;
  border-width: 60px;
  border-color: transparent transparent mediumvioletred transparent;
  border-style: dashed dashed solid dashed;//解決IE6有黑色邊框問(wèn)題
}

/*用匹配模式畫三角形*/
.triangle_test(top,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: dashed dashed solid dashed;
}//向上的三角形
.triangle_test(bottom,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}//向下的三角形
.triangle_test(left,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent @c transparent transparent ;
    border-style: dashed solid dashed dashed;
}//向左的三角形
.triangle_test(right,@w:60px,@c:mediumvioletred){
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}//向右的三角形

//@_：代表始終帶著這個(gè)函數(shù)運(yùn)行
.triangle_test(@_,@w:60px,@c:mediumvioletred){
    width: 0;
    height: 0;
    margin-top: 25px;
}

.triangle{    
//根據(jù)想得到的匹配格式畫三角形 
  .triangle_test(top);
  .triangle_test(bottom);
  .triangle_test(left);
  .triangle_test(right);
//非匹配格式則css代碼中只生成@_部分的代碼
  .triangle_test(aaa);
}

（2）舉例：定位的使用

.pos(r){
    position: relative;
}
.pos(ab){
    position: absolute;
}
.pos(f){
    position: fixed;
}
.test{
    width: 120px;
    height: 120px;
    margin-top: 20px;
    background-color: gold;
    .pos(r);
    .pos(ab);
    .pos(f);
}

8、運(yùn)算（加減乘除）：

@test_01: 300px;
.box_02{
    width: @test_01 + 80;
    height: @test_01;
    margin-top: 20px;
    background-color: deepskyblue;
}

云服務(wù)器 GPU云服務(wù)器關(guān)于深度學(xué)習(xí)的學(xué)習(xí) 關(guān)于機(jī)器學(xué)習(xí)的學(xué)習(xí) 關(guān)于機(jī)器學(xué)習(xí)的視頻關(guān)于深度學(xué)習(xí)方面的問(wèn)題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116459.html