【Sass】SCSSの便利な機能を解説します。【mixinを覚えよう！】

こんにちは、たつきです(@tatsuuu_227)。

今回は、前回紹介したSassの他の便利な機能を紹介していきます。

前回はSassとは何か、使う準備を解説したのでまだ見ていな方はどうぞ！

難しいと思うかも知れませんが、例をあげながら簡単に説明していくので、

安心して読んでみてください。

それでは早速解説していきます。

今回紹介する機能

紹介する機能を最初に一覧でのせるので、参考にしてみてください。

こちらは今回で使えるようになります！

変数

Sassでは変数を定義する事ができます。

変数と聞くと難しいと思うかもしれませんが、意外と簡単です。

例をあげますので使い方をみていきましょう。

$text-color : red;
$content-width : 300px;

上に例を2つ紹介しました。

まずは変数の定義方法です。

まずは前回のようにscssファイルを用意して、そこに書いていきます。

『＄』最初にドルマークをつけて、自分で使いやすい『変数名』を書きます。

＄変数名 : 定義したい値 ;

これだけで、変数の定義が完了です！

そして定義した変数の使い方、メリットは

.container{
  width: $content-width ;
   h1{
    color: $text-color ;
 }
}

このように、変数名を書いて使い回しができます！

今は少ない量なのであまりわからないかもしれませんが、これが増えてきた時に

修正したい時などに、最初の変数定義した値を変えれば全て変更できるのです！

また、widthなどは

width: $content-width * 2;
width: $content-width / 2;

このように、論理演算子をつかって相対的に値を使えるので、とても便利です。

ぜひ使ってみてください。

@mixin, @include

次は、『@mixin』,『@include』です

よく使うシチュエーションとして、

imgやa、buttonなどを中央寄せにしたいけど、marginは付けられませんよね。

marginが付けられない理由や、対処法を知りたい方はこちらで説明してるのでぜひ！

中央寄せにするために

a{
  display: block;
  margin: 0 auto;
}

これをいちいち書かなければいけないですよね。

そこで、『@mixin』を使います！

@mixin block-center{
  display: block;
  margin: 0 auto;
}

このように使い回したいスタイルを定義します。

これを

a{
  @include block-center;
}

このように、『@include』を使って呼び出します。

また、引数を渡すこともできます！

こちらも説明していきます。

例えば中央寄せにして、上下のmarginもいじりたいなという時がありますよね。

@mixin block-center($margin){
  display: block;
  margin: $margin auto;
}

そんな時は（）を使って変数をかきます。

そして、呼び出す時に

a{
  @include block-center（10px）;
}

このように（）内に値を書くことで、marginの値だけ各々でいじれるようになります。

@mixinの定義のときに（@margin:5px）としておくと、引数を渡さなかった時は、

5pxになるようにできます！

@content

続いて最後の『@content』です。

@mixinは中身を使い回すという感じですが、@contentは

よく使うセレクタを使いまわせるというイメージです！

では、みていきましょう。

シチュエーションはメディアクエリの時を考えてみます。

@mixin media( $width: 780px ){
  @media screen and ( max-width: $width){
    @content
  }
}

そして、@includeで@mixinを呼び出して内容だけいじれるという感じです。

@include media{
  margin: 0;
}

こんな感じで、中だけいじれるようになります！

この例だと、引数を渡していないので、780pxが渡って

780px以下だと、aタグが左寄せになります。

まとめ

どうでしたか？

まだSassの機能はありますが、これで代表的な便利な機能は

使えるようになりました。

他だと『@extend』はたまに使いますが、今回と前回で説明した内容ぐらいが

よく使うものという感じです。

気になる方はこちらを参考にどうぞ

これで、Sassマスターです！

効率的なコーディングができるようになったので、これからも楽しんでコーディング

していきましょう。