less學(xué)習(xí)筆記

MkkHou 發(fā)布于2019-08-02 15:58 / 1073人閱讀

摘要：方便了的編寫和維護(hù)。本文記錄了開發(fā)中最常用的幾種語法。這里的單位可以省略，但是兩者必須有一個(gè)帶單位嵌套嵌套是中非常有用高效的語法。學(xué)習(xí)學(xué)習(xí)學(xué)習(xí)在中如果我們需要對(duì)這一結(jié)構(gòu)的樣式進(jìn)行渲染，就會(huì)使用等選擇器。

一、什么是less

less是一種動(dòng)態(tài)樣式語言，屬于css預(yù)處理語言的一種，它使用類似css的語法，為css賦予了動(dòng)態(tài)語言的特性，如變量、運(yùn)算、函數(shù)等。方便了css的編寫和維護(hù)。

less可以在多種語言、環(huán)境中使用，包括瀏覽器端、桌面客戶端、服務(wù)端。

本文記錄了開發(fā)中最常用的幾種less語法。

二、編譯工具

瀏覽器并不認(rèn)識(shí)less格式文件，我們需要使用編譯工具將less文件編譯成css文件，可以選擇kaola這個(gè)工具編譯。這個(gè)工具使用也十分簡單，將less文件的目錄拖入，然后設(shè)置輸出路徑。然后每次只要保存less文件就可實(shí)現(xiàn)編譯。

如果使用其他開發(fā)工具也可以，比如使用VSCode的話就可以安裝less插件easy less實(shí)現(xiàn)保存自動(dòng)編譯。因?yàn)槲沂褂玫木褪荲SCode編輯器，所以我使用了這個(gè)插件做編譯處理。

基本使用
首先新建目錄

 --images
--style
  -- main.less
index.html

編寫index.html文件



 
  
  less編譯工具使用
   //在這里引入的是編譯后的css文件

編寫mian.less文件:

@charset "utf-8";

#main {
    width: 100px;
    height: 100px;
    background-color: red;
}

保存編譯后，在style目錄下就會(huì)出現(xiàn)main.css文件，這是編譯后的文件，我們可以直接使用。

三、less語法 1、注釋

less中有兩種注釋：/**/和//。

使用/**/的注釋是會(huì)被編譯進(jìn)css文件的，而使用//的注釋不會(huì)被編譯進(jìn)css文件。

//main.less
@charset "utf-8";

/*我會(huì)被編譯進(jìn)css文件*/

//我不會(huì)被編譯進(jìn)css文件

//執(zhí)行編譯后的main.css
@charset "utf-8";

/*我會(huì)被編譯進(jìn)css文件*/

由于我們應(yīng)該一般編寫和維護(hù)less文件，所以我們一般采用第二種注釋，無需將注釋編譯進(jìn)css文件。

2、變量

less中使用@聲明一個(gè)變量，和一般程序語言不同的是，@符號(hào)與變量之間不能有空格，比如我們要聲明一個(gè)myWidth這個(gè)變量：@myWidth。變量的賦值類似鍵值對(duì)：@myWidth : 200px;

變量的使用：

//less文件
@charset "utf-8";

@myWidth : 200px;
@myHeight : 500px;

#main {
    width: @myWidth;
    height: @myHeight;
    background-color: yellowgreen;
}

3、混合

混合的意思是說可以將less寫法與常規(guī)的css寫法進(jìn)行混合書寫。

css中為某個(gè)元素添加樣式，首先需要為其添加類名，使用混合則很方便

//less文件
@charset "utf-8";

@myWidth : 200px;
@myHeight : 200px;

#main {
    width: @myWidth;
    height: @myHeight;
    background-color: yellowgreen;
    .border
}

.border {  
    border:3px solid pink
}

在css中我們需要將.border這個(gè)類添加到元素的class屬性中才能生效。但是在less中，只要將.border加入#main中就可以實(shí)現(xiàn)效果。

//編譯后的css
@charset "utf-8";
#main {
  width: 200px;
  height: 500px;
  background-color: yellowgreen;
  border: 3px solid green;
}
.border {
  border: 3px solid green;
}

混合也可以帶參數(shù)

//less
.border(@mywidth){
    border: @mywidth solid green;
}

.mybox {
    .border(5px);
}

//css
.mybox {
  border: 5px solid green;
}

