【Progate】Sassコース 学習内容まとめ

自己紹介

29歳。文系卒。新卒入社でWebディレクターを２年半経験。
その後は番組の字幕制作の仕事に従事。
現在はエンジニア転職を目指して勉強中。

Sassの印象

多くのプログラミング言語でいうC言語のような、始祖のような存在だと思ってました(なんで？)。

学習内容

SassはCSSの応用編。入れ子や変数の定義など、プログラミングのような使い方ができる。

入れ子

/* 例えばこんなふうに書かなくても… */
header{
}

header ul{

}

/* 入れ子で短く書ける */

header{
    ul{

    }
}

hover/action

/* hoverやactionもこのとおり */
li{
    &:hover{...}
    &:action{...}
}

class

/* もちろんclassも*/
li{
    &.class{...}
}

変数

変数を利用すれば、のちに修正が必要な場合、変数を直すだけで複数個所にも修正が反映される。嬉しい！
※スコープに注意。

/* $変数名:値; */
$hensuname:#ffffff;

/* 頭に"$"必須 */
h1{ color:$hensuname; }

mixin

CSSをギュッと縮小した関数のようなもの。同じ装飾を何回も再利用できて嬉しい。読み方はミキシン？三木眞一郎みたい。

/* 定義 → @mixin mixin名 */
@mixin mixinname{
    ....
}

/* 呼出 → @include mixin名*/
h1{
    @include mixinname;
}

引数

なんとmixinは引数も使えちゃうんだ。
レイアウトは同一でも、コンテンツごとに色が異なるときに重宝しそう。

/* mixinに引数を定義したら… */
@mixin example($hikisuu){
    color:$hikisuu
}

/* 呼出時に値を渡すことができる */
h1{
    @include example(#ffffff);
}

関数

mixinのこと関数みたいって書いたけど、普通に関数も存在するよ。

/* darken関数は、指定した色を暗くする*/
color:darken(#ffffff,10%);

/* lighten関数は、指定した色を明るくする*/
color:lighten(#ffffff,10%);

/* rgba関数は、指定した色を透明にする*/
color:rgba(#ffffff,0.5);

まとめ

思ってたものとはまったく違ったけど、確かにcssはちょっと冗長なとこあるなと思ってたので、sassと出会えてよかった。ただ、これとNode.jsやReactを嚙み合わせるイメージはまだまだできない。普通にhtmlと使う分には問題ない気がする。

今後も継続して学習を続けていきたいと思います。

Progate