SCSS これだけで仕事で8割カバーできるまとめ


手軽にSassを試すPlayground(何か試したくなったらここで試す)
http://www.sassmeister.com/

入れ子 重要度★★★
【用途】記述量を減らす。個人的には、ネスト構造で記述されたコードのほうがDOMのイメージがわきやすいのでそれもメリットかな。

SCSS

p{
  color:red;
  .hoge{
    text-align:right;
  }
  
}

CSS

p {
  color: red;
}
p .hoge {
  text-align: right;
}

変数 重要度★★★
【用途】使用する色などを一元管理する。Web開発などでは使われる色はある程度統一されることが多いので、_colors.scssなど、使用する色を集約した変数のみのscssファイルを作って一元管理すると楽。

SCSS

$app-use-red:red;

p{
  color:$app-use-red;
}

CSS

p {
  color: red;
}

import 重要度★★
【用途】目的ごとにファイルを分け、適切に使用することで可読性を向上させる。

@import './_colors.scss'

p{
  color:$app-use-blue;
}

CSS

p {
  color: blue;
}

mixinの定義と使用 重要度★★
【用途】変数の項とやりたいことは同じ。UIの統一性を持たせるために、基底となるスタイルは開発で統一されることが多いので、その統一されたスタイルをmixinで定義して、各具体的なスタイル・クラスはそれを呼び出すようにする。もし統一されたスタイルに変更があっても、mixinとしてまとめておけば修正が一箇所で済む。

SCSS


@mixin table-base{
  background-color:white;
  font-size:1.0em;
  padding:5px;
}

.awesome-table{
  @include table-base;
  text-align:center;
  border-radius:5px;
  
}

.great-table{
  @include table-base;
  text-align:right;
  border:1px solid red;
}

CSS


.awesome-table {
  background-color: white;
  font-size: 1.0em;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}

.great-table {
  background-color: white;
  font-size: 1.0em;
  padding: 5px;
  text-align: right;
  border: 1px solid red;
}



これら4つを使えるようになるだけで、CSSを書くときに悩まされる
「スタイル宣言が冗長すぎて書くのめんどくさい」
「同じスタイルをコピペするのがめんどくさい。おまけに基本スタイルに修正入ったからまた1からコピペしなおし」
「スタイルシートが4000行あって読む気が失せる、今どこを見ているのかわからなくなってゲシュタルト崩壊を起こす」
みたいな問題点が改善されます。

いつも頭においておきたい結構重要なこと

そこ、自前で実装するんじゃなくてフレームワークに任せられませんか?

個人的にはScssですら、ゴリゴリ自前実装したところは負債になりやすいと思っています。
昨今のシステム開発ではスクラッチでCSSを書くことより、何らかのCSSフレームワークを使った開発が多いので、究極的には

「CSSは自分では一行も書かない、すべてフレームワークのCSSを適切にclass付与するだけで望むスタイルを実現する」

を目指したほうが楽だと思ってます。てかドキュメント書かなくていいし、きちんとフレームワークに載せられれば海外のすごい人達がすごい充実したドキュメントをメンテしてくれるので。

marginとかpaddingはともかく、自前でborder-radiusとか@mediaとかposition:absoluteと書きだしたら脳内で警告音を鳴らすようにしています。