水無瀬のプログラミング日記

プログラムの勉強した時のメモ

SCSSまとめ

はじめに

CSS書く時にいちいち調べながら書いてたけど、いい加減にちゃんと勉強しようと思った今日この頃。
素のCSSを書くのも良いかも知れないけど、せっかくなのでSass(SCSS)で書けるようにまとめる。

Sass(SCSS)とは

CSSメタ言語
SassとSCSSの違いは書き方の違いのみ。
CSSっぽく書いたSassがSCSSといった具合。
同じものなので、どちらの記法で書いたとしても同じCSSが生成される。
以降のサンプルは全部SCSSで書いた場合。

SCSSの機能一覧

機能1: 変数

SCSSでは変数が使える。
$変数名: 値で変数を定義できる。
色とか共通のものあるだろうし、一括定義できるのは便利。

$red = #FF3333;
.text {
    color: $red;
}

機能2: ネスト

HTMLみたくネストして書くことができる。
元のCSSでも一応ネストしてかけるけど、
入れ子でかけるほうがわかりやすいと思う。

div {
    ul {
        background-color: #000;
        li {
            color: #fff;
        }
    }
}

// ちなみに普通のCSSでは下記みたいに書く
div ul {
    background-color;
}
div ul li {
    color: #fff;
}

機能3: パーシャル化

1つのCSSを書く際に機能毎に分割することができる。
分割されたファイル名を_ファイル名.scssの様にすることによってCSSに変換する際に変換対象外にできる。
簡単に言うとコイツは別のとこで読み込むから変換しないでファイル。
分割されたファイルは使いたいSCSSで@import 'ファイル名'でimportして使う。(_はなくていい)

// _importedFile.scss
div {
    color: #000;
}

// main.scss
// importして使う
@import 'importedFile';
span {
    color:#fff;
}

機能4: Import

上の通り。
別に_付きのファイルじゃなくてもimportはできる。
ちなみに素のCSSにもimport機能はあるけど、読み込む度にHTTPリクエストが発生する欠点があった。
SCSSでのimportは読み込んだ上で単一のCSSとして生成されるのでリクエストが発生するデメリットはない。

機能5: Mixin

サイト内で使いまわしたい宣言を使い回せるよっていう機能。
使い回される宣言に@mixinと付ければ使い回せるようになる。
使う際には@incliudeを付けてることで@mixinで宣言した内容を呼び出せる。
ちなみに@mixin(変数)とすることで変数を受け取ることもできる。優秀。

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
@mixin box_define($width:50px, $height:50px, $bg_color:white) {
  width: $width;
  height: $height;
  background: $bg_color;
}

.box { @include transform(rotate(30deg)); }
.box2 {
  /* 引数には初期値も設定できる。省略するとそれが使われる */
  @include box_define();
}

機能6: Extend/Inheritance

@extendを使うことであるセレクタのプロパティを別のセレクタに共有できる。
HTMLに複数のクラス名を記述する必要がなくなるとかメリットがある。

/* この定義を他のセレクタで使い回せる。 */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

機能7: 四則演算

+,-,*,/,%みたいなよくある四則演算が使える。
内容もよくある四則演算なので割愛。

作ったサンプル

ここ
ちなみに全部は使ってない。

まとめ

素のCSS書くのやめようと思った。
今回使えなかったものも組み込んで使えるようにしたい。

参考サイト