Harp Stylus

2021-09-24 19:10 更新

Stylus 是一個(gè)高效、動(dòng)態(tài)以及豐富的 CSS 預(yù)處理器。它同時(shí)支持縮進(jìn)的和通俗的兩種風(fēng)格的 CSS 語(yǔ)法風(fēng)格。

Harp 自動(dòng)具備了最好的預(yù)編譯器。這意味著你不需要考慮下載哪個(gè)文件，最小化 CSS 或者未壓縮的 stylus 文件。一切都工作的很好。

用法

Harp 的 Asset Pipeline 用起來(lái)相當(dāng)簡(jiǎn)單。所有的預(yù)編譯靜默完成，不需要進(jìn)行任何配置。只需要用 .styl 后綴命名你的文件，而不是 .css，Harp 網(wǎng)頁(yè)服務(wù)器會(huì)把它當(dāng)作 .css 文件進(jìn)行解析。

示例

本項(xiàng)目中，在我們的 public/css 目錄中，有一個(gè) style.styl 和一個(gè) variables.styl 文件，像這樣：

myapp.harp.io/
    +- public/
        |- index.ejs
        +- css/
            |- style.styl     
            +- _variables.styl

你只需按如下設(shè)置你的 index.ejs 文件：

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

你的 style.styl 可以像這樣引用變量：

@import "_variables.styl"
body
    font 12px Helvetica, Arial, sans-serif

管理導(dǎo)入

如果你熟悉 Sass，你會(huì)習(xí)慣用下劃線打頭來(lái)命名你的局部視圖文件。這在 Stylus 中是允許的，但不是必須的。正因?yàn)槿绱?，使?@import 引入局部視圖的時(shí)候，你必須具體指明引用的開(kāi)頭的下劃線。例如，如果你有一個(gè)叫做 _example.styl 的局部視圖，你必須使用 @import "_example" 來(lái)導(dǎo)入它。單單用 @import "example" 在 Stylus 是無(wú)效的。

使用 Nib

Nib 是 Stylus 的應(yīng)用的類庫(kù)。給你的 Harp 應(yīng)用添加 Nib 的最快方式是克隆 Nib 的 Git 版本庫(kù)：

git clone https://github.com/visionmedia/nib.git /path/to/myapp.harp.io/public/css/_nib

這樣，在之前例子中的 style.styl，可以引入 Nib。

@import "_variables.styl"
@import "_nib"

body
    font: 12px Helvetica, Arial, sans-serif
    background: linear-gradient(top, white, black)

還可以參考


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)