【Sass】SCSS記法チートシート TECH
Sassとは
「Syntactically Awesome StyleSheet」の略で、CSSを効率的に記述できるように設計・開発されたRuby製のCSSメタ言語のこと
Sass公式サイトSCSS記法とは
SCSS記法とはSassの書き方の1つで、SassにはSCSS記法とSASS記法があり、SCSS記法の方がCSSと互換性があるので使われることが多い。拡張子は.scss
にする。
ネスト構造
ネスト構造
入れ子構造(HTMLのような形)に記述
SCSS
div{
p{
color: red;
}
}
親セレクタ参照
親セレクタの名称を参照し記述
SCSS
a{
&:hover{
color: red;
}
}
ネームスペースネスト
CSSでネームスペースで記述しているもの(font-familyなど)をネスト構造で記述
SCSS
div{
font:{
family: sans-serif;
}
}
変数
変数
よく使う値を変数でまとめる
SCSS
$color: red;
p{
color: $color;
}
配列変数
よく使う値を配列変数でまとめる
SCSS
$color: red, green, blue;
p{
color: nth($color, 1);
}
$margin: (sp: 10px, pc: 20px);
p{
margin: map-get($margin, pc);
}
グループ変数
よく使うスタイルをまとめる
SCSS
@mixin max-screen($screen-size) {
@media screen and (max-width: $screen-size) {
@content;
}
}
p{
@include max-screen(560px){
font-size: 14px;
}
}
継承
インポート
分割したSCSSファイルをインポートする
SCSS
@import "basic";
継承
他の場所で使用したスタイルを継承する
SCSS
.item{
color: red;
}
.item2{
@extend .item;
}
文法
条件分岐
条件によってスタイルを変更する
SCSS
$position: left;
.item{
@if $position == 'left'{
position: absolute;
left: 0;
}@else{
position: relative;
}
}
繰り返し
スタイルを繰り返す
SCSS
@for $i from 1 through 3{
.item-#{$i}{
font-size: 10px * $i;
}
}
繰り返し(配列変数)
配列変数を使用した繰り返し
SCSS
$colors: red, green, blue;
@each $color in $colors{
.item-#{$color}{
color: $color;
}
}
演算・色
四則演算
スタイルの中で演算
SCSS
p{
font-size: 20px / 1.5;
}
文字列結合
スタイルの中で文字列結合
SCSS
$hello: 'Hello';
$world: 'World';
p::before{
content: $hello + $world;
}
明度の調整
ベースの色の明度を調整
SCSS
$color: red;
h1{
color: lighten($color, 20%);
}
p{
color: darken($color, 20%);
}
彩度の調整
ベースの色の彩度を調整
SCSS
$color: red;
h1{
color: saturate($color, 20%);
}
p{
color: desaturate($color, 20%);
}
透明度の調整
ベースの色の透明度を調整
SCSS
$color: red;
p{
color: rgba($color, .5);
}
色相の調整
ベースの色の色相を調整
SCSS
$color: red;
h1{
color: adjust-hue($color, 45deg);
}
色の補色&反転
ベースの色の補色or反転にする
SCSS
$color: red;
h1{
color: complement($color);
}
p{
color: invert($color);
}
色を混ぜる
ベースの色(2つ)を混ぜる
SCSS
$color1: red;
$color2: white;
h1{
color: mix($color1, $color2, 50%);
}
その他
コメントアウト
コメントを残す
SCSS
// 1行コメント
/*
複数行コメント(コンパイル後も残る)
*/
引用符の付け外し
文字列の引用符("")の付け外し
SCSS
$number: "10";
h1::before{
content: quote(Hello World);
}
p{
margin: unquote($number) + px;
}
大文字&小文字化
文字列の大文字or小文字化
SCSS
$text1: "hello world";
$text2: "HELLO WORLD";
h1::before{
content: to-upper-case($text1);
}
p::before{
content: to-lower-case($text2);
}
絶対値を返す
数値の絶対値を返す
SCSS
h1{
font-size: abs(-20px);
}
切り上げを返す
数値の切り上げを返す
SCSS
h1{
font-size: ceil(20.4px);
}
切り捨てを返す
数値の切り捨てを返す
SCSS
h1{
font-size: floor(20.5px);
}
四捨五入を返す
数値の四捨五入を返す
SCSS
h1{
font-size: round(20.4px);
}
p{
font-size: round(14.5px);
}