デイトラweb制作中級編 DAY7
nakano
Sassとは
SassとはCSSをより楽に書くための言語であり上位互換
・「SCSS」スタイル → CSSと同じようにカッコでくくる（主流）
・「SASS」スタイル → Rubyみたいなインデント形式
Sassの要点
①入れ子
②疑似要素とクラス
③変数
⑤mixinを使ったブレイクポイントの記述
Sassの書き方
①入れ子
入れ子のメリット
→ 書くコードの量が圧倒的に少なくなる
→ 構造が把握しやすい
例：親要素「.lists」class、子要素「li」タグ、孫要素「a」タグ
.lists {
list-style: none;
padding: 0;
margin: 0;
display: flex;
li {
width: 25%;
text-align: center;
a {
color: #333;
}
}
}②疑似要素とクラス
&を使うことで前の要素（親要素、子要素...）を引き継げる
例：親要素「.lists」、子要素「li」、孫要素「a」 、「hover」要素 、「active」class
.lists {
list-style: none;
padding: 0;
margin: 0;
display: flex;
li {
width: 25%;
text-align: center;
a {
color: #333;
&:hover {
color: #da1e32;
}
&.active {
color: #da1e32;
}
}
}
}③変数
変数を定義することで、値を変更したいときに一括でできる
例：「a」タグの色を「#333」にしたいとき
$link-color-base: #333;
a {
color: $link-color-base;
}変数を使うことで四則演算もできる
例：「a」タグの「font-size」を2px大きくしたいとき
$link-font-size: 16px;
a {
font-size: $link-font-size + 2px;
}④定義したスタイルの使い回し
・@extend → 一度定義したクラスを、他のクラスに継承する
・@mixin → @extend + 「引数」でカスタマイズ性が大幅にアップ（こっちをよく使う）
@extendの例：「a」タグと「p」タグに「button」classの機能をつけたいとき
.button {
color: #333;
font-size: 16px;
display: inline-block;
margin-top: 20px;
padding: 8px 16px;
border: 1px solid #333;
text-decoration: none;
}
a {
color: red;
@extend .button;
}
p {
color: blue;
@extend .button;
}@mixinの例：「a」タグは12px、「p」タグは14pxのfont-sizeで「button」の機能をつけたいとき
@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 {
color: red;
@include button( 12px );
}
p {
color: bule;
@include button( 14px );
}⑤mixinを使ったブレイクポイントの記述
1. ブレイクポイントを指定する
$pc: 1080px;
$tab: 768px;
$sp: 480px;
@mixin pc {
@media screen and (max-width: ($pc)) {
@content;
}
}
@mixin tab {
@media screen and (max-width: ($tab)) {
@content;
}
}
@mixin sp {
@media screen and (max-width: ($sp)) {
@content;
}
}2. 「@include」で呼び出す
.block {
width: 30%;
@include pc {
width: 50%;
}
@include tab {
width: 80%;
}
@include sp {
width: 100%;
}
}コンパイル（CSSに変換）した結果
.block {
width: 30%;
}
@media screen and (max-width: 1080px) {
.block {
width: 50%;
}
}
@media screen and (max-width: 768px) {
.block {
width: 80%;
}
}
@media screen and (max-width: 480px) {
.block {
width: 100%;
}
}
標準設定 → 「block」classの「width」が30%表示
1080px以下（pc） → 「block」classの「width」が50%表示
768px以下（タブレット） → 「block」classの「width」が80%表示
480px以下（スマホ） → 「block」classの「width」が100%表示
⑥関数（function）
独自の関数をつくる
例：
・変数「$link-font-size」を16px
・functionを「activeFontSize()」、引数を「$base-size」
・「$base-size」の定義 → 「$base-size」 + 2pxを返り値にする
・「a」タグに適用
$link-font-size: 16px;
@function activeFontSize($base-size){
@return $base-size + 2px;
}
a {
font-size: activeFontSize($link-font-size);
}関数と「return」による返り値の取得 → デイトラweb制作中級編 DAY1
まとめ
今回はSassについて学習しました！
Day7の中で一番大変だと思ったのは、mixinを使ったメディアクエリの設定です。
いろんな変数を定義して、頭が混乱したので今日はしっかり休みたいと思います。。。
