一、less 入門(mén)

介紹

• Less 是一門(mén) CSS 預(yù)處理語(yǔ)言撞蚕，它擴(kuò)展了 CSS 語(yǔ)言润梯，增加了變量、Mixin诈豌、q嵌套仆救、函數(shù)抒和、作用域等特性
• 提高了css代碼可維護(hù)性矫渔、邏輯性、擴(kuò)展性
• css 是一門(mén)非程序式語(yǔ)言摧莽，沒(méi)有變量庙洼、函數(shù)、作用域等概念

安裝 安裝教程

• 簡(jiǎn)單，不需安裝其他依

• 全局安裝 npm install less -g

• 項(xiàng)目中安裝 npm i less --save-dev

• 顯示版本

lessc -v
lessc --version

編譯：編譯教程

• 命令行編譯
• 編輯器插件編譯
• 編譯軟件koala
• 前端自動(dòng)化工具編譯
• 在客戶端使用less.js（簡(jiǎn)便油够，但推薦用于生產(chǎn)環(huán)境蚁袭，影響性能） ---> 比sass多一種

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

注意點(diǎn)：
1. 在less.js之前引入css樣式表
2. link標(biāo)簽的rel 屬性設(shè)置為 "stylesheet/less"

二、嵌套

• 父選擇器 &
• 層層嵌套石咬，便于維護(hù)
• 解耦：高內(nèi)聚揩悄、低耦合，利于維護(hù)

&:hover
&::before

三鬼悠、變量 variales

定義變量用 @

• 定義變量删性、屬性值為變量（不插值）

@link-color: #428bca; 
.link {
    color: @link-color;
}

// 被編譯為：
.link {
    color: #428bca;
}

變量插值 @{}

• 選擇器、屬性名焕窝、屬性值（插值）

• 選擇器蹬挺、屬性名中、部分片段中：必須使用插值語(yǔ)句

@mySelector: banner;
.@{mySelector} {
  font-weight: bold;
}

// 被編譯為：
.banner {
    font-weight: bold;
}

@property: color;
.widget {
    @{property}: #0ee;
    background-@{property}: #999;
}

// 被編譯為：
.widget {
    color: #0ee;
    background-color: #999;
}

@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

// 被編譯為：
body {
  color: #444;
  background: url("../img/white-sand.png");
}

四它掂、作用域

• LESS 中的作用域跟其他編程語(yǔ)言非常類(lèi)似巴帮，首先會(huì)從本地查找變量或者混合模塊，如果沒(méi)找到的話會(huì)去父級(jí)作用域中查找虐秋，直到找到為止榕茧。

五、混入 mixins

1. 混合集（輸出客给、不輸出）

.btn1 {     // 被輸出
  color: black;
}
#btn2() {   // 不被輸出雪猪，加括號(hào)
  font-size: 12px;
}
.class {
  .btn1();  // 調(diào)用混合集的時(shí)候：括號(hào)可加可不加
  #btn2;
}

// 被編譯為：
.btn1 {
    color: black;
}
.class {
    color: black;
    font-size: 12px;
}

2. 帶選擇器的混合集

.my-hover-mixin() {
    &:hover {
        border: 1px solid red;
    }
}
button {
    .my-hover-mixin();
}

// 被編譯為：
button:hover {
    border: 1px solid red;
}

3. 命名空間混入

#bundle {
    .button () {
        display: block;
        &:hover {
            background-color: white;
        }
    }

    .tab () {
        color: #fff;
    }
}

#header a {
    color: orange;
    #bundle > .button;  // 重點(diǎn)
}

// 被編譯為：
#header a {
    display: block;
}

#header a:hover {
    background-color: #ffffff;
}

4.帶參數(shù)混入（參數(shù)用 @ 定義）

• 單一參數(shù)：

.border-radius(@radius) {
    border-radius: @radius;
}

.box {
    .border-radius(4px);
}

// 被編譯為
.box {
    border-radius: 4px;
}

• 帶默認(rèn)值的參數(shù)

.border-radius(@radius: 4px) {
    border-radius: @radius;
}

.box {
    .border-radius;
}

// 被編譯為
.box {
    border-radius: 4px;
}

• 多個(gè)參數(shù)（推薦 逗號(hào) 分號(hào) 隔開(kāi)）

.mixin(@color; @padding:2px) {
    color: @color;
    padding: @padding;
}
.selector {
    .mixin(#008000);
}

// 被編譯為：
.selector {
    color: #008000;
    padding: 2px;
}

• 命名參數(shù)（不用再注意參數(shù)的位置）

.mixin(@color: black; @margin: 10px) {
    color: @color;
    margin: @margin;
}
.class1 {
    .mixin(@margin: 20px; @color: #33acfe);
}

// 被編譯為
.class1 {
    color: #33acfe;
    margin: 20px;
}

六、內(nèi)置函數(shù) 函數(shù)手冊(cè)

列表函數(shù)

• length(列表); // 返回列表中元素的個(gè)數(shù)
• extract(列表, index); // 返回列表中指定位置的元素

七起愈、條件語(yǔ)句只恨、循環(huán)語(yǔ)句 when

比較運(yùn)算符的完整列表為： >, >=, =, =<, <

.max (@a) when (@a > 0) { width: @a; }
.mixin (@a) when (default()) { width: 0; }
.max (10px);

// 被編譯為：
.max {
    width: 10px;
}

類(lèi)型檢測(cè)函數(shù)

• 檢測(cè)參數(shù)類(lèi)型

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl

• 檢測(cè)參數(shù)單位

  • ispixel
  • ispercentage
  • isem
  • isunit

.mixin (@a; @b: 0) when (isnumber(@b)) { ... }
.mixin (@a; @b: black) when (iscolor(@b)) { ... }

less中混合調(diào)用自身，即可形成循環(huán)

.loop(@counter) when (@counter > 0) {
    .loop((@counter - 1));    // 遞歸調(diào)用自身
    width: (10px * @counter); // 每次調(diào)用時(shí)產(chǎn)生的樣式代碼
}

div {
    .loop(5); // 調(diào)用循環(huán)
}

// 被編譯為：
div {
    width: 10px;
    width: 20px;
    width: 30px;
    width: 40px;
    width: 50px;
}

八抬虽、導(dǎo)入@import

less 中 @import 文件可在任意位置導(dǎo)入官觅；css中 @import文件必須在其他類(lèi)型規(guī)則之前導(dǎo)入

less 中導(dǎo)入文件的擴(kuò)展名

@import "foo";      // foo.less is imported
@import "foo.less"; // foo.less is imported
@import "foo.php";  // foo.php imported as a less file
@import "foo.css";  // statement left in place, as-is

less 中導(dǎo)入文件選項(xiàng)

• 語(yǔ)法：@import (keyword) "filename";

  • reference：使用Less文件但不輸出
  • inline：在輸出中包含源文件但不加工它
  • less：將文件作為L(zhǎng)ess文件對(duì)象，無(wú)論是什么文件擴(kuò)展名
  • css：將文件作為CSS文件對(duì)象阐污，無(wú)論是什么文件擴(kuò)展名
  • once：只包含文件一次（默認(rèn)行為）
  • multiple：包含文件多次

九休涤、注釋

• /**/ 可以使用，會(huì)被編譯
• // 可以使用笛辟，但不會(huì)被編譯到css中
• less不認(rèn)識(shí)的內(nèi)容 不會(huì)被編譯