2017.05.06

【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連発

＃CSS