年快樂，開工大吉。今天帶大家了解一個實用的CSS新特性：@scope規則。在Sass或Less這類CSS預編譯工具中嵌套語法較為常見，就像這樣，可以一定程度上簡化CSS代碼的書寫，讓層次結構更清晰。

@scope規則的作用與之類似，例如將剛才的Sass嵌套改為@scope規則書寫，就會是這樣，可以看到樣式按照正確的預期渲染了，這里的背景色成功渲染了。

@scope規則不會改變CSS選擇器的優先級，例如這里的@scope(nav)的優先級等同于nav，右邊的案例可以證明這一點。如果@scope(nav)不參與優先級計算，遵循后來居上的原則，上面這個鏈接的背景色應該是淺粉色，但事實沒有，說明@scope(nav)參與了優先級計算。

any-link是偽類選擇器，優先級大于任意的標簽選擇器，因此下面的鏈接的背景色是淺粉色。規范還提供了名為：scope的偽類，可以選擇規則自身的匹配，例如這里可以設置nav元素自身紅色邊框。

@scope規則還提供了排除語法，例如此例，通過to語法的設置讓p元素的子元素不參與nav匹配，因此p元素下的a元素就沒有背景色設置。

最后@scope規則還支持復雜選擇器，就像這樣的語法也是合法的。

以上就是本次分享的全部內容，如果你有任何疑問可以通過評論的方式進行反饋，我會一一解答，我們下個視頻再見。

SS基礎2

1.CSS選擇器的優先級

標簽選擇器、偽元素選擇器：1

類選擇器、偽類選擇器、屬性選擇器：10

id 選擇器：100

內聯樣式：1000

!important聲明的樣式的優先級最高；

注意事項：

如果優先級相同，則最后出現的樣式生效；

繼承得到的樣式的優先級最低；

通用選擇器（*）、子選擇器（>）和相鄰同胞選擇器（+）并不在這四個等級中，所以它們的權值都為 0

樣式表的來源不同時，優先級順序為：內聯樣式 > 內部樣式 > 外部樣式 > 瀏覽器用戶自定義樣式 > 瀏覽器默認樣式。

一般來說選擇器越具體，優先級越高

2.display的屬性值及其作用

3.display的block、inline和inline-block的區別

（1）block： 會獨占一行，多個元素會另起一行，可以設置width、height、margin和padding屬性；

（2）inline： 元素不會獨占一行，設置width、height屬性無效。但可以設置水平方向的margin和padding屬性，不能設置垂直方向的padding和margin；

（3）inline-block： 將對象設置為inline對象，但對象的內容作為block對象呈現，之后的內聯對象會被排列在同一行內。

對于行內元素和塊級元素，其特點如下：

（1）行內元素

• 設置寬高無效；
• 可以設置水平方向的margin和padding屬性，不能設置垂直方向的padding和margin；
• 不會自動換行；

（2）塊級元素

• 可以設置寬高；
• 設置margin和padding都有效；
• 可以自動換行；
• 多個塊狀，默認排列從上到下

4.隱藏元素的方法有哪些

display: none：渲染樹不會包含該渲染對象，因此該元素不會在頁面中占據位置，也不會響應綁定的監聽事件。

visibility: hidden：元素在頁面中仍占據空間，但是不會響應綁定的監聽事件。

opacity: 0：將元素的透明度設置為 0，以此來實現元素的隱藏。元素在頁面中仍然占據空間，并且能夠響應元素綁定的監聽事件。

z-index: 負值：來使其他元素遮蓋住該元素，以此來實現隱藏。

clip/clip-path ：使用元素裁剪的方法來實現元素的隱藏，這種方法下，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件。

transform: scale(0,0)：將元素縮放為 0，來實現元素的隱藏。這種方法下，元素仍在頁面中占據位置，但是不會響應綁定的監聽事件

5.transition和animation的區別

transition是過度屬性，強調過度，它的實現需要觸發一個事件（比如鼠標移動上去，焦點，點擊等）才執行動畫。它類似于flash的補間動畫，設置一個開始關鍵幀，一個結束關鍵幀。

animation是動畫屬性，它的實現不需要觸發事件，設定好時間之后可以自己執行，且可以循環一個動畫。它也類似于flash的補間動畫，但是它可以設置多個關鍵幀（用@keyframe定義）完成動畫

