【初級編DAY21】CSSの上位互換！Sassを学習しよう
SassのSCSS文法について学んでいきます。
Sassとは？
■Sassとは■
CSSを拡張して扱いやすくしたスタイルシートのこと。Syntactically Awesome StyleSheetの略（直訳：文法的に素晴らしいスタイルシート）。CSSで記述するよりも圧倒的に早い。
※文法が二つある
SASS・・・インデントを主とした簡素な記法。セレクタやクラスの後に{ }を使わず、値の後の;を省略している。
SCSS・・・ネスト（入れ子）を主とした記法。スタイルの書き方はCSSとさほど変わらない。主流はこっち。
※文法が二つある
SASS・・・インデントを主とした簡素な記法。セレクタやクラスの後に{ }を使わず、値の後の;を省略している。
SCSS・・・ネスト（入れ子）を主とした記法。スタイルの書き方はCSSとさほど変わらない。主流はこっち。
入れ子の書き方
例 CSS
.lists {
list-style: none;
padding: 0;
margin: 0;
}
.lists li {
width: 25%;
text-align: center;
}
.lists li a {
color: #333;
font-size: 16px;
}
例 Sass
.lists {
list-style: none;
padding: 0;
margin: 0;
li{
width: 25%;
text-align: center;
a{
color: #333;
font-size: 16px;
}
}
}
クラス名.lists内にあるliタグ、その内にあるaタグにsccを当てる際の記述となる。
本来cssでliタグを指定する場合は「.lists li｛・・・」となり、またaタグについても「.lists li a｛・・・」となるところを、Sassでは中にタグをそのまま記述することで同様の処理となる。
子、孫要素の記述するのにcssよりもより簡単だといえる。
本来cssでliタグを指定する場合は「.lists li｛・・・」となり、またaタグについても「.lists li a｛・・・」となるところを、Sassでは中にタグをそのまま記述することで同様の処理となる。
子、孫要素の記述するのにcssよりもより簡単だといえる。
＆でつなげる擬似要素・クラスの書き方
＆でつなげることでこれまでの要素を継承することが可能です。
例 CSS
.lists li a:hover {
color: #da1e32;
}
.lists li a.active {
color: #da1e32;
}
例 Sass
.lists { ・・・親要素
li{・・・子要素
a{・・・孫要素
&:hover{ ・・・すべて継承し:hoverを付ける
color: #da1e32;
}
&.active{ ・・・すべて継承し.activeを付ける
color: #da1e32;
}
}
}
}
変数を使ってみよう
これまでJavaSprictなどでは変数を使用していたが、cssでは変数という概念がなかった。Sassでは変数を使用することが出来る。変数を使用することで、同じことを記述しなくていいなどのメリットがある。
■基本の記述■
＄変数名： 値；
例 Sass
$link-color-active: #da1e32;
li{
color: $link-color-active;
}
例 CSS
li {
color: #da1e32;
}
変数link-color-activeに #da1e32 を格納した。
実際に使用するときに、使いたいところに変数を入れることで同様の値が反映されているのがわかる。
変数を使用することでテーマカラーを変える際などに一つ一つを修正する必要がなくなり、保守性が高くなる。
変数をつかった四則演算
変数を使用して四則演算が可能となります。下記は一部のフォントを変数＋10pxとしていた時の例です。
例 Sass
例 CSS
a {
color: #333;
font-size: 24px;
}
変数＋値とすることで計算をしてくれました。四則演算が可能だということを覚えておきましょう♫
定義したスタイルを使いまわそう
@extendの使い方
@extendを使用することで一度定義したスタイルを使いまわすことが可能。
■基本記述■
定義する：通常通りクラス名でスタイル作成。
呼び出し：@expend クラス名;
呼び出し：@expend クラス名;
例 Sass
.button {
color: #333;
font-size: 16px;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
a{
font-size: $link-font-size + 10px;
@extend.button;
}
例 CSS
.button, .lists li a {
color: #333;
font-size: 16px;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
.buttonのスタイルが@extendを使用することで .lists li a タグにも使いまわすことが出来たね！
@mixinの使い方
@mixinは引数を設定することが出来、スタイルをひきつぎながら引数を使用して一部の変更が可能となる。
基本記述■
定義する：@mixin クラス名（引数：初期値）
呼び出す：@include クラス名（引数）
定義したものは呼び出さないと反映されないよ。
呼び出す：@include クラス名（引数）
定義したものは呼び出さないと反映されないよ。
例 Sass
@mixin button ( $font-size ) {
color: #333;
font-size: $font-size;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
a{
@include button( 14px );
}
例 CSS
.lists li a {
color: #333;
font-size: 14px;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
- @mixin で クラスbuttonを定義。その際に変数$font-sizeを引数として設定する。
- buttonスタイル内で引数に該当する値に$font-size;を入れておく
- 別のタグ、クラスにてbuttonのスタイルを使用したいときに、@includ クラス名(引数に当てる値);を入れる
- 引数に該当する箇所が変更され適用される。
aタグはfontsize14px、別のクラスは16px、ほかのスタイルは一緒・・・としたいときに便利だね！
@extendと@mixinの違い
@extend：作られたクラスの使い回しが可能。
@mixin ：作られたクラスで引数が設定でき、一部変更が可能の型。
@mixinを使ったメディアクエリの設定方法
マップ型の変数で定義をし、ブレイクポイントを設定する。
■マップ型変数とは？■
他にもいろいろな型がある。
👇こちらのサイト様がとても分かり易く勉強をさせて頂きました。👇
まずは実際のコードを見てみましょう♫
例 Sass
例 CSS
.header {
height: 100px;
}
@media screen and (max-width: 767px) {
.header {
height: 60px;
}
}
解説（Sass）
マップ型変数でブレイクポイントの定義
$breakpoints: (
) !default;
- マップ型変数を使用する 変数$breakpoints
- 変数に格納するデータを記載する。（key：value）
key →"sp","pc"
value→"screen and (max-width: 767px)","screen and (min-width: 768px)"
もっと細かく分けることも可能 - !default;を設定
■!default;とは？■
変数を宣言する際に「!default」を付けると、その変数が既に定義されていない場合にのみ、その値が代入されます。つまり、既存の値がない場合にのみ変数に値を設定するということです。
👇コチラのサイト様を参考にさせて頂きました。ありがとうございます。👇
@mixinで変数mq（メディアクエリ）を定義し呼び出した際に使える状態へ
/* @mixinを使用し、メディアクエリに使用する@mixinを定義。 */
/* ($breakpoint: sp) とすることで初期値をspに設定 */
@mixin mq($breakpoint: sp) {
/* map-get(マップ型変数, キー)で値を取得 */
@media #{map-get($breakpoints, $breakpoint)} {
/* この中をカスタマイズできる */
@content;
}
}
- @mixinを使用して定義
・変数 mq（略：メディアクエリ）
・引数 新しい変数$breakpointを設定し、初期値keyを"sp"としている。 - css @media screen and (max-width: 767px) {
と同様の記述文になるよう引数や変数の割り当てをする。
ここでのポイント
#{}について
インターポレーションという。
通常変数に入った文字列は値として認識されてエラーが出てしまう。
そのため文字列をセレクタやプロパティ名にも使うことができるようにするための記号。
👇こちらのサイト様を参考にさせて頂きました。ありがとうございます。👇
map-getについて
基本記述 map-get($map,$key)
$mapの中から$keyに対応した値を取得します。
上記が理解できると、下記のようになります。
@media #{map-get($breakpoints, $breakpoint)} {
・#{ ・・・ 文字をそのまま表示してね「例screen and (max-width: 767px)」
・map-get ・・・ 右に記載する$MAP変数の中から、$KEYに対応した値を取得してね
・($breakpoints, $breakpoint)・・・$MAP=変数$breakpoints、$KEY=引数$breakpoint
※ $breakpointは呼び出す際に設定されたKEYで１で設定した該当の内容が取得される。 - @content;
呼び出した際に記述した内容がここに反映される。引き継がれる。
使い方
