第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

全部開發(fā)者教程

JavaScript 入門教程

然冬 · 更新于 2020-09-11

CSS 預(yù)處理器

CSS 預(yù)處理器是一個(gè)能讓你通過預(yù)處理器自己獨(dú)有的語法來生成 CSS 的程序。

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

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

主流的幾個(gè)預(yù)處理器語法類似，基礎(chǔ)語法很容易掌握。

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

SCSS 安裝過程中經(jīng)常會(huì)碰到 node-scss 依賴安裝緩慢，可以考慮使用 dart-scss。

1. 安裝 less

less 也可以通過 npm 進(jìn)行安裝。

先在一個(gè)空目錄初始化項(xiàng)目，然后安裝 less。

npm init -y

npm i less -D

圖片描述

2. 使用 less

修改 package.json 中的 scripts 配置項(xiàng)。

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

完成后再新建幾個(gè)測(cè)試用的文件。

一個(gè)是 index.html，另一個(gè)是 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">
    我是一個(gè)文本節(jié)點(diǎn)

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

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

  p {
    color: blue;

    a {
      color: green;
    }
  }
}

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

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

一切就緒后就 npm run compile !。

圖片描述

執(zhí)行后目錄下就會(huì)多一個(gè) style.css 文件。

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

打開 index.html 就可以發(fā)現(xiàn)樣式生效了。

圖片描述

其實(shí) style.less 的內(nèi)容不解釋，自己摸索也很容看出是什么意思，這是一種嵌套語法，通過嵌套的關(guān)系來對(duì)應(yīng)節(jié)點(diǎn)的關(guān)系。

嵌套 是最常用的特性，個(gè)人認(rèn)為也是預(yù)處理器中最重要的特性，其實(shí)許多前端開發(fā)者也只會(huì)用到變量、嵌套兩個(gè)特性。

3. 小結(jié)

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