Web制作

よく使うSASSのテクニッキメモ

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ライフを。



RECOMMENDこちらの記事も人気です。