1,059 views

この記事は最終更新から 2231日 が経過しています。

1. やりたいこと

前回の (56) 【Sass入門#1】sassでcssを簡潔に書く。 の続き。

Sassを使って CSSファイルの記述内容を整理整頓したい。

3. やってみる

(1) 変数を使う。

こんな SCSSファイルを作成した。
style.scss

$def-width: 300px;
div#box{
  width: $def-width;
  height: 100px;
}

このファイルを SASSで CSSに変換してみる。

sass -t expanded style.scss:style.css

こんな CSSファイルが出来た。
style.css

div#box {
  width: 300px;
  height: 100px;
}

(2) @mixinでテンプレートを利用

こんな SCSSファイルを作成した。
style.scss

@mixin my-block( $color, $bg-color, $border-width ){
  border: $border-width #000 solid;
  color: $color;
  background-color: $bg-color;
}
div#block1{
  @include my-block(#ff0, #222, 3px);
}
div#block2{
  @include my-block(#008, #ffe, 2px);
}

このファイルを SASSで CSSに変換してみる。

sass -t expanded style.scss:style.css

こんな CSSファイルが出来た。
style.css

div#block1 {
  border: 3px #000 solid;
  color: #ff0;
  background-color: #222;
}

div#block2 {
  border: 2px #000 solid;
  color: #008;
  background-color: #ffe;
}

(3) @extendで既存の定義を流用

こんな SCSSファイルを作成した。
style.scss

.my-blk{
  border: 2px #000 solid;
  border-radius: 10px;
  overflow: hidden;
}
.the-block1{
  @extend .my-blk;
  color: #f00;  
}

このファイルを SASSで CSSに変換してみる。

sass -t expanded style.scss:style.css

こんな CSSファイルが出来た。
style.css

.my-blk, .the-block1 {
  border: 2px #000 solid;
  border-radius: 10px;
  overflow: hidden;
}
.the-block1 {
  color: #f00;
}

一瞬「あれっ？反映されてないじゃん？」って迷ってしまったが、.my-blk の宣言の後ろに .the-block1 が追加されていた。

(4) @functionで関数を作る。

こんな SCSSファイルを作成した。
style.scss

@function get-half( $v ){
  @return round($v / 2);
}
$box-w: 600px;

div.blk{
  width: get-half($box-w);
  height: 100px;
}

このファイルを SASSで CSSに変換してみる。

sass -t expanded style.scss:style.css

こんな CSSファイルが出来た。
style.css

div.blk {
  width: 300px;
  height: 100px;
}

---