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";