跳到內容
本頁內容

表達性、動態、強大的 CSS

CSS 需要一位英雄

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

如果我們可以省略大括號呢?

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

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

分號呢?

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

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px
body
  font: 12px Helvetica, Arial, sans-serif

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

保持 DRY

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

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

a.button
  border-radius(5px)
border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

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

a.button
  border-radius(5px)

透明 mixin 如何?

border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

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

a.button
  border-radius: 5px
border-radius()
  -webkit-border-radius: arguments
  -moz-border-radius: arguments
  border-radius: arguments

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

a.button
  border-radius: 5px

建立與分享

@import 'vendor'

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

a.button
  border-radius: 5px
@import 'vendor'

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

a.button
  border-radius: 5px

甚至在語言功能中!

sum(nums...)
  sum = 0
  sum += n for n in nums

sum(1 2 3 4)
// => 10
sum(nums...)
  sum = 0
  sum += n for n in nums

sum(1 2 3 4)
// => 10

如果一切都可選擇呢?

fonts = Helvetica, Arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}
fonts = Helvetica, Arial, sans-serif

body {
  padding: 50px;
  font: 14px/1.4 fonts;
}

使用 Stylus 進行造型

一旦你擁有 Node.js,安裝 Stylus 非常容易。因此,取得適用於你的平台的二進制檔案,並確保它們也包含 npm,也就是 Node 的套件管理員。

現在,在你的終端機中輸入

$ npm install stylus -g
$ npm install stylus -g

如果你想要一種具有以下功能或下方列出功能的 Node.js 表達式 CSS 語言,請前往 GitHub 取得更多資訊。

功能

  • 可選擇的冒號
  • 可選擇的分號
  • 可選擇的逗號
  • 可選擇的大括號
  • 變數
  • 內插
  • 混合
  • 算術
  • 類型強制轉換
  • 動態匯入
  • 條件式
  • 反覆
  • 巢狀選擇器
  • 父參考
  • 變數函式呼叫
  • 詞彙範圍
  • 內建函式(超過 60 個)
  • 語言內函式
  • 可選擇的壓縮
  • 可選擇的圖片內嵌
  • Stylus 可執行檔
  • 穩健的錯誤回報
  • 單行和多行註解
  • 在棘手的時刻使用 CSS 文字
  • 字元跳脫
  • TextMate 套件
  • 還有更多!