閱讀(1.1k) 書(shū)簽贊(0) 我要糾錯(cuò)

Harp Sass

2021-09-24 19:10 更新

Sass 是一個(gè)功能豐富，用途很廣的 CSS 預(yù)處理器。它使用 CSS 的超集 SCSS 語(yǔ)法，或者原生語(yǔ)法。

Harp 默認(rèn)包含最好的預(yù)處理器。這意味著你不需要浪費(fèi)時(shí)間來(lái)配置 Sass，折騰安裝依賴(lài)，最小化 CSS 文件，你甚至不需要選擇文件的輸入和輸出位置。一切都會(huì)工作的很好！

用法

Harp 的 Asset Pipeline 用起來(lái)相當(dāng)簡(jiǎn)單。所有的處理過(guò)程靜默完成，不需要進(jìn)行任何配置。只要給你的文件加上 .scss 后綴，而不是 .css，Harp 網(wǎng)頁(yè)服務(wù)器會(huì)把它當(dāng)做 .css 文件進(jìn)行解析。

SCSS 示例

本項(xiàng)目中，css 目錄中有一個(gè) main.scss 和一個(gè) _variables.scss 文件，像這樣：

myproject/
  |- index.html
  +- css/
    |- main.scss     
    +- _variables.scss

這樣，你只需簡(jiǎn)單地在 ?index.ejs? 文件中引用 ?main.css? 以及任何其他 CSS 文件：

<html>
    <head>
        <link href="css/main.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        …
    </body>
</html>

然后你的 main.scss 可以這樣引用變量：

@import "variables";

body {
    font: 12px Helvetica, Arial, sans-serif;
}

Sass 示例

本項(xiàng)目中，css 目錄中有一個(gè) main.sass 和一個(gè) _variables.sass 文件，像這樣：

myproject/
  |- index.html
  +- css/
    |- main.sass     
    +- _variables.sass

這樣，你只要在 index.ejs 文件中引用 main.css 文件以及其他 CSS 文件：

<html>
    <head>
        <link href="css/main.css" type="text/css" rel="stylesheet">
    </head>
    <body>
        …
    </body>
</html>

main.sass 可以這樣引用變量：

@import variables

body
    font: 12px Helvetica, Arial, sans-serif

注意事項(xiàng)

在 Harp 的 Sass 版本中，Sass 3.2 的主要功能都是可用的，但是不支持 Sass 3.3。

Harp 使用 libsass，Sass 的 C++ 實(shí)現(xiàn)，用來(lái)預(yù)處理。由于不是 Sass 的原生版本，可能不包含最新的 Sass 3.3 的特征。

如果你有疑問(wèn)，或者不確定在 Libsass 中一個(gè)功能是否有所缺失，或者在 Harp 中存在一個(gè) bug，歡迎訪(fǎng)問(wèn) 提交 GitHub 問(wèn)題。

以上內(nèi)容是否對(duì)您有幫助：

在文檔使用的過(guò)程中是否遇到以下問(wèn)題：

內(nèi)容錯(cuò)誤
更新不及時(shí)
鏈接錯(cuò)誤
缺少代碼/圖片示列
太簡(jiǎn)單/步驟待完善
其他

更多建議：

提交建議

← Harp LESS

Harp Stylus →

寫(xiě)筆記

我要補(bǔ)充

查看完整版筆記

国产gaysexchina男同gay,japanrcep老熟妇乱子伦视频,吃奶呻吟打开双腿做受动态图,成人色网站,国产av一区二区三区最新精品