SCSS 書き方

CSSは、少し違うだけなのになんども同じID、Classを書かないときがありますが、それをキレイに管理する手法の一つです。

SCSSとは、変数や関数、または入れ子（ネスト）やクラスの継承を使って、効率的にCSSを生成するための言語です。

CSSには、同じ文字の繰り返しが多く、また、親子関係のクラスでほとんど同じだが、一部だけ違うといった微調整が必要で、どうしてもコードが長く、煩雑になりがちです。

そこで生まれたのがこの言語。CSSを作り出す言語なので、コンパイルが必要ですが、Railsでは自動で変換してくれるようですし、要は本番環境にリリースする際に、CSSを生成してやればよいのです。

SCSSの形で運用すれば、継ぎはぎで膨大な量のコードを解読することを防ぎ、動的なコンテンツへの応用もできると思います。

SCSS タグのネスト

#myId {
  margin: 5px;
    a {
      color: #0FF;
      &:hover { color: #0FF; }
    }
}

CSS 出力

#myId {
  margin: 5px;
}
#myId a {
  color: #0FF;
}
#myId a:hover {
  color: #0FF;
}

SCSS ハイフンのネスト

.line {
  border: {
    bottom: {
      width: 5px;
      color: #F00;
    }
  }
}

CSS 出力

.line {
  border-bottom-width: 5px;
  border-bottom-color: #F00;
}

SCSS 変数

$myColor: #789;
#myId { color: $myColor; }

CSS 出力

#myId {
  color: #789;
}

SCSS 繰り返し１

@each $x in A, B, C {
  .my_#{$x} { background-image: url('/#{$x}.gif'); }
}

CSS 出力

.my_A {
  background-image: url("/A.gif");
}

.my_B {
  background-image: url("/B.gif");
}

.my_C {
  background-image: url("/C.gif");
}

SCSS 繰り返し２

$i: 1;
@while $i < 4 {
  .my_#{$i} { background-image: url('/#{$i}.gif'); }
  $i: $i + 1;
}

CSS 出力

.my_1 {
  background-image: url("/1.gif");
}

.my_2 {
  background-image: url("/2.gif");
}

.my_3 {
  background-image: url("/3.gif");
}

上記の他にもたくさんの便利な関数や、定義があります。

こうしてみると、SCSSは効率化や可読性には長けていますが、改善速度や作画的な用途のときはCSS直書きのほうが、運用しやすそうな気もします。コーダーとデザイナーでどちらが担当するか、おもしろいところだと思います。

リアルタイムに変換してくれるオンラインのこちらのツールがとても便利です。

公開 2019-08-04 22:22:00

このページの二次元コード

同じカテゴリーのサンプル