- 1. 前提
- 2. 変数
- 3. 入れ子の記述
- 4. 結果
1. 前提
.scss では、変数を使えるのです。これは都合がよい。
もとの .css で
body
{
width: 100%;
margin: 20px 0px 80px 0px;
background-color: #F8FFF8;
line-height: 110%;
color: #333344;
position: relative;
font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'ＭＳ ゴシック', sans-serif;
}
@media all and (max-device-width: 600px)
{
body
{
margin: 5px 5px;
background-color: #F8FFF8;
line-height: 110%;
color: #333344;
position: static;
font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'ＭＳ ゴシック', sans-serif;
}
}
というような記述をしているわけです。
画面のサイズによって <body>～</body> を書き分けているわけです。
background-color や line-height 等に同じ記述をしているのです。
これは冗長ですね。これ以降も出て来るので変数化したい。
また、body を２回書いていて、同じ記述が複数あるわけです。
これも１度で記述したい。
2. 変数
.scss では変数を使えます。
以下のように書けるわけです。
$normal_bg_color: #F8FFF8;
$normal_line_height: 110%;
$normal_text_color: #333344;
body
{
width: 100%;
margin: 20px 0px 80px 0px;
background-color: $normal_bg_color;
line-height: $normal_line_height;
color: $normal_text_color;
position: relative;
font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'ＭＳ ゴシック', sans-serif;
}
@media all and (max-device-width: 600px)
{
body
{
margin: 5px 5px;
background-color: $normal_bg_color;
line-height: $normal_line_height;
color: $normal_text_color;
position: static;
font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'ＭＳ ゴシック', sans-serif;
}
}
3. 入れ子の記述
@media ってのをメディアセレクタというらしいですが、.css では、メディアセレクタごとにセレクタを書く必要があるわけです。
.scss は、セレクタを入れ子にできるとのことで
$normal_bg_color: #F8FFF8;
$normal_line_height: 110%;
$normal_text_color: #333344;
body
{
width: 100%;
margin: 20px 0px 80px 0px;
background-color: $normal_bg_color;
line-height: $normal_line_height;
color: $normal_text_color;
position: relative;
font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'ＭＳ ゴシック', sans-serif;
@media all and (max-device-width: 600px)
{
margin: 5px 5px;
position: static;
}
}
と書けるはず。
4. 結果
上記の .scss をコンパイルした結果です。
body {
width: 100%;
margin: 20px 0px 80px 0px;
background-color: #F8FFF8;
color: #333344;
line-height: 110%;
position: relative;
font-family: 'Sawarabi Gothic', 'Rounded Mplus 1c', 'Noto Sans JP', 'Noto Sans Japanese', 'Mplus 1p', 'ＭＳ ゴシック', sans-serif;
}
@media all and (max-device-width: 600px) {
body {
margin: 5px 5px;
position: static;
}
}
意図通りの結果が得られました。
|
