【初心者向け】Sassをいい感じに活用する

初心者の方に向けて、Sassでよく使う機能を書きました。
機能の説明と、実際の活用事例をまとめました。

ネスト(入れ子)

ネストして記述することで、コンパイル時に親セレクタを頭につけてCSSを生成してくれます。

▼SCSS

#main{
  h1{ font-size: 70px;}
  p{ color:red; }
}

▼CSS

#main h1 { font-size: 70px;}
#main p { color:red; }

　

あまり深くネストしすぎると、詳細度(スタイルの優先順位)がややこしくなってしまうので、
個人的には大きめのセクションごとに、１つか２つまでネストする感じで使っています。
↓こんな感じで。

#section1 {
  background: orange;
  h1{ font-size: 70px;}
  p{ color:#ff; }
}

#section2 {
  background: #fff;
  h1{ font-size: 70px;}
}

親参照セレクタ &

&を記述することで、親のセレクタを自動で付与してくれるというもの。
疑似要素や擬似クラスをつける時に重宝します。

▼SCSS

a{
  text-decoration: none;

  &:hover {
    color: red;
  }

  &::before {
    content: "LINK";
  }

}

▼CSS

a {
  text-decoration: none;
}
a:hover {
  color: red;
}
a::before {
  content: "LINK";
}

　

変数

変数が使えます。共通して使う値を変数にすると便利です。

▼SCSS

$color-main: #ff00ff;

p { color: $color-main }
a { color: $color-main }

▼CSS

