【プロゲート】SASS Sass Iの学習内容まとめ

Sass I

1.入れ子構造

Sassとは
・Sass（サス）はCSSをより便利かつ効率的に書くことができる言語
・SassにはSASS記法とSCSS記法の2種類の書き方がある
・Progateでは主流であるScss記法を扱っていく
・また、ファイル拡張子も「.css」ではなく「.scss」となるので注意

Sassを使うメリット
・CSSより記述量を減らせる
・コードを再利用できる

入れ子構造
・まずは、Sassの中でも一番よく使う「入れ子構造」を見ていく
・Sassでは1つのセレクタの中に別のセレクタを入れ子にして指定することができる
・これにより同じセレクタを何度も書かなくて良いことになる

入れ子構造のメリット
・入れ子構造はより大規模なサイトになるほど効果が大きくなる
・特に入れ子構造を使うとクラス名の変更が楽になる

2.&記号 (1)

:hoverの復習
・カーソルが乗ったときの状態をhoverと言う
・CSSで、セレクタ:hoverとすることで、カーソルが乗ったときのCSSを指定することができる

:activeの復習
・セレクタにactiveを用いることで、要素がクリックされている間だけCSSを適用することができる
・セレクタ:activeというように指定する

&記号
・入れ子構造を使うことによって、「セレクタ:hover」を「&:hover」というように書き換えることができる
・この「&」はhoverだけでなく、activeなどにも使うことができる

3.&記号 (2)

特定要素のCSS指定
・2番目の<li>にのみCSSを適用させたい時は「要素.クラス名」とすることで指定ができる
・たくさんの要素がある中で、特定の要素にだけCSSを適用したい時によく使われる

特定要素の参照
・「特定要素の指定」は、Sassの&記号を用いると簡単に記述できる
・CSSでは同じ要素名を繰り返して書かなくてはいけないが、Sassの場合一度の記述で済むので、非常に見やすく簡単に実装できる

4.変数

変数とは
・変数とは、値を入れておく箱のようなものです
・変数は同じ値を繰り返し使うための便利なもの
・詳しくは次から学んでいきましょう。

変数の定義
・変数を使うには、まず変数を定義する必要がある
・変数は「$変数名: 値;」で定義する
・「左の変数に右の値を入れる」という意味で、これを代入と言う

変数の使い方
・変数の使い方は簡単で変数名（$progate-color）を記述するだけ
・使用したい箇所で変数名を記述することで、変数に格納されていた値（#26546a）が自動的に置き換えられる
・これにより、同じ値を繰り返し使えるようになり、変更も簡単になる

変数の定義位置
・変数は利用する箇所より前で定義しないと使えない
・スタイルシート（CSS）は上から下に読み込まれていくため、利用したい箇所の下で変数を定義してしまうと、読み込まれるタイミングでは変数がないものと判断されエラーが起きてしまう

変数のスコープ
・変数は利用できる範囲も指定できる
・この利用できる範囲のことを「スコープ」と言う
・読み込む位置より上部で変数を定義していても、スコープ外だと変数を読み込むことができない
・そのためまずは基本として入れ子構造の一番外で定義するようにする

5.mixin (1)

mixinとは
・Sassの中でもとても強力な機能である「mixin」について見ていく
・mixinとは、いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能
・これにより、同じコードを何度も書く必要がなくなり、無駄なコードを省略することができる

mixinの定義
・mixinを使うにはmixinを定義する必要がある
・mixinは下の図のように「@mixin mixin名 { コード }」とすることで定義できる

mixinの呼び出し
・次に、定義したmixinを使う方法を見ていく
・mixinは、使用したいSassファイルの中で「@include mixin名」とすることで使うことができる
・includeすると右の図のように呼び出した箇所にmixinのcssが代入される

6.mixin (2)

mixinと引数
・mixinには色などの情報を「引数（ひきすう）」として渡すことができる
・引数はプログラミング全般でよく使われ、追加情報のような役割を果たす
・mixinで色などの情報を引数で指定すると、mixin内ではその指定された情報を利用することができる

引数を使ってmixinにデータを渡してみよう
・前もってmixinの引数を指定しておくことで、includeから値を渡すことができる
・includeで指定した値（#ff0000）がmixinに渡され、mixin内の$colorに代入される
・このようにincludeごとに値を指定できるため、柔軟にコードを作成することができる

7.関数

関数とは
・関数は様々なプログラミング言語で必ずといっていいほど出てくる
・Sassの場合、関数を利用すると「特定の色から50%明るい色を使う」といったことが簡単にできる

主な便利な関数
・Sassでは様々な関数が用意されている
・よく使われる関数は、色を操作する関数
・色の関数だけでもいくつかの種類があるので確認しておく

8.import

import
・外部のファイルを読み込む「import」について見ていく
・読み込み先のファイル名の先頭には「_（アンダーバー）」を付ける必要がある
・ファイルを読み込むためには「@import "ファイル名"」とする

ファイル名の省略
・import時に指定するファイル名は、「_（アンダーバー）」と拡張子（.scss）を省略できる

importのよくある使い方
・importのよくある使い方として、変数をまとめたファイルを作成し、使いたいファイル内で読み込むというものがある
・こうすることで変数を記述した箇所がわかりやすくなるため、実際の開発現場でもよく使われる

9.目標物を確認しよう

目標物の確認
・一通りSassの基礎を学んだところで、以下の目標物を作り始めていく
・今回作成するのは「にんじゃわんこのホームページ」

10.プロフィールを作ってみよう

入れ子構造を活用する
・入れ子構造を活用してまずは「にんじゃわんこのプロフィール」を作る

11.学習言語一覧を作ってみよう

mixinを活用する
・次はmixinを活用して「にんじゃわんこの学習言語一覧」を作る
・mixinは同じスタイルを簡単に使いまわせることが特徴なので、学習言語一覧のように、コンテンツが増えていくようなものには非常に向いている

12.言語ごとの色を指定してみよう

引数を活用する
・引数を活用して「各言語の背景色」をつける
・引数を使わずに背景色をつけようとすると@includeの下に背景色を指定するスタイルを1つずつ書かなくてはいけなくなり、100言語あった場合100箇所にその記述が必要になる
・しかし、引数を使うとその100箇所の記述を減らすことができるので大変便利な機能

引数に変数を渡す
・mixinを呼び出す際に渡す引数には「#ff0000」などの値に加えて「$html」などの変数を記述することもできる
・変数の変更をするだけで、mixinで利用される値も引数を通して変わるため、少ない変更で大きな影響を与えられるようになる

13.関数を活用してみよう

関数を活用する
・関数は単体でも便利だが、引数と組み合わせるとより便利に使える

14.変数をまとめてみよう

変数とimportを活用する
・続いて変数とimportを活用して、より追加修正をしやすいコードにする
・変数の大きな特徴は、呼び出されている箇所が100箇所あったとしても「元の変数1つを変えるだけで100箇所すべての値を変更できる」修正力の高さ
・importもより大規模になればなるほど追加修正の際に役立つ

15.総合課題

・最後に総合課題にチャレンジ！
・いままで勉強したことをフル活用する

⇒完成作品