Sass

出典: フリー百科事典『ウィキペディア(Wikipedia)』
移動: 案内検索
Sass
登場時期 2007
設計者 Hampton Catlin
開発者 Nathan Weizenbaum, Chris Eppstein
最新リリース 3.2.9 / 2013年5月10日(17か月前) (2013-05-10
主な処理系 Ruby
影響を受けた言語 CSS, YAML, Haml
影響を与えた言語 LESS, Stylus, Tritium
プラットフォーム Cross-platform
ライセンス MIT License
ウェブサイト sass-lang.com
拡張子 .sass, .scss

Sass(サース、Syntactically Awesome Stylesheets)は、Hampton Catlinが設計しNathan Weizenbaumが開発したスタイルシート言語である。[1][2] 後にSassファイルに用いられる単純なスクリプト言語であるSassScript用の拡張が加えられた。

SassはCascading Style Sheets(CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScriptはスクリプト言語自体を示す。 「インデント構文」と呼ばれる既存の構文は、Hamlと同様にブロック (プログラミング)改行コードを分離する際に字下げを活用している。[3] 新規の構文である「SCSS」は、CSSのようなブロックの書式を使用し、ブロック内の別々の行にブロックとセミコロンを示すため中括弧を用いている。 インデント構文には.sassの、SCSSファイルには.scssの拡張子が付与される。

CSS3はグループルールを適用するセレクタ及び擬似セレクターの一群で構成されている。 SASSは伝統的なプログラミング言語、特にオブジェクト指向言語で利用可能ないくつかの仕組みを提供することでCSSを拡張しているが、CSS3には適用できない。 SassScriptの解釈時には、Sassファイルで定義された様々なセレクタとして、CSSルールのブロックが作成される。 SassインタプリタがSassScriptをCSSに変換する。.sassか.scssの保存時にSassがこれらを監視し、CSS出力変換を行っている。[4] CSS用の単純な糖衣構文でもある。

公式にRubyで実装されているオープンソースソフトウェアであるが、 PHPを含めた多言語の実装も存在しており、中にはlibSassと呼ばれるC言語用の高性能の実装や、[5][6]JSassと呼ばれるJava用の実装がある。[7] インデント構文はメタ言語であり、SCSSはネストされたメタ言語であるように、プログラム意味論上ではValidなCSSは、ValidなSCSSである。 Mozilla Firefox拡張機能であるFirebugとの統合に対応している。[8]

SassScript[編集]

SassScriptは変数 (プログラミング)ネスティングMixin、セレクタの継承 (プログラミング)に対応している。[3]

変数[編集]

定義する変数は$で始まり、代入にコロン (記号)が用いられる。[8]

(単位を含む)、(引用符の有無にかかわらず)文字列、色(色名か指定記号)、ブーリアン型のデータ型に対応している。[8]

SCSSの記法

$blue: #3bbfce;
$margin: 16px;
 
.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 20%);
}
 
.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

SASSの記法

$blue: #3bbfce
$margin: 16px
 
.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
 
.border
  padding: $margin/2
  margin:  $margin/2
  border-color: $blue

コンパイラ結果

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}
 
.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

ネスティング[編集]

CSSは論理的なネストに対応しているが、コードブロック自体はネストされていない。 Sassにより、ネストされたコードは互いに挿入できる。[3]

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}
 
li {
  font: {
    family: serif;
    weight: bold;
    size: 1.3em;
  }
}

コンパイラ結果

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}
 
li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.3em;
}

名前空間のネストや親の参照を含むより複雑な種類は、公式文書で説明されている。[8]

Mixin[編集]

CSSはミックスインに対応していないため、同じコードを別の位置に繰り返し記載する必要がある。 ミックスインは、任意のValidなSassコードを含むコード節を示し、実行されるたびに翻訳結果が呼び出し元の位置に挿入される。 これにより効率的なコーディングや記述の簡略化だけでなく、内容変更を容易にする。[3]

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}
 
#data {
  @include table-base;
}

コンパイラ結果

#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

引数[編集]

ミックスインはまた、引数に対応している。[3]

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}
 
#data {
  @include left(10px);
}

コンパイラ結果

#data {
  float: left;
  margin-left: 10px;
}

組み合わせ例[編集]

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}
 
@mixin left($dist) {
  float: left;
  margin-left: $dist;
}
 
#data {
  @include left(10px);
  @include table-base;
}

コンパイラ結果

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

セレクタの継承[編集]

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}
 
.badError {
  @extend .error;
  border-width: 3px;
}

コンパイラ結果

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}
 
.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}
 
.badError {
  border-width: 3px;
}

関連項目[編集]

脚注[編集]

外部リンク[編集]