p { color: #ff00ff; }
a { color: #ff00ff; }

　

よく使うカラー、メディアクエリのブレイクポイントのサイズを変数化しておくとかなり便利です。

//colors
$clr-main: #2656a3;
$clr-sub: #174f88;
$clr-gray1: #eee;
$clr-gray2: #ccc;

//breakPoint
$break-pointSP: 350px
$break-pointPC: 980px

コメントアウト

コメントアウトが2種類あります。
// コメント　　　→　コンパイルされないので、Sassファイルでのみ表示されるコメントになります。
/* コメント */　→　 コンパイル後もCSSファイルに表示されます。

▼SCSS

//Sassファイルにのみ残るコメント
/* Sass,cssファイル共に残るコメント */

演算子

演算子がつかえます。使える演算子は

• 加算

• 減算

• 乗算
  / 除算　※除算の時は式を括弧でくくる必要あり

▼HTML

<div class="box">
  <p class="box-item">アイテム</p>
</div>

▼SCSS

.box {
   width:100px*6;

  .box-item {
    width: (95%/3) ;
  }
}

▼CSS

.box {
  width: 600px;
}

.box .box-item {
  width: 31.66667%;
}

　

100%とかを3で割る時便利だな−と思うけど、それ以外まだあんまり活用法を見いだせていません。
親要素を３つに分割するようなレイアウトをする時は便利かも？

▼HTML

<div class="box">
  <p class="box-item">アイテム</p>
  <p class="box-item">アイテム</p>
  <p class="box-item">アイテム</p>
</div>

▼SCSS

.box {
  background: orange;
	width:600px;
  text-align: center;

  .box-item {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid red;
    height: 20px;
    width: (95%/3) ;
    background :#fff;
  }
}

▼CSS

.box {
  background: orange;
  width: 600px;
  text-align: center;
}

.box .box-item {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid red;
  height: 20px;
  width: 31.66667%;
  background: #fff;
}

　

コードの再利用 @extend

コードの再利用が簡単にできます。
@extendはセレクタにつけたスタイルを継承する形になります。

呼び出し方は「 @extend セレクタ名(idは頭に#、classは頭に.)」

▼SCSS

.button {
    display: inline-block;
    border: 1px solid red;
    padding:20px;
    border-radius: 30px;
}
 
.button-red {
    @extend .button;

    background: red;
}

▼CSS

.button {
  display: inline-block;
  border: 1px solid red;
  padding:20px;
  border-radius: 30px;
}
 
.button-red {
  display: inline-block;
  border: 1px solid red;
  padding:20px;
  border-radius: 30px;

  background: red;
}

　

CSSは後から書いたプロパティが優先されるので、
一部の値だけ変更したい時は、@extendした後に記述して、上書きしてしまうと便利です。

.button-red {
    @extend .button;

    padding:80px;
    //paddingが上書きされる
}

コードの再利用 @mixin

コードの再利用に便利。
@extendと異なる点は、名前をつけて管理できる。引数が使える。

定義する時は@mixin mixin名
呼び出す時は@include mixin名

▼SCSS

@mixin button{
   display: inline-block;
   padding: 10px;
   border:1px solid red;
   background: #fff;
}
  
.button-red {
   @include button;
   background: red;
}

.button-blue {
   @include button;
   background: blue;
}

▼CSS

@mixin button{
   display: inline-block;
   padding: 10px;
   border:1px solid red;
   background: #fff;
}
  
.button-red {
   display: inline-block;
   padding: 10px;
   border:1px solid red;
   background: #fff;

   background: red;
}

.button-blue {
   display: inline-block;
   padding: 10px;
   border:1px solid red;
   background: #fff;

   background: blue;
}

引数がつかえるので、一部の値を変更しながらスタイルを継承する時に便利

@mixin button($color:#000) {
   margin: 10px;
   padding: 10px;
   font-size: 10px;
   background: $color;
}

変更したい値に変数をつけて、mixin名の後ろに（$変数名：初期値）
コロンをつけることで初期値が設定できる。何も値を入れない時は初期値が適用される。

@include button; 　→ 初期値の「 #000 」 になる
@include button(#fff); →$colorに「 #fff 」 が入る

※ちょっと注意　初期値を指定していない時

@mixin button($color) {
   background: $color;
}

@include button; 　→ エラーになる
@include button(#fff); →$colorに「 #fff 」 が入る

　

活用方法は、ほぼ同じスタイルで、色だけ変えたいボタンとか。

@mixin button($color:white) {
   display: inline-block;
   padding: 10px;
   border:1px solid red;
   background: $color;
}

.button-default {
@include button;
}
  
.button-red {
    @include button(red);
    //$colorにredが挿入される
}

.button-blue {
    @include button(blue);
    //$colorにblueが挿入される
}

ファイルの分割

ファイルの分割して管理を楽にすることができます。

共通部分を別ファイルに分けて
「@import ファイルのパス」でインクルードできるので、
CSSのルールと同じく上から順番に適用される

▼SCSS

こんなファイル構成にしておくと便利
Gulpを使っているなら、ファイル名の頭に_（アンダーバー）をつけたファイルはコンパイルされないようになります。

- style.scss
- common/_header.scss
- common/_common.scss
- page/about.scss
- page/contact.scss

一気にstyle.scssに@imoportで読み込んでおけば、

@import ./common/_header.scss
@import ./page/_about.scss
@import ./page/_contact.scss
@import ./common/_footer.scss

HTMLのhead部分で読み込むCSSはstyle.cssだけで済みます

@mixinや変数用のファイルも分割しておくと便利です。
（最初の方で@importしておかないと、エラーが出るのでそれだけ注意してください。）

メディアクエリの書き方

@mixinや変数を活用することで、メディアクエリの書き方を楽にすることができます。

あらかじめ、ブレイクポイントを変数で指定します。
メディアクエリを@mixinで使いまわせるように書いておきます。
その時、{}のなかに@contentを記述しておきます。

$break-pointPC: PC画面サイズ;

//スマホ用　　画面サイズが「$break-point」まではここを読み込む
@mixin mediaSP {
  @media screen and (max-width:$break-pointPC) {
    @content
  }
}

//PC用　　画面サイズが「$break-point」からはここを読み込む
@mixin mediaPC {
  @media screen and (min-width:$break-pointPC) {
    @content
  }
}

あとは、メディアクエリを使いたい箇所で、

body {
width:700px;

@include mediaPC {
  width:1200px;
}

と記述すれば@include mediaPCの中に書いたコードは@contentの中に渡されて

@media screen and (min-width:$break-pointPC) {
    width:1200px;
  }

こういう形でコンパイルしてくれます。