參數(shù)也可以設(shè)置一個(gè)默認(rèn)值：

//less
.border(@mywidth:4px){
    border: @mywidth solid green;
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}

4、匹配模式

根據(jù)不同的參數(shù)可以匹配不同的樣式：

.pos(r) {
    position:relative;
}

.pos(a) {
    position:absolute;
}

.pos(f) {
    position:fixed;
}

.pipei {
    width:200px;
    height:200px;
    background-color:green;
    .pos(f);     //.pos(r)   .pos(a) 傳入不同的參數(shù)，實(shí)現(xiàn)不同的定位方式
}

5、運(yùn)算

less中可以實(shí)現(xiàn)運(yùn)算，任何數(shù)字、顏色或者變量都可以參與運(yùn)算（+ - * /），運(yùn)算應(yīng)該被包裹在括號(hào)中。

//less
.border(@mywidth:4px){
    border: @mywidth + 5px solid green;    //這里的單位可以省略，但是兩者必須有一個(gè)帶單位
}

.mybox {
    .border();
}

//css
.mybox {
  border: 4px solid green;
}

6、嵌套

嵌套是less中非常有用、高效的語法。

//html

    less學(xué)習(xí)2017-11-26
    less學(xué)習(xí)2017-11-26
    less學(xué)習(xí)2017-11-26

在css中如果我們需要對(duì)這一html結(jié)構(gòu)的樣式進(jìn)行渲染，就會(huì)使用#list、#list li、#list li a、#list li span等選擇器。在less中我們有了更簡潔的寫法：

//less
#list {
    width: 600px;
    margin: 30px auto;
    list-style: none;
    padding: 0;

    li {
        height: 30px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;

        a {
            float: left;
        }

        span {
            float: right;
        }
    }
}

//css
#list {
  width: 600px;
  margin: 30px auto;
  list-style: none;
  padding: 0;
}
#list li {
  height: 30px;
  line-height: 30px;
  background-color: pink;
  margin-bottom: 5px;
}
#list li a {
  float: left;
}
#list li span {
  float: right;
}

在less中使用偽類選擇器也十分方便：

//less
#list li a {
  float: left;
  &:hover {
    font-size:20px;
  }
}

//css
#list li a:hover {
  font-size: 18px;
}

7、arguments參數(shù)

有時(shí)候我們不想單個(gè)操作參數(shù)，可以使用@argemunts操作參數(shù)。

//less
.border_arg(@w:30px,@c:red,@xx:solid){
    border:@arguments;
}

.test_arguments{
    .border_arg();
}

//css
.test_arguments {
  border: 30px red solid;
}

8、避免編譯

有時(shí)候我們需要輸出一些不正確的css語法或者使用一些less不認(rèn)識(shí)的專有語法，要輸出這樣的值我們需要使用~""將語法包裹起來，語法放在雙引號(hào)或者單引號(hào)中間。從而實(shí)現(xiàn)不讓less編譯該段代碼：

//less
width:~"calc(100%-35)"

//css
width: calc(100%-35);

GPU云服務(wù)器云服務(wù)器學(xué)習(xí)筆記學(xué)習(xí)筆記一基礎(chǔ)學(xué)習(xí)筆記深度學(xué)習(xí)筆記

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

MkkHou

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

BREW 應(yīng)用中的3維圖像技術(shù)

閱讀 3355·2021-11-22 14:44
云控后臺(tái)系統(tǒng) 經(jīng)驗(yàn)總結(jié)（表單和文件上傳等）

閱讀 2567·2019-08-30 14:10
淺談 CSS Sprites 雪碧圖應(yīng)用

閱讀 2638·2019-08-30 13:12
大廠h5開源視頻系列-網(wǎng)易云音樂年度總結(jié)

閱讀 1241·2019-08-29 18:36
jQuery動(dòng)畫效果、jQuery插件使用

閱讀 1371·2019-08-29 16:16
什么時(shí)候不使用箭頭函數(shù)

閱讀 3357·2019-08-26 10:33
如何從零開始定義一個(gè)類似websocket的即時(shí)通訊協(xié)議

閱讀 1793·2019-08-23 18:16
create-react-app 源碼學(xué)習(xí)（上）

閱讀 401·2019-08-23 18:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

less學(xué)習(xí)筆記

相關(guān)文章

前端構(gòu)建工具grunt學(xué)習(xí)筆記