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

SASSは便利だけど、色んな処理方法があって結構大変。CSSの記述も使えるから少しずつ覚えていけばいいんだけど、すぐ忘れるトリ頭なのでよく使うテクをここに残しておく。

基本

他ファイルの読み込み

目的別にSCSSファイルを作って、大元から読み込めばソースの管理が楽になる。コンパイル後のCSSファイルには痕跡は残らない。

@import "_media";//_media.scssファイルの読み込み
@import "_color";
@import "_common";
@import "_module";

これで目的別に作成したSCSSファイルを読み込める。

変数

色やフォントサイズなど、基準を決めて使いまわす時に便利。

$brown: #76634c;

こうして

.class {
  color: $brown;
}

こんな風に使う

.class {
  color:#76634c;
}

こうなる

ソースマップを使って一気にクラスを定義する

テーマカラーを決めること、よくあると思います。

$cate-colors: (
	'a': #5eafa7,
	'b': #f29a63,
	'c': #7096ce,
	'd': #d68498,
	'e': #9c87ba,
) !default;
//単発
.tnpt {
	background: map-get($cate-colors-sec, a);
}
//eachで一括
@each $key, $color in $cate-colors {
	.cate-#{$key} {
		color: $color;
	}
}

こう書くと

.tnpt {
  color: #5eafa7; }

.cate-a {
  color: #5eafa7; }

.cate-b {
  color: #f29a63; }

.cate-c {
  color: #7096ce; }

.cate-d {
  color: #d68498; }

.cate-e {
  color: #9c87ba; }

こうなる。
単発の方はfunctionに登録するとソースが綺麗になるときもある。

//登録、登録〜♪
@function colors($key){
  @return map-get($cate-colors,$key)
};

.tnpt {
    color: colors(a);
}

ソースマップの色を参照した色を作る

背景色はテーマカラーを薄くしたやつがいい、あると思います。

$cate-colors-bg: (
	'a': lighten(map-get($cate-colors, 'a'), 30%),
	'b': lighten(map-get($cate-colors, 'b'), 30%),
	'c': lighten(map-get($cate-colors, 'c'), 30%),
	'd': lighten(map-get($cate-colors, 'd'), 30%),
	'e': lighten(map-get($cate-colors, 'e'), 30%),
) !default;

こんな感じで大丈夫。パーセントは適宜調整。

複数のソースマップを使ったeach処理

ちょっと無理やりな感じがあるけど、ソースマップのkeyが共通なら複数使っちゃうと楽な時がある

@each $key, $color in $cate-colors {
	.page-cate--#{$key} {
		.color {
			color: $color;
		}
		.bg {
			background: map-get($cate-colors-bg, #{$key});
		}
	}
}

メディアクエリを定義する

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

SNSシェア

このエントリーをはてなブックマークに追加

関連記事

  • 関連する記事はありません。

コメントを残す

メールアドレスが公開されることはありません。