Sugar Web Cloud

SCSS基礎編

SCSSとSassどちらを使っていますか？私はCSSに近いSCSSを使っています。SCSSはCSSと違ってプログラミングチックに書けてとても便利なやつです。先日、社内勉強会でSCSSの機能についてお話が出たので、ブログにまとめました。今回は、簡単に使える機能のみの紹介だったので、込み入った機能についてはまた調べてから別記事にまとめていく予定です。
ちなみに、↑の画像は、勉強会のメモです^^;

コメント

CSSのコメントは /* */で書くことができますが、SCSSでは、行頭に // を書くだけでコメント化することができます。

// はコンパイル後のCSSファイルから消えるため、CSSファイルには不要なコメントは // で書くということもできます。

// CSSにコンパイルすると消えるコメントです。
/* CSSにコンパイルしても残るコメントです。 */

ネスト

SCSSではセレクタをネストして（入れ子にして）記述できます。ネストすることで親子関係が分かりやすくなります。

//SCSSでの記述
div {
  background-color: #fff;
  p {
    font-size: 12px;
    span {
      color: white;
    }
  }
}
/* CSS（コンパイル結果） */
div {
  background-color: #fff;
}
div p {
  font-size: 12px;
}
div p span {
  font-weight: bold;
}

アンパサンド（＆）

ネストした時の親要素を参照できます。

//SCSSでの記述
.block {
  background-color: #fff;
  &__element {
    font-size: 12px;
  }
}
/* CSS（コンパイル結果） */
.block {
  background-color: #fff;
}
.block__element {
  font-size: 12px;
}

@import

CSSファイルだけではなく Sassファイルもインポートできます。@importの記述方法はCSSとほぼ同じです。

@import "test";

// こういう書き方もできます
@import url("test.scss");
@import url(test.scss);
@import "test.scss";
@import 'test.scss';

SCSSの特徴として、拡張子を省略してインポートすることができます。

パーシャル（ _ : アンダースコア）

SCSSのファイル名の頭に "_" をつけると、CSSにコンパイルされなくなります。その機能を使って、一つのSCSSに各SCSSファイル（ファイル名の頭に "_" をつけたファイル）をインポートし、CSSを1ファイルにすることができます。"_" はインポートする際に省略して記述することができます。

// _test.scss のインポート
@import "test";

変数

変数は値や文字列を入れておける箱みたいなものです。よく使う値を変数に入れておけば、必要な箇所で呼び出すことができます。変数化することで、後からの変更時に宣言した変数に代入している値を変えるだけで一括変換することができます。注意点として、変数は参照する前に宣言しておく必要があります。

//変数の使い方

$title-color: #a2d29e;
$main-font: helvetica, arial, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic 
 ProN", "メイリオ", Meiryo, sans-serif;

.text1 {
  color: $title-color;
  font-family: $main-font;
}
.text2 {
  color: $title-color;
  font-family: $main-font;
}

!default

変数に初期値を設定できる機能。!default は初期値なので他に定義があればそっちが優先されます。

//この書き方で、変数 $color-va には"#fff"が適用される。
$color-va: #fff;
$color-va: red !default;

インターポレーション（補完）

変数に入った文字列は通常は値として認識されるため、パス名やセレクタ名には使用できません。そこで、変数を参照する時に「#{}」で囲うとパス名などでも使えるようになります。

// SCSS
$img-path: "/images/";

.main {
  background-image: url(#{$img-path}usa.jpg);
}

四則演算

「50px + 5px」や、変数と数値、変数と変数同士などの演算ができます。

  • +（プラス）：足し算
  • -（ハイフン）：引き算
  • *（アスタリスク）：掛け算
  • /（スラッシュ）：割り算
  • %（パーセント）：割った余りを求める（剰余）
// SCSS
$title-font: 10px;

spnan{
  font-size: 5px + $title-font;
}
/* CSS（コンパイル結果） */
spnan{
  font-size: 15px;
}

@mixin/@include

ミックスインは、定義したCSSを@includeで呼び出しできる機能です。

// SCSS

// @mixinで定義
@mixin test {
  font-size: 16px;
  padding: 10px;
  background-color: #fff;
}

// @includeで呼び出し
.title {
  @include test;
}
/* CSS(コンパイル結果) */
.title {
  font-size: 16px;
  padding: 10px;
  background-color: #fff;
}

ミックスインには引数の設定もできます。引数には初期値も設定できます。

// @mixinで定義
@mixin test($size:16px, $padding:10px, $color:#fff) {
  font-size: $size;
  padding: $padding;
  background-color: $color;
}

// @includeで呼び出し
// 引数の値を指定しない
.title {
  @include test;
}

初期値を設定しておけば、呼び出す時に値が指定されていなかった場合引数の初期値が入ります。ただし、1つ目の値が初期値と同じで、2つ目が異なる場合は、1つ目の引数にも値を指定する必要があります。

//SCSS

// @includeで呼び出し
// 引数の値を指定
.subtitle {
  @include test($size:16px, $padding:5px)
}

/* CSS(コンパイル結果) */
.title {
  font-size: 16px;
  padding: 5px;
  background-color: #fff;
}

参考サイト

タグ