【Sass(SCSS)】よく使う便利なコード

Dreamweaver CC 2017でSassにも対応し、ますます広がっていくのかなというSass。
よく使う便利なコードをメモメモ。

▼変数

//set
$dark_grey:#333;
$lv_max:10;
$size_half:50%;
$margin_center:0 auto;

//usage
.sample{
    background: $dark_grey;
    z-index: $lv_max;
    width: $size_half;
    margin: $margin_center;
}

▼インターポレーション

//set
$img_path:'../common/images/';

//usage
.sample{
    background: url(#{$img_path}bg_img.png) 0 0 no-repeat;
}

▼Compassで「引数を使った@mixin」を駆使する

@import 'compass';

//usage
.sample{
    @include border-radius(3px 3px 0 0);
    @include box-shadow(#000 1px 1px 1px 1px inset);
    @include text-shadow(#000 1px 1px 1px);
    @include inline-block;
    @include opacity(0.7);
    @include background-size(100px 50px);
    @include box-sizing(boreder-box);
    @include transform(rotate(45deg));
}

▼Media Queries

//mixin
@mixin mq($breakpoint: mq_sp) {
	@if $breakpoint == mq_pc {
		@media screen and (min-width: 768px) {
			@content;
		}
	} @else if $breakpoint == mq_sp {
		@media screen and (max-width: 767px) {
			@content;
		}
	}
}
//usage
@include mq(mq_sp) {
	/* SP */
}
@include mq(mq_pc) {
	/* PC */
}

※コメントに日本語を使うとエラーが出る場合
1行目に下記を記載

@charset "utf-8";

【参考】Sassを極める！デザイナーがすぐ実践できる基本テクニック12連発
【参考】Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット