SASSは便利だけど、色んな処理方法があって結構大変。CSSの記述も使えるから少しずつ覚えていけばいいんだけど、すぐ忘れるトリ頭なのでよく使うテクをここに残しておく。
基本
他ファイルの読み込み
目的別にSCSSファイルを作って、大元から読み込めばソースの管理が楽になる。コンパイル後のCSSファイルには痕跡は残らない。
@import "_media";//_media.scssファイルの読み込み @import "_color"; @import "_common"; @import "_module";
これで目的別に作成したSCSSファイルを読み込める。
変数
色やフォントサイズなど、基準を決めて使いまわす時に便利。
$brown: #76634c;
こうして
.class { color: $brown; }
こんな風に使う
.class { color:#76634c; }
こうなる。
親クラス+親クラスを参照したクラス指定
.class { &#{&}__thumb { margin-bottom: 1rem; } }
これが
.class.class__thumb { margin-bottom: 1rem; }
こうなる
色の濃さ、薄さを変える
色相や彩度・明度も変えられるけどあまり使わない。
$color: #f00; //明るく $color-light: lighten($color, 5%); //暗く $color-dark: darken($color, 5%); //透明度 $color-opacity: rgba($color, 0.5);
ソースマップを使って一気にクラスを定義する
$cate-colors: ( 'a': #5eafa7, 'b': #f29a63, 'c': #7096ce, 'd': #d68498, 'e': #9c87ba, ) !default; @each $key, $color in $cate-colors { .cate-#{$key} { color: $color; } }
こう書くと
.cate-a { color: #5eafa7; } .cate-b { color: #f29a63; } .cate-c { color: #7096ce; } .cate-d { color: #d68498; } .cate-e { color: #9c87ba; }
こうなる。
もちろん
@each $key, $color in $cate-colors { &.cate-#{$key} { span { &:before { color: $color; } } } }
こんな風にも使える。
メディアクエリを定義する
$bpu: ( 'xs': 'screen and (min-width: 481px)', 'sm': 'screen and (min-width: 641px)', 'md': 'screen and (min-width: 769px)', 'lg': 'screen and (min-width: 1025px)', 'xl': 'screen and (min-width: 1281px)', ) !default; $bpd: ( 'xs': 'screen and (max-width: 480px)', 'sm': 'screen and (max-width: 640px)', 'md': 'screen and (max-width: 768px)', 'lg': 'screen and (max-width: 1024px)', 'xl': 'screen and (max-width: 1280px)', ) !default; @mixin mq-u($breakpoint: md) { @media #{map-get($bpu, $breakpoint)} { @content; } } @mixin mq-d($breakpoint: md) { @media #{map-get($bpd, $breakpoint)} { @content; } }
こう書いておいて。。
@include mq-d() { .class { color: #000; } }
こう書くと、、
@media screen and (max-width: 768px) { .class { color: #000; } }
こうなる。。
エントリーは今後も随時更新予定。では、よいSASSライフを。