【SCSS】if文を使って条件分岐する
プログラミング勉強日記
2021年3月13日
SCSSとは
SCSSを説明する前に、Sassを知らないといけない。SassはCSSをより便利かつ効率的に書くことができる。SassにはSASS記法とSCSS記法の2種類の書き方がある。SCSSの拡張子は「.scss」となる。SassのメリットはCSSより記述量を減らすことができ、コードを再利用することができるところである。SCSSでは、変数を使うことができる。
$text-color: blue;
if文の書き方
if文を使うことで条件を満たす場合のみ、そのプロパティが設定される。
@if <条件> {
// 内容
}
if-else文もif文と同じように条件を満たす場合と満たさない場合でそれぞれのプロパティが設定される。
@if <条件> {
// 内容
}
@else if <条件> {
// 内容
}
@else {
// 内容
}
サンプルプログラム
HTML
<div class="colored">
sample
</div>
$color: blue;
.colored {
@if $color == blue {
color: white;
background-color: red;
}
@else {
color: white;
background-color: blue;
}
}
<div class="colored">
sample
</div>
$color: blue;
.colored {
@if $color == blue {
color: white;
background-color: red;
}
@else {
color: white;
background-color: blue;
}
}
参考文献
SCSSでのif文で条件分岐をする方法を現役エンジニアが解説【初心者向け】
Sassで「@if文の使い方」と条件分岐は「どういう時に使う」のか?
Author And Source
この問題について(【SCSS】if文を使って条件分岐する), 我々は、より多くの情報をここで見つけました https://qiita.com/mzmz__02/items/adce31fe48fc35897c1c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .