2016-10-16

最低限のsass

ドットインストールのSass/SCSS入門を視聴して書いたメモです。

&はその親要素のセレクタを表す

ex)

a {
    text-decoration: none;
    &:hover: {
        font-weight: bold;
        }
}

変数

使えるデータ型：数値、文字列、真偽、色、リスト + - *の演算ができる

ex)

$baseFontSize: 14px;
$imgDir: “../images/“;
$brandColor: rgba(255, 0, 0, 0.9);

#main {
    width: 90%;
    background: url($imgDir + “bg.png”);
    // background: url(“#{$imgDir}bg.png”); でも可

    p {
        color: $brandColor;
        font-size: $baseFontSize;
        .sub {
            font-size: $baseFontSize - 2px;
        }
    }
}

関数

sassが予め用意している便利な関数一覧: http://sass-lang.com/documentation/Sass/Script/Functions.html

条件分岐

if,for while（調べて）

ファイルの分離

同一ディレクトリ内に_hoge.scssなどのようにして管理できる。main.scssで読み込むときは

@import “hoge”;

と記述する。

mixin

複数の設定をまとめて管理したいとき使う。@mixinで定義、@includeで呼び出す。

ex)

@mixin round {
    border-radius: 4px;
}

.label {
    font-size: 12px;
    @include round;
}

mixingは引数を持つこともできるし引数は初期値を持つこともできる。

extend

多くの共通する設定をもつ場合extendを使って継承すると便利

ex)

// extendを使わない場合
// background以外は共通している

.errorMsg {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    color:white;
    background: red;
}

.warningMsg {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    color:white;
    background: orange;
}

// extendを使った場合

%msg {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px;
    color:white;
}

.errorMsg {
    @extend %msg;
    background: red;
}

.warningMsg {
    @extend %msg;
    background: orange;
}

注：%はplaceholder selector、詳しくは「Sass 3.2 からは placeholder selector を使おう - https://goo.gl/YOFcyI」

誤解してそうな気もするので何かあったら教えてください。

2016-10-16

更新性

いままでとりあえず作って終わりでやってきたからきれいなコードの重要性が理解できなかったんだけど、作って、それを更新して、というのを経験してみて、めちゃくちゃ大事じゃん！と思った。なんでかんたんなことに気づかなかったんだ。作られたそれは生まれた時点からようやく始まるのだ。とりあえず動いてるけどなんで動いてんの？とか読みづらい、とかって、普通に見えるけど何考えてるのか分からなかったりする人間と付き合っているようなもので、よっぽど面白くない限りあまり関わり合いたくないでしょう。人間関係に例えるのはちょっと違うな・・・少なくとも自分の思い通りに動かせるものの中身が、簡単なことしかしてないのに複雑になってたら少しでも整理したいやろみたいな話です。まだまともに技術的なことも書けずポエるばかりなのでリーダブルコードでも買って読みます。