【Sass】はじめてのSass〜概要＋できること〜

フロントエンドエンジニアを目指す人なら一度は聞いたことがあるであろう「Sass」。（恥ずかしながら、自分は2021年1月に知りました・・・情報に敏感に生きる・・・）
「興味はあるけど導入できていない」、「聞いたことあるけど何ができるの？」、「聞いたこともないぞ・・・？」という方向けの内容です。過去の自分に言い聞かせる気持ちで、できるだけ丁寧に、かつ簡潔にまとめてみました！

##目次

1. 概要
   1. Sassとは
   2. メリット
   3. 書き方
   4. 環境準備

2. できること
   1. 変数
   2. 演算
   3. ネスト構造
   4. ファイル分割によるコードの整理

3. 最後に

##1. 概要
####1.1 Sassとは
CSSのメタ言語。

メタ言語とは、ある言語について何らかの記述をするための言語である。(Wikipediaより)

つまり、CSSを記述するための言語。

Sass　＝　Syntactically Awesome StyleSheet
Syntactically : 構文的に
Awesome : 驚くばかり
StyleSheet : スタイルシート

ということで、CSSを書くにあたり、構文的に驚くばかりの画期的で便利なスタイルシート。

####1.2 メリット
一度定義したスタイルを呼び出し、再利用できるため、作業効率向上を図ることができる。

• 何度も使いまわす
• 一部だけ変えた上で使用することができる
• 変数の値を変更すれば、その変数を使用している箇所全ての内容を修正できる

JavaScriptの場合、Vue.jsなどのフレームワークを使い、変数を使ったり、コンポーネントを登録することで、部品化して使い回すことができる。
今回紹介するSassを用いることで、CSSを記述する際に変数を用いたり、部品化して使いまわしたりすることで、作業効率を上げることができる！って感じ。

####1.3 書き方
２種類ある。

【SASS記法】
　{}や;を使わないため、効率的にコードを書くことができる。
　.sassという拡張子。
、、、CSSの書き方と少し異なるため、慣れるまで大変。
そんなことから、CSSとの互換性を持たせるために追加されたのがSCSS記法。

【SCSS記法】
　{}や;を使う。＝普段のCSSの記述方法と同じ！
　.scssという拡張子。
、、、これならCSSを学習した人にとって使いやすい。ということで、こちらが広く使われている。

####1.4 環境準備
使用するPCやエディターによって環境は異なるので、使用する環境に合わせて調べてみてください。ちなみに自分はAWS Cloud9、VSCodeで使用しています。共通しているのは、Sassをインストールして、コンパイル（翻訳）する流れです。

##2. できること
ポートフォリオにて使用したコードを用いて、できることを整理していく。
####2.1 変数
SCSS記法では、変数をつかうことができる。$マークを用いて変数を指定する。共通の色や数値を指定するのに便利。

.scss拡張子にて、以下のように変数を定義し、プロパティの値として使用する。

main.scss

$background-color:dimgray;

.btn {
    border-color:$background-color;
}

そしてコンパイルすると、、、
このようにCSSファイル記述される。

main.css

.btn {
  border-color: dimgray;
}

ちなみに、以下のように色についてはlighten（色,明るくする度合い）を選択肢、明るさ
を調整できる。（darkenもある。）

main.scss

$background-color:dimgray;

.btn {
    border-color:lighten($background-color,20%);
}

####2.2 演算
上記の変数を組み合わせることで、四則演算ができる。
レスポンシブデザインを実装する際に、画面幅が〜px以上では〜だけ値を足すなど、用途がありそう。

####2.3 ネスト構造
.scss拡張子にて、以下のように ネスト構造を記述。

main.scss

footer {
  p {
     font-size:1rem!important;
  }
}

そしてコンパイルすると、、、
このようにCSSファイル記述される。

main.css

footer p {
　font-size: 1rem !important;
}

個人的には、要素同士のまとまりや関係性が分かりやすく感じて気に入っている。しかし、個人開発ではファイル全体のp要素の文字サイズ等を指定することが多く、特定の要素内の物のみに適応させる場面がそこまでなく、まだ恩恵を受け切れていない。これから。

ちなみに親要素を参照することができ、&:hever{}を書く。

main.scss

.btn {
  border-color:$background-color;
  &:hover{
    color:red;
  }
}

そしてコンパイルすると、、、
このようにCSSファイル記述される。

main.css

.btn:hover {
  color: red;
}

####2.4 ファイルの分割によるコードの整理
ファイルを分割し、インポートすることができる。
現在は変数やスタイルのまとまりを記述するファイル、それらを使用するファイルに分けて整理している。

分割するファイルのファイル名の先頭に「_」をつける。これにより、このファイルはCSSとして書き出さないように設定している。
こんな感じで変数をまとめている。

_setting.scss

$background-color:dimgray;
$imgDir:"../img/";
$breakpoint-small: 576px;
$breakpoint-medium: 768px;
$breakpoint-large: 992px;

@mixin simple-color ($color){
  background-color:$background-color;
  color:$color;
}

＠mixinでテンプレを作成。スタイルを引用することができる。その際、引数を持たせ、コードの一部を書き換えて表示させることが可能。

_setting.scssを読み込む方のファイルには以下のように記述。

main.scss

@import "settings";

.header {
  height:2rem; 
  position:fixed;
  z-index:1;
  @include simple-color(red);
}

そしてコンパイルすると、、、
このようにCSSファイル記述される。

main.css

.header {
  height: 2rem;
  position: fixed;
  z-index: 1;
  background-color: dimgray;
  color: red;
}

@importでファイルを読み込んでいる。_と.scssはなくてOK。
@includeでmixinのスタイルを引用しており、その際に引数を指定することが必要。

##3. 最後に
ここまで読んでくださった方、ありがとうございました。

書いてみたものの、自分もSass超初心者なので、これからもたくさんコードを書き、自分の知識にしていきたいと思います。
備忘録として、そして自分と同じ初学者の方の力に少しでもなれるように、記事を書いていきたいと思います。よろしくお願いします。