SassでCSSを作成するサンプル

nas2020/12/02

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が反映されます。

関連の記事

CSSを記述する場所のサンプル

△上に戻る