sassについてあれこれ。part4

sassについてあれこれ。part3
前回から引き続きsassの機能を確認編。

最近は色んなフレームワーク使ってみよ〜と調べたりDLしてるんですが、全く分からん。他人のコードを触る気分・・・実際そうなんですが。
もっとたくさんのコード見ないとなれないですね・・・。

extend

指定したセレクタのスタイルを継承できます。mixinとちょっと似てますが、非なるもの！
コード見た方が早いですね。

extend.scss

.container {
    width: 800px;
    height: 300px;
    background-color: #ff0;
}
.box {
    @extend .container;
}

extend.css

.container, .box {
  width: 800px;
  height: 300px;
  background-color: #ff0; }

このクラスと一緒にしよーって時は便利〜。
mixinとの違いは、スタイルを上書きできるとこです。

extend.scss

.container {
    width: 800px;
    height: 300px;
    background-color: #ff0;
}
.box {
    @extend .container;
    width: 500px;
}
.box-sub {
    @extend .box;
    width: 300px;
}

extend.css

.container, .box, .box-sub {
  width: 800px;
  height: 300px;
  background-color: #ff0; }

.box, .box-sub {
  width: 500px; }

.box-sub {
  width: 300px; }

mixinだと同じルールセット内にスタイルが書かれてよろしくない！
ちなみにextendは複数指定可能です。

でもどこかで継承したいスタイルのセレクタがないと機能しないんじゃ・・・と思う方、耳寄りです。
『%』を使ってプレースホルダーセレクタを作りましょう！

extend.scss

%container {
    width: 800px;
    height: 300px;
    background-color: #ff0;
}
.box {
    @extend %container;
}

extend.css

.box {
  width: 800px;
  height: 300px;
  background-color: #ff0; }

上書きができるmixinて感じですね〜

import

cssにもある別のファイルを読み込む機能です。簡単な書き方は、

@import 'file.css';
@import 'file';　//sassだと拡張子を省略できます

cssだと先頭に記述しなくてはならないんですが、sassだとどこに書いてもコンパイル後に先頭に書いてくれます。

これ使い方が面白いんですが、importしたファイルもcssになるので無駄にcssファイルを作ることになります。
importでまとめてsassファイルにしたものを、cssにコンパイルすればいいだけなので読み込んだsassファイルのcssファイルはいらない！何を言ってるか分からないと思いますが・・・メインのsassファイルにあれこれつめとけって話で・・・。

つまり無駄にcssファイルを作らないために、　ファイル名の先頭に『_』をつけます！
そうするとcssファイルが作られません。この機能をパーシャルと言います。

例えばサイトを作るのにheader,section,footer・・・とスタイルを書いて、長〜くなった記述。このsectionのmarginをって時、どのあたりか探すのしんどい！面倒くさい！だるい！
こうしましょう。

style.scss

@import 'header','section','footer';

読み込み時は『_』と拡張子を省略できます。複数読み込む時は上記のような感じで！
mixin用、変数用のファイルを作ったりすれば編集がしやすいです。

演算

使うか・・？と思ったんですが、使うわ。となったので。
paddingの値を一度変えて戻すとなった時、元なんだっけ・・・となりますよね。なるんです。

calculation.scss

.container {
    width: 400px;
    margin-bottom: 27px - 4;
    .content {
        width: 200px;
        padding-right: 5px + 4;
    }
}

caluclation.css

.container {
  width: 400px;
  margin-bottom: 23px; }
  .container .content {
    width: 200px;
    padding-right: 9px; }

足す(+)引く(-)掛ける(*)割る(/)ができます。
割り算の場合書き方が値によって変わり、

caluclation.css

$value: 200px;
width: $value / 2;
width: (200px / 2);
width: 200px - 200 / 2;

どれも結果は100pxです。　
sassさん優秀か・・。

とりあえず今回はここまで！