最終更新:2017-12-30 (土) 16:56:59 (2301d)  

Sass
Top / Sass

インデントを使ってCSSをシンプルに書ける独自のスタイル指定言語

http://sass-lang.com/

Sass makes CSS fun again.

  • Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  • It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
↑

使い方

↑

インストール 

gem install sass
  • 変更の監視 
    sass --watch style.scss:style.css #To translate this Sass file into a CSS file
  • style.scssの変更を監視して、自動的にstyle.cssを更新してくれる
  • ディレクトリ単位の指定も可能。
↑

文法

↑

SCSS (Sassy CSS - CSS3のスーパーセット) 

  • $blue: #3bbfce;
.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}
↑

Sass (インデント構文 - 古い構文。) 

  • $blue: #3bbfce
.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
↑

機能

  • 変数
    • string
    • color
    • number
    • boolean
  • Nested Rules
↑

mixins

  • mixins allow you to re-use whole chunks of CSS, properties or selectors.
  • @mixin?
  • @include
↑

selector inheritance

↑

関数

↑

制御構文

  • @for?
  • @while?
↑

ツール

  • Compass - mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使えるようにするもの
  • Scout - Compass and Sass without all the hassle
↑

関連

↑

参考




検索：