定番
新着
履歴

SCSS 書き方

SCSS 書き方
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 繰り返し1
@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 繰り返し2
$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直書きのほうが、運用しやすそうな気もします。コーダーとデザイナーでどちらが担当するか、おもしろいところだと思います。 リアルタイムに変換してくれるオンラインのこちらのツールがとても便利です。
2016-02-05 20:33:55
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top