亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

全部開發者教程

JavaScript 入門教程

然冬 · 更新于 2020-09-11

CSS 預處理器

CSS 預處理器是一個能讓你通過預處理器自己獨有的語法來生成 CSS 的程序。

CSS 預處理器有許多種，如 less、SCSS、styles、PostCSS，這四個是目前用的最多的。

預處理器有一套自己的語法，最終能編譯出 CSS。

主流的幾個預處理器語法類似，基礎語法很容易掌握。

以下篇幅圍繞預處理器 less 展開，主要是為了了解什么是預處理器。

SCSS 安裝過程中經常會碰到 node-scss 依賴安裝緩慢，可以考慮使用 dart-scss。

1. 安裝 less

less 也可以通過 npm 進行安裝。

先在一個空目錄初始化項目，然后安裝 less。

npm init -y

npm i less -D

圖片描述

2. 使用 less

修改 package.json 中的 scripts 配置項。

// package.json
"scripts": {
  "compile": "lessc style.less style.css"
},

完成后再新建幾個測試用的文件。

一個是 index.html，另一個是 style.less。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>less</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    我是一個文本節點

    <p>我是一個段落 <a href="//immoc.com">我是個超鏈接啦</a></p>
  </div>
</body>
</html>

// style.less
.container {
  color: red;

  p {
    color: blue;

    a {
      color: green;
    }
  }
}

index.html 中要引入 .css 文件，而不是 .less 文件。

觀察 compile 命令，意思就是 用less編譯器將將 style.less 進行編譯，然后輸出到 style.css，所以 index.html 要引入 style.css。

一切就緒后就 npm run compile !。

圖片描述

執行后目錄下就會多一個 style.css 文件。

.container {
  color: red;
}
.container p {
  color: blue;
}
.container p a {
  color: green;
}

打開 index.html 就可以發現樣式生效了。

圖片描述

其實 style.less 的內容不解釋，自己摸索也很容看出是什么意思，這是一種嵌套語法，通過嵌套的關系來對應節點的關系。

嵌套 是最常用的特性，個人認為也是預處理器中最重要的特性，其實許多前端開發者也只會用到變量、嵌套兩個特性。

3. 小結

less 還提供了如變量、循環、條件分支等特性，利用這些特性可以少很多冗余的 CSS 代碼，這些特性可以去官方文檔進一步挖掘。