Sassを使って3倍速くCSSを書く

Sassって何？

Sassって何？

簡単に言うとCSSをプログラムチックに書けるもの。

実行するにはRubyが必要。

でもインストールは簡単なので心配なく。

こんなこと思ったことありませんか？

例えば

・余白に毎回同じ数値を指定している。(基本の余白は12px、みたいに設定したい)

・CSS3を全ブラウザ向けに書くの大変…。

・このclassを使いたいけど、ひとつだけ指定を別にしたいんだよな…別class作るか…。

Sassならできます。

同じ指定を1か所で定義して使いまわす

/* sassの書式 */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

/* 出力された結果 */
.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

複数の指定をまとめて再利用する

/* sassの書式 */
@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

/* 出力された結果 */
#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

classの使いたいところだけを使う

/* sassの書式 */
.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

/* 出力された結果 */
.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Demo

ご清聴ありがとうございました。

Pages: 1/1