6.偽元素和偽類的區別和作用

偽元素：在內容元素的前后插入額外的元素或樣式，但是這些元素實際上并不在文檔中生成。它們只在外部顯示可見，但不會在文檔的源代碼中找到它們，因此，稱為“偽”元素

div:before {content:"第一章：";}
div:after {content:"Hot!";}

偽類：將特殊的效果添加到特定選擇器上,它是已有元素上添加類別的，不會產生新的元素

a:hover {color: #FF00FF}
p:first-child {color: red}

偽類是通過在元素選擇器上加?偽類改變元素狀態，?偽元素通過對元素的操作進?對元素的改變。

7.CSS3中有哪些常用新特性

新增各種CSS選擇器 （: not(.a)：所有 class 不是“a”的節點）

圓角 （border-radius:8px）

多列布局 （multi-column layout）

陰影 （Shadow）

文字特效 （text-shadow）

文字渲染 （Text-decoration）

線性漸變 （gradient）

旋轉 （transform）

8.對line-height 的理解及其賦值方式

概念：

line-height 指一行文本的高度，包含了字間距，實際上是下一行基線到上一行基線距離；

如果一個標簽沒有定義 height 屬性，那么其最終表現的高度由 line-height 決定；

一個容器沒有設置高度，那么撐開容器高度的是 line-height，而不是容器內的文本內容；把 line-height 值設置為 height 一樣大小的值可以實現單行文字的垂直居中；

line-height 和 height 都能撐開一個高度；

賦值方式：

帶單位：px 是固定值，而 em 會參考父元素 font-size 值計算自身的行高

純數字：此數字會與當前的字體大小(font-size)相乘來設置行間,相當于倍數

百分比：與元素自身的字體大小(font-size)有關，計算值是給定的百分比值乘以元素計算出的字體大小

注意：

body {
  line-height: 200%;
  font-size: 30px;
}
p {
  font-size: 16px;
}

這時候p標簽的line-height為60px，因為body的line-height=200% * 30px=60px。再p標簽直接繼承body的line-height，而不是16*200%的32px

9.CSS 優化和提高性能的方法有哪些

加載性能：

（1）css壓縮：將寫好的css進行打包壓縮，可以減小文件體積

（2）減少使用@import，建議使用link，因為后者在頁面加載時一起加載，前者是等待頁面加載完成之后再進行加載。

選擇器性能：

（1）關鍵選擇器（key selector）。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）。CSS選擇符是從右到左進行匹配的。當使用后代選擇器的時候，瀏覽器會遍歷所有子元素來確定是否是指定的元素等等；

（2）如果規則擁有ID選擇器作為其關鍵選擇器，則不要為規則增加標簽。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）。

（3）避免使用通配規則，如*{}計算次數驚人，只對需要用到的元素進行選擇。

（4）盡量少的去對標簽進行選擇，用class作為選擇器。

（5）盡量少的去使用后代選擇器，降低選擇器的權重值。后代選擇器的開銷是最高的，盡量將選擇器的深度降到最低，最高不要超過三層，更多的使用類來關聯每一個標簽元素。

（6）了解哪些屬性是可以通過繼承而來的，然后避免對這些屬性重復指定規則。

渲染性能：

（1）慎重使用高性能屬性：浮動、定位。

（2）盡量減少頁面重排、重繪。

（3）去除空規則：｛｝。空規則的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文檔體積。

（4）屬性值為0時，不加單位。

（5）屬性值為浮動小數0.**，可以省略小數點之前的0。

（6）標準化各種瀏覽器前綴：帶瀏覽器前綴的在前。標準屬性在后。

（7）不使用@import前綴，它會影響css的加載速度。

（8）選擇器優化嵌套，盡量避免層級過深。

（9）css雪碧圖，同一頁面相近部分的小圖標，方便使用，減少頁面的請求次數，但是同時圖片本身會變大，使用時，優劣考慮清楚，再使用。

（10）正確使用display的屬性，由于display的作用，某些樣式組合會無效，徒增樣式體積的同時也影響解析性能。

（11）不濫用web字體。對于中文網站來說WebFonts可能很陌生，國外卻很流行。web fonts通常體積龐大，而且一些瀏覽器在下載web fonts時會阻塞頁面渲染損傷性能。

可維護性、健壯性：

（1）將具有相同屬性的樣式抽離出來，整合并通過class在頁面中進行使用，提高css的可維護性。

（2）樣式與內容分離：將css代碼定義到外部css中。

10.CSS預處理器/后處理器是什么？為什么要使用它們

預處理器， 如：less，sass，用來預編譯sass或者less，增加了css代碼的復用性。層級，mixin， 變量，循環， 函數等對編寫以及開發UI組件都極為方便。

后處理器， 如： postCss，通常是在完成的樣式表中根據css規范處理css，讓其更加有效。目前最常做的是給css屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。

css預處理器為css增加一些編程特性，無需考慮瀏覽器的兼容問題，可以在CSS中使用變量，簡單的邏輯程序，函數等在編程語言中的一些基本的性能，可以讓css更加的簡潔，增加適應性以及可讀性，可維護性等。

其它css預處理器語言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

• 結構清晰， 便于擴展
• 可以很方便的屏蔽瀏覽器私有語法的差異
• 可以輕松實現多重繼承
• 完美的兼容了CSS代碼，可以應用到老項目中

11.::before 和 :after 的雙冒號和單冒號有什么區別

冒號(:)用于CSS3偽類

雙冒號(::)用于CSS3偽元素。

::before就是以一個子元素的存在，定義在元素主體內容之前的一個偽元素。并不存在于dom之中，只存在在頁面之中。

注意： :before 和 :after 這兩個偽元素，是在CSS2.1里新出現的。起初，偽元素的前綴使用的是單冒號語法，但隨著Web的進化，在CSS3的規范里，偽元素的語法被修改成使用雙冒號，成為::before、::after

12.單行、多行文本溢出隱藏

單行文本溢出

overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;      // 溢出用省略號顯示
white-space: nowrap;         // 規定段落中的文本不進行換行

多行文本溢出

overflow: hidden;            // 溢出隱藏
text-overflow: ellipsis;     // 溢出用省略號顯示
display:-webkit-box;         // 作為彈性伸縮盒子模型顯示。
-webkit-box-orient:vertical; // 設置伸縮盒子的子元素排列方式：從上到下垂直排列
-webkit-line-clamp:3;        // 顯示的行數

注意：由于上面的三個屬性都是 CSS3 的屬性，沒有瀏覽器可以兼容，所以要在前面加一個-webkit- 來兼容一部分瀏覽器

12.對 CSS 工程化的理解

CSS 工程化是為了解決以下問題：

1. 宏觀設計：CSS 代碼如何組織、如何拆分、模塊結構怎樣設計？
2. 編碼優化：怎樣寫出更好的 CSS？
3. 構建：如何處理我的 CSS，才能讓它的打包結果最優？
4. 可維護性：代碼寫完了，如何最小化它后續的變更成本？如何確保任何一個同事都能輕松接手？

以下三個方向都是時下比較流行的、普適性非常好的 CSS 工程化實踐：

• 預處理器：Less、 Sass 等；
• 重要的工程化插件： PostCss；
• Webpack loader 等 。

基于這三個方向，可以衍生出一些具有典型意義的子問題，這里我們逐個來看：

（1）預處理器：為什么要用預處理器？它的出現是為了解決什么問題？

預處理器，其實就是 CSS 世界的“輪子”。預處理器支持我們寫一種類似 CSS、但實際并不是 CSS 的語言，然后把它編譯成 CSS 代碼：

那為什么寫 CSS 代碼寫得好好的，偏偏要轉去寫“類 CSS”呢？這就和本來用 JS 也可以實現所有功能，但最后卻寫 React 的 jsx 或者 Vue 的模板語法一樣——為了爽！要想知道有了預處理器有多爽，首先要知道的是傳統 CSS 有多不爽。隨著前端業務復雜度的提高，前端工程中對 CSS 提出了以下的訴求：

1. 宏觀設計上：我們希望能優化 CSS 文件的目錄結構，對現有的 CSS 文件實現復用；
2. 編碼優化上：我們希望能寫出結構清晰、簡明易懂的 CSS，需要它具有一目了然的嵌套層級關系，而不是無差別的一鋪到底寫法；我們希望它具有變量特征、計算能力、循環能力等等更強的可編程性，這樣我們可以少寫一些無用的代碼；
3. 可維護性上：更強的可編程性意味著更優質的代碼結構，實現復用意味著更簡單的目錄結構和更強的拓展能力，這兩點如果能做到，自然會帶來更強的可維護性。

這三點是傳統 CSS 所做不到的，也正是預處理器所解決掉的問題。預處理器普遍會具備這樣的特性：

• 嵌套代碼的能力，通過嵌套來反映不同 css 屬性之間的層級關系 ；
• 支持定義 css 變量；
• 提供計算函數；
• 允許對代碼片段進行 extend 和 mixin；
• 支持循環語句的使用；
• 支持將 CSS 文件模塊化，實現復用

（2）Webpack 能處理 CSS 嗎？如何實現？ Webpack 能處理 CSS 嗎：

• Webpack 在裸奔的狀態下，是不能處理 CSS 的，Webpack 本身是一個面向 JavaScript 且只能處理 JavaScript 代碼的模塊化打包工具；
• Webpack 在 loader 的輔助下，是可以處理 CSS 的。

如何用 Webpack 實現對 CSS 的處理：

• Webpack 中操作 CSS 需要使用的兩個關鍵的 loader：css-loader 和 style-loader
• css-loader：導入 CSS 模塊，對 CSS 代碼進行編譯處理； style-loader：創建style標簽，把 CSS 內容寫入標簽。

在實際使用中，css-loader 的執行順序一定要安排在 style-loader 的前面。因為只有完成了編譯過程，才可以對 css 代碼進行插入；若提前插入了未編譯的代碼，那么 webpack 是無法理解這坨東西的，它會無情報錯。

13.如何判斷元素是否到達可視區域

window.innerHeight 是瀏覽器可視區的高度；

document.body.scrollTop || document.documentElement.scrollTop 是瀏覽器滾動的過的距離；

imgs.offsetTop 是元素頂部距離文檔頂部的高度（包括滾動條的距離）；

內容達到顯示區域的：img.offsetTop < window.innerHeight + document.body.scrollTop;

14.z-index屬性在什么情況下會失效

通常 z-index 的使用是在有兩個重疊的標簽，在一定的情況下控制其中一個在另一個的上方或者下方出現。z-index值越大就越是在上層。z-index元素的position屬性需要是relative，absolute或是fixed。

z-index屬性在下列情況下會失效：

• 父元素position為relative時，子元素的z-index失效。解決：父元素position改為absolute或static；
• 元素沒有設置position屬性為非static屬性。解決：設置該元素的position屬性為relative，absolute或是fixed中的一種；
• 元素在設置z-index的同時還設置了float浮動。解決：float去除，改為display：inline-block；

15.px、em、rem的區別及使用場景

三者的區別：

px是固定的像素，一旦設置了就無法因為適應頁面大小而改變。

em和rem相對于px更具有靈活性，他們是相對長度單位，其長度不是固定的，更適用于響應式布局。

em是相對于其父元素來設置字體大小，這樣就會存在一個問題，進行任何元素設置，都有可能需要知道他父元素的大小。而rem是相對于根元素，這樣就意味著，只需要在根元素確定一個參考值。

使用場景：

對于只需要適配少部分移動設備，且分辨率對頁面影響不大的，使用px即可 。

對于需要適配各種移動設備，使用rem，例如需要適配iPhone和iPad等分辨率差別比較挺大的設備。

16.對Flex布局的理解及其使用場景

Flex是FlexibleBox的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。行內元素也可以使用Flex布局。注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis），項目默認沿水平主軸排列。

以下6個屬性設置在容器上：

flex-direction屬性決定主軸的方向（即項目的排列方向）。

flex-wrap屬性定義，如果一條軸線排不下，如何換行。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

justify-content屬性定義了項目在主軸上的對齊方式。

align-items屬性定義項目在交叉軸上如何對齊。

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

以下6個屬性設置在項目上：

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為0 1 auto。

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

簡單來說： flex布局是CSS3新增的一種布局方式，可以通過將一個元素的display屬性值設置為flex從而使它成為一個flex容器，它的所有子元素都會成為它的項目。一個容器默認有兩條軸：一個是水平的主軸，一個是與主軸垂直的交叉軸。可以使用flex-direction來指定主軸的方向。可以使用justify-content來指定元素在主軸上的排列方式，使用align-items來指定元素在交叉軸上的排列方式。還可以使用flex-wrap來規定當一行排列不下時的換行方式。對于容器中的項目，可以使用order屬性來指定項目的排列順序，還可以使用flex-grow來指定當排列空間有剩余的時候，項目的放大比例，還可以使用flex-shrink來指定當排列空間不足時，項目的縮小比例

17.各種圖形的繪制

（1）三角1

div {
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

（2）三角2

div {
    width: 0;
    height: 0;
    border-left: 50px solid red;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

（3）扇形

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}

18.設置小于12px的字體

在谷歌下css設置字體大小為12px及以下時，顯示都是一樣大小，都是默認12px。

解決辦法：

使用Webkit的內核的-webkit-text-size-adjust的私有CSS屬性來解決，只要加了-webkit-text-size-adjust:none;字體大小就不受限制了。

使用css3的transform縮放屬性-webkit-transform:scale(0.5); 注意-webkit-transform:scale(0.75);收縮的是整個元素的大小，這時候，如果是內聯元素，必須要將內聯元素轉換成塊元素，可以使用display：block/inline-block

十分鐘學會 Less

每一門技術的出現都是為了解決現存的問題，同樣的，Less 的出現是為了解決 CSS 中過于呆板的寫法。Less 官方文檔 中對 Less 的使用有詳細的介紹，總結一下為：Less=變量 + 混合 + 函數。如果你對 js 和 css 有所了解，那么就可以很快的掌握并在你的項目中使用 Less。

一、Less 使用初體驗

1. 使用 Less 寫樣式

使用 Npm 全局安裝 Less

$ npm install less -g

創建一個空文件夾，這里命名為：learn-less

在根目錄下創建 index.html 文件，復制內容如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初識 Less</title>
    <link href="./main.css" rel="stylesheet">
</head>
<body>
    <div class="container">1</div>
    <div class="container2">2</div>
    <div class="container3">3</div>
</body>
</html>

在根目錄下創建 main.less 文件，復制內容如下：

// main.less
@width: 100%;
@height: 100px;
@color: red;

.container{
   width: @width;
   height: @height;
   background-color: @color;
   margin-bottom: 5px;
 }

.container2{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container3{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

現在打開瀏覽器看一下，會發現并沒有加載樣式。這是因為 index.html 中引入的樣式文件是 main.css 而不是 main.less。所以接下來，我們需要將 main.less 轉換為 main.css，不用擔心，這一步驟并不需要你手動操作，僅僅是運行一條命令就會自動完成轉換。

$ lessc main.less

操作完以上步驟就會發現在根目錄下生成了一個 main.css 文件，此時再打開瀏覽器看看，樣式已經出現了。

main.css 轉義內容為：

.container {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}
.container2 {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}
.container3 {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}

如果你使用了 Webstorm 作為開發工具，那么連手動輸入命令行這一步都可以跳過，因為 Webstorm 會在你的 .less 文件被修改后自動生成對應的 .css 文件，具體配置跳轉：Webstorm 配置 Less 自動轉譯成 css

2. 感受 Less 的便利

現在有一個新的需求，需要將三個 div 的背景顏色改成藍色（blue），如果是之前 css 的寫法需要依次找到 container、container2、container3，對應修改里面的 background-color 屬性，但是使用 less 我們僅僅修改前面定義過的變量值即可。

// main.less
@width: 100%;
@height: 100px;
@color: blue;

...

使用 lessc main.less 進行轉譯后打開瀏覽器可以看到三個 div 的背景顏色已經被改變了。

二、變量

在前面介紹的案例中已經使用了“變量”的概念，是不是感覺和 js 很像，事實上 less 就是用 js 的寫法來寫 css。

官網在介紹變量的時候會給出很多應用場景，總結一下就是使用 @ 符號定義變量，使用 @ 符號獲取變量，僅僅將 @變量名 看成是一個字符串。

@classname: main;
@color: red;

.@classname{
    background-color: @color;
}

從上面例子中可以看到，變量不僅僅可以作為樣式屬性值：background-color: @color;，還可以作為類名：.@classname 表示的就是 .main。這也就是為什么說僅僅將 @變量名 看成是一個字符串。

三、混合

先看一個 example.css 文件：

#menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu span {
    height: 16px;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu p {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

可以看到上面三個樣式中都有 border-top 和 border-bottom 兩個屬性，并且內容完全相同；在傳統 CSS 寫法中只能這樣一遍有一遍的去書寫重復的內容，在 Less 中通過將公共屬性抽取出來作為一個公共類的方式規避這一點。

// example2.less
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered;
}

#menu span {
    height: 16px;
    .bordered;
}

#menu p {
    color: red;
    .bordered();
}

將以上 example2.less 進行轉譯成 example2.css 文件為：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu span {
  height: 16px;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu p {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

可以看到 examle2.css 與 example.css 很相似，只是多了一個 .bordered 樣式。

修改 example2.less，將 .bordered 寫成 .bordered()，此時在進行轉譯之后會看到 example2.css 和 example.css 文件就完全一樣了，使用 less 書寫更加簡單。

// example2.less
.bordered() {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

...

總結：

• 混合也是減少代碼書寫量的一個方法；
• 混合的類名在定義的時候加上小括弧 ()，那么在轉譯成 css 文件時就不會出現；
• 混合的類名在被調用的時候加上小括弧 ()和不加上小括弧 ()是一樣的效果，看個人習慣，如：第三行和第八行轉譯成 css 是一樣的。
• 1 #menu span {
  2 height: 16px;
  3 .bordered;
  4 }
  5
  6 #menu p {
  7 color: red;
  8 .bordered();
  9 }

四、函數

曾幾何時，在書寫呆板的 css 時有沒有想過讓類名動態化，根據不同的參數生成不同的樣式。看下面的示例：

// func.less
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

使用 $ lessc func.less 進行轉譯 func.css 文件內容如下：

#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

可以看到，這里就用到了函數的概念，在 #header 和 .button 中分別傳入不同的參數，結果也就生成不同的代碼。

關于 less 中函數的寫法還有以下幾種：

// 函數的參數設置默認值：
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// 函數有多個參數時用分號隔開
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}

// 函數如果沒有參數，在轉譯成 css 時就不會被打印出來，詳見上面混合中的示例
.wrap() {
  text-wrap: wrap;
}

// 函數參數如果有默認，調用時就是通過變量名稱，而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}

// 函數參數有個內置變量 @arguments，相當于 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

// 函數名允許相同，但參數不同，類似于 java 中多態的概念
.mixin(@color: black) {      
.mixin(@color: black; @margin: 10px) { 

當然，上面是開發人員自定義的函數，Less 也為我們定義了很多好用的內置函數。關于內置函數，如果掌握，可以在開發過程中節約很多時間，由于內置函數數量很多，這里就不一一介紹，傳送門：Less 內置函數官方文檔[https://less.bootcss.com/functions/]。

五、父子元素的寫法

在 css 中父子元素的寫法通常如下：

.container {
    padding: 0;
}
.container .article {
    background-color: red;
}

在 Less 寫法如下，父子嵌套關系一目了然。

.container {
    padding: 0;
    .article {
        background-color: red;
    }
}

當然，父子元素還要一種是偽類的寫法，在 css 中寫法如下：

#header :after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

在 less 中寫法如下，可以看到引入了新的符號 &，以 & 來代替主類 #header。

#header {
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

六、神奇 @import

在傳統 css 文件中，每個文件都是獨立的。在 less 中可以像 js 的模塊那樣在一個 less 文件中引入另一個 less 文件。

創建 one.less 文件：

.container {
  width: 100px;
  height: 200px;
}

創建 two.less 文件：

@import "one";

使用 $ lessc two.less 轉譯成 two.css 文件，可以看到內容如下：

.container {
  width: 100px;
  height: 200px;
}

@import 的作用可以看成是將 one.less 的內容復制一份到當前 .less 文件中。

那么如果 two.less 中也有一個類名叫 container 的，使用 @import 之后會變成什么樣子呢？這個留給自行測試好啦。

轉載自作者：dkvirus