Sass(SCSS)の文法

  • 2021年6月22日
  • 2021年11月15日
  • HTML/CSS
  • 1view

変数

共通な色や数値などを定義しておける。
他に、文字列や真偽なども定義可能。

style.scss

$baseColor: #1967D3;

h1 {
  background-color: $baseColor;
  color: #fff;
}

style.css

h1 {
  background-color: #1967d3;
  color: #fff;
}

mixin

引数を使うことができる。
初期値を設定しておくことも可能。
定義しても、@includeで呼び出さないと使えない。style.scss


@mixin border($color:#666) {
  border-bottom: 1px solid $color;
}

#header {
  @include border(#999); 

  #gnav {
    overflow: hidden;
    @include border;
  }
}

style.css

#header {
  border-bottom: 1px solid #999999;
}

#header #gnav {
  overflow: hidden;
  border-bottom: 1px solid #666666;
}

引数の初期値を入れたい場合は、「:」の後に値を入れる。

@mixin border($color: #666) {
  border-bottom: 1px solid $color;
}

引数を複数指定したい場合は、「,」で区切る。

@mixin box($color: #666, $width: 300px, $height: 300px) {
  border: 1px solid $color;
  width: $width;
  height: $height;
}

引数使わないときは以下の書き方でOK。()なくて良い

@mixin border {
  border-bottom: 1px solid #999;
}

extend

定義しているスタイルを継承する。
コンパイルすると、セレクタがグループ化される。
グループ化した状態にしたくない場合は、extendにしない方が良いかも。style.scss

.box {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;

  p {
    line-height: 1.3;
  }
}

.contentsBox {
  @extend .box;
  background-color: #eee;
}

style.css

.box, .contentsBox {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}

.box p, .contentsBox p {
  line-height: 1.3;
}

.contentsBox {
  background-color: #eee;
}

extendする元のスタイルをCSSに出したくないとき、プレイスホルダーセレクタを使う。
「#」や「.」の代わりに「%」で定義する。

定義しても呼び出さないと使えないのは、@mixinと同じ。
(Sass3.2から追加された機能)style.scss

%box {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}

.contenteBox {
  @extend %box;
  p {
    line-height: 1.3;
  }
}

.noteBox {
  @extend %box;
}

style.css

.contenteBox, .noteBox {
  margin-top: 15px;
  padding: 10px;
  background-color: #ccc;
}

.contenteBox p {
  line-height: 1.3;
}

mixinとextendまとめ

mixin

・何度も使うスタイルを定義できる
・引数を使える
@includeで呼び出さなければ使えない

extend

・定義したスタイルを継承(入れ子になっているものも全て)
・グループ化される
・プレイスホルダーセレクタ(%hoge)で定義したものを@extendできる

どっちを使った方が良いかは、シーンによって変わりそうです。
適宜、より良い方をセレクトする必要がありますね。

Sassの&(アンパサンド)は、基本的に「親セレクタを参照」できる機能。

親セレクタの参照とは、「ネスト(入れ子)機能」を使って書いた場合「1階層上のセレクタ」をそのままコピーするように、コンパイル後のCSSで記述してくれる機能

通常のCSSの場合

たとえば、通常のCSSで以下のように、グローバルナビのCSSを書いていて「トップページだけはデザインの都合上、背景色を変えて表現したい!」なんて事もある。

通常のCSS

#gnav {

background:#eee;

}

body.top #gnav {

background:#000;

color:#fff;

}

#gnav ul li{

list-style:none;

}

ネストを使っただけのSassの場合

上記のCSSを、ネスト機能だけをつかったSassの場合は次のように記述する。

ネスト機能だけを使ったSass

#gnav {

background:#eee;

ul li{

list-style:none;

}

}

body.top #gnav {

background:#000;

color:#fff;

「&(アンパサンド)」を使ってネストさせたSassの場合

上記の記述を「&(アンパサンド)」を使えば、ネストの中で記述することができるので、記述が増えても可読性が保たれる!

「&(アンパサンド)」を使ってネストさせたSass

#gnav {

background:#eee;

body.top & {

background:#000;

color:#fff;

}

ul li{

list-style:none;

}

}

「&(アンパサンド)」をつかった擬似クラスの例

a {

color:#f90;

text-decoration: none;

&:hover {

text-decoration: underline;

}

}

コンパイル後のCSS

a {

color:#f90;

text-decoration: none;

}

a:hover{

text-decoration: underline;

}

やはりWEBの学習は「基礎」が一番重要!「時間をかけてしっかり」と基礎を固める事で、実際の仕事の案件の時に「基礎がしっかりしている」と、そこから応用が効いて、たいていの問題は解決するので、不安にならずに済みます。

最新情報をチェックしよう!

HTML/CSSの最新記事8件

>プログラミング 独学

プログラミング 独学

本当にプログラミングを学びたい人のためになるブログにしたいと思っていますので、些細なことでも気が付いたのであればご報告いただけると幸いです。

CTR IMG