Progate Sass I

Progate

Sass とは

  • CSSのメタ言語で, 記述量が減り, 再利用が簡単になる。
  • SASS記法とSCSS記法(以下ではSCSS記法を扱う。拡張子は.scss)

入れ子構造

  • 1つのセレクタの中に別のセレクタを入れ子にして指定できる。(以下のCSSとSassは等価)
    • メリット: header というクラス名を複数回書かなくて済む
.header {
    width:100%;
}
.header ul {
    padding:10px;
}
.header ul.hoge { /* <ul class="hoge"> に有効*/
    font-size:10px;
}
.header:hover {
    color:red;
}

.header {
    width:100%;
    ul {
        padding:10px;
        &.hoge { /* ul.hoge と等価 */
            font-size:10px;
        }
    }
    &:hover { /* .header:hover と等価 */
        color:red;
    }
}

変数

  • 注意
    • CSS は上から順に読み込まれるため, 変数名は定義を先にする必要がある。
    • ブロックスコープ
  • 代入: $変数名: 値;
  • 参照: $変数名

mixin

  • 関数みたいな感じ
@mixin hoge { /* hoge という mixin を定義 */
    margin:20px;
    color:red;
}
li {
    @include hoge; /* これで, hoge の margin と color が追加される。*/
    padding:10px;
}

@mixin fuga($color) {
    color:$color;
    font-size:14px;
}
.list {
    @include fuga(red)
    width:80%;
}

関数

  • lighten: より明るい色を返す関数。color:lighten(red,40%); のように使う

import

  • 読み込むファイルのファイル名は _hoge.scss のように先頭は _ にする必要がある。
  • 変数を一つのファイルにまとめるなどの使い方をする。
@import "_hoge.scss"; /* @import "hoge" のように アンダーバーと拡張子は省略可能 */
header {
    width:100%
    color:$base-color; /* 個の変数は _hoge.scss で定義されている */
}