SCSSの文法で最も基本的であると思われるものをまとめてみました

Progateで勉強したSCSSの文法のまとめです。

「なんかcssをちょっと便利にしたもの」程度の理解しかなかったので、progateで勉強し、文法をまとめてみました。

入れ子構造

通常のcssであれば

.header {
  width: 100%;
}

.header  ul{
  padding: 10px;
}

と書いていたところを、

.header{
  width: 100%;
  
  ul{
    padding: 10px;
  }
}

というように入れ子にして書くことができます。

&記号

:hoverや:actionについても、&記号を使うことで入れ子構造のように書くことができます。

• 通常のcss

li {
  font-size: 15px;
}
li:hover{
  background-color: red;
}

*scss

li{
  font-size: 15px;

  &:hover{
    background-color: red;
  }
}

また、クラスなどによる特定要素の指定も&記号を使うことができます。

• 通常のcss

li {
  font-size: 15px;
}
li.second{
  background-color: red;
}

• scss

li{
  font-size: 15px;

  &.second{
    background-color: red;
  }
}

変数

「変数名: 値」で値を変数に格納し、再利用することができます。

$top-color: #f7f7f7;


.top{
  color: $top-color;
}

変数は{}内のスコープに限られているため、

.top{
  $text-color: #666666;
}

で定義された変数$text-colorは.top{}の外で使うことはできません。

また、変数を使う位置より、上で変数を定義しないと変数を読み込んでくれません。

なので、以下のコードはエラーとなります。

.top{
  color: $top-color;
}

$top-color: #f7f7f7;

mixin

スタイルの塊に名前をつけて再利用できるようにしたものです。例えば以下のように使います。

• mixinを使わない場合

.lesson-1{
  width; 300px;
  background-color: #ffffff;
  color: #333333;
}

.lesson-2{
  width; 300px;
  background-color: #ffffff;
  color: #999999;
}

• mixinの使い方

@mixin lesson {
  width; 300px;
  background-color: #ffffff;
}

.lesson-1{
  @include lesson;
  color: #333333;
}

.lesson-2{
  @include lesson;
  color: #999999;
}

@mixin mixin名 {～デザインの定義～} という構文で使います。

また、mixinには引数を渡すことができ、上記よりさらに短く書くことができます。

• 引数ありのmixin

@mixin lesson($text-color) {
  width; 300px;
  background-color: #ffffff;
  color: $text-color;
}

.lesson-1{
  @include lesson(#333333);
}

.lesson-2{
  @include lesson(#999999);
}

関数

scssでは便利な関数が用意されています。

例えばdarkenは第一引数に色を指定し、第二引数に割合(%)を指定すると、第一引数の色の何%か暗い色を返してくれます

$header-color: #f6f6f6;
.header{
  background-color: $header-color;
  color: darken($header-color, 20%);
}

半透明にするrgbaも関数の一つです。

import

importを使うことにより、別ファイルのscssを取り込むことができます。

例えば、変数だけを定義するファイルを作っておいて、それをスタイルを定義するファイルから読み込むなどとします。

ただし、読み込む方のファイル名は_variables.scssのように先頭に"_"を付けなければいけません。

@import "_variables.scss"  /*もしくは@import "variables" でもOK*/

こうすると、_variables.scssで定義された変数が読み込み先のscssからでも参照することができるようになります。

参考

prog-8.com

Sass&Compass徹底入門 CSSのベストプラクティスを効率よく実現するために (DESIGN & WEB TECHNOLOGY)