關于Less的學習筆記

姘擱『發布于2019-08-30 15:52 / 1065人閱讀

摘要：簡介部分記錄是一門預處理語言，它擴充了語言，增加了諸如變量混合函數等功能，讓更易維護方便制作主題擴充，是一種動態樣式語言。運算可進行加減乘除的運算。

Less簡介部分記錄：

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

 /*   此種注釋會被編譯，即此句注釋會出現在編譯好的CSS文件中。 */   
 //   不會被編譯。

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

Less代碼學習部分記錄：

1、定義編碼方式：

@charset "utf-8";

2、普通的CSS代碼編寫：

body{
    background-color: cornsilk;
}

3、注釋的區別：

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

4、變量的聲明使用：

@test_width:320px;

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

5、混合：

（1）不帶參數的混合：

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

（2）帶參數的混合：

1）沒有默認值，一定要傳參：

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

2）帶默認值：

.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）舉例：畫一個三角形

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

/*用匹配模式畫三角形*/
.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;
}//向右的三角形

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

.triangle{    
//根據想得到的匹配格式畫三角形 
  .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、運算（加減乘除）：

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

GPU云服務器云服務器關于深度學習的學習關于機器學習的學習關于機器學習的視頻關于深度學習方面的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116459.html

PostCSS自學筆記（一）【安裝使用篇】

摘要：而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經等不及安裝使用了吧。安裝及使用一般是結合自動化工具使用，如果要單獨使用可以安裝，這里我先對的安裝使用講解下。接下來說點實際的，如何利用結合自動化工作在項目中使用。 PostCSS介紹 PostCSS是一個利用JS插件來對CSS進行轉換的工具，這些插件非常強大，強大到無所不能。其中，Autoprefixer就是眾多Post...

jsummer 2019-08-29 13:17 評論0 收藏0
vue學習筆記（五）

摘要：各模塊各司其職，提高開發效率。使用生成的項目目錄里，我們主要關注目錄。這個是我們之前提到的單頁面組件。這是項目的路由文件，存放項目中所有的路由。這里和我們之前所學沒什么不同，不過是涉及了不少的知識。一、vue模塊化開發所謂的模塊化開發是指將不同的部分封裝到不同的模塊中，不再將所有的組件、路由等寫在一個頁面中。各模塊各司其職，提高開發效率。使用vue-cli生成的項目目錄里，我們主...

shusen 2019-08-21 17:18 評論0 收藏0
vue學習筆記（五）

摘要：各模塊各司其職，提高開發效率。使用生成的項目目錄里，我們主要關注目錄。這個是我們之前提到的單頁面組件。這是項目的路由文件，存放項目中所有的路由。這里和我們之前所學沒什么不同，不過是涉及了不少的知識。一、vue模塊化開發所謂的模塊化開發是指將不同的部分封裝到不同的模塊中，不再將所有的組件、路由等寫在一個頁面中。各模塊各司其職，提高開發效率。使用vue-cli生成的項目目錄里，我們主...

paulquei 2019-08-01 17:52 評論0 收藏0
前端構建工具grunt學習筆記

使用grunt實時編譯less文件下圖是項目的文件組織 showImg(https://segmentfault.com/img/bVqbtg); 生成package.json文件，通過npm init命令。安裝你需要的Devdependencies/denpendencies。 npm install grunt --save-dev npm install load-grunt-ta...

zone 2019-08-21 10:42 評論0 收藏0
less學習筆記

摘要：方便了的編寫和維護。本文記錄了開發中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個帶單位嵌套嵌套是中非常有用高效的語法。學習學習學習在中如果我們需要對這一結構的樣式進行渲染，就會使用等選擇器。一、什么是less less是一種動態樣式語言，屬于css預處理語言的一種，它使用類似css的語法，為css賦予了動態語言的特性，如變量、運算、函數等。方便了css的編寫和維護。 le...

MkkHou 2019-08-02 15:58 評論0 收藏0