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

codercao 發(fā)布于2019-08-29 13:53 / 3160人閱讀

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

一、什么是less

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

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

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

二、編譯工具

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

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

基本使用
首先新建目錄

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

編寫(xiě)index.html文件



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

編寫(xiě)mian.less文件:

@charset "utf-8";

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

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

三、less語(yǔ)法 1、注釋

less中有兩種注釋?zhuān)?b>/**/和//。

使用/**/的注釋是會(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)該一般編寫(xiě)和維護(hù)less文件，所以我們一般采用第二種注釋?zhuān)瑹o(wú)需將注釋編譯進(jìn)css文件。

2、變量

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

變量的使用：

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

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

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

3、混合

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

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

//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è)類(lèi)添加到元素的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中非常有用、高效的語(yǔ)法。

//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中我們有了更簡(jiǎn)潔的寫(xiě)法：

//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中使用偽類(lèi)選擇器也十分方便：

//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語(yǔ)法或者使用一些less不認(rèn)識(shí)的專(zhuān)有語(yǔ)法，要輸出這樣的值我們需要使用~""將語(yǔ)法包裹起來(lái)，語(yǔ)法放在雙引號(hào)或者單引號(hào)中間。從而實(shí)現(xiàn)不讓less編譯該段代碼：

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

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

云服務(wù)器 GPU云服務(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/112774.html

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

登陸后可評(píng)論

0條評(píng)論

codercao

男|高級(jí)講師

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

TA的文章

音頻社交Clubhouse將支持空間音頻，讓聊天更具真實(shí)感和生活感

閱讀 1255·2021-09-01 10:30
UCloud智能全球DDoS防御體系：亞太高防UADS-APAC-部署簡(jiǎn)單，實(shí)時(shí)防御、低延時(shí)、高可靠

閱讀 2133·2021-07-23 10:38
關(guān)于CSS中設(shè)置overflow屬性的值為hidden的相關(guān)理解

閱讀 907·2019-08-29 15:06
less學(xué)習(xí)筆記

閱讀 3161·2019-08-29 13:53
Angular項(xiàng)目接入Fundebug監(jiān)控

閱讀 3284·2019-08-26 11:54
js中性能更好的在數(shù)組頭部插入大量數(shù)據(jù)

閱讀 1837·2019-08-26 11:38
DocumentFragment文檔碎片

閱讀 2379·2019-08-26 10:29
「組件」設(shè)計(jì)一款Grid組件

閱讀 3134·2019-08-23 18:15

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

資訊專(zhuān)欄INFORMATION COLUMN

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

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

相關(guān)文章

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