SassでCSSを作成するサンプルです。
目次
サンプル | Sass サース |
変数を使用する | |
if文を使用する | |
for文を使用する | |
@mixin(ミックスイン)を使用する | |
入れ子の形式にする(子孫セレクタ) |
Sass サース
- Sassファイルをコンパイルしてcssファイルを作成します。
- scssファイルで変数やif文やfor文を使用できます。cssファイルではロジックが反映された状態になります。
- このページのサンプルは、SCSS記法です。拡張子が.scssです。
- 字下げで構文を作るSass記法があります。拡張子は.sassです。
- 以下は、Sassの公式サイトです。
https://sass-lang.com/
変数を使用する
$変数名 |
変数を使用する場合は、先頭に$を指定します。(test.scss)
$testRed: red;
$testBlue: blue;
.p1{
color:$testRed;
}
.p2{
color:$testBlue;
}
1,2行目は、変数を指定しています。
変換後
上記の変数が値に変換されています。(test.css)
.p1 {
color: red;
}
.p2 {
color: blue;
}
if文を使用する
@if 条件{ }@else if 条件{ }@else{ } |
@else ifと@elseは省略可能です。else ifは複数の指定ができます。
$test:2;
@if $test==1{
.p1{
color:red;
}
}@else if $test==2{
.p1{
color:yellow; //反映される
}
}@else{
.p1{
color:blue;
}
}
論理演算子のand
論理演算子(and/or/not)の使用も可能です。
$test:6;
@if $test==6 and $test < 10 {
.p1{
color:red; //反映される
}
}@else{
.p1{
color:blue;
}
}
3行目は、値は6かつ10より小さい場合にtrueになります。
論理演算子のor
$test:1;
@if $test==0 or $test < 10 {
.p1{
color:red; //反映される
}
}@else{
.p1{
color:blue;
}
}
3行目は、値は0または10より小さい場合にtrueになります。
論理演算子のnot
$test:1;
@if not ($test==0) {
.p1{
color:red; //反映される
}
}
3行目は、値が0ではない場合にtrueになります。
for文を使用する
for ループ変数 from 数値 through 数値{ } |
fromが開始でthroughが終了です。(test.scss)
@for $i from 1 through 3 {
.p#{$i} { font-size: 10px * $i; }
}
変換後
上記のループ文は以下のように変換されます。(test.css)
.p1 {
font-size: 10px;
}
.p2 {
font-size: 20px;
}
.p3 {
font-size: 30px;
}
@mixin(ミックスイン)を使用する
@mixin(ミックスイン)とは、css自体を変数化するイメージです。(test.scss)
@mixin test1 {
font-size: 20px;
background: blue;
}
.p1 {
@include test1;
}
.p2 {
@include test1;
}
呼び出すときは、@includeを使用します。
変換後
上記は以下のように変換されます。(test.css)
.p1 {
font-size: 20px;
background: blue;
}
.p2 {
font-size: 20px;
background: blue;
}
入れ子の形式にする(子孫セレクタ)
以下は、.p1がありその下に.span1とhoverがある入れ子の状態です。
.p1 {
.span1 {
color: red;
}
&:hover {
background: blue;
}
}
5行目は、擬似クラスのhoverの前に&を使用しています。
上記は以下のように変換されます。
.p1 .span1 {
color: red;
}
.p1:hover {
background: blue;
}
1行目は、空白区切りの子孫セレクタです。指定した子や孫にあたる要素を対象にします。
4行目の:hoverはマウスカーソルがあたったときにCSSが反映されます。
関連の記事