SASS-da @if direktiwasy
Eger belli bir şertler ýerine ýetirilende diňe kesgitli
stilleriň ulanylmagy zerur bolsa, onda biz
@if direktiwasyny ulanyarys, ol
false we null-den başga islendik
bahany gaýtaryp biler:
Aşakdaky mysala serediň:
#main-button {
@if 2 - 1 == 1 {
color: green;
}
@if (2+3) < 3 {
color: orange;
}
@if null {
color: red;
}
}
Kompilýasiýanyň netijesi:
#main-button {
color: green;
}
Şeýle-de, @if-den soň şert goýlanda,
birnäçe @else if
we bir @else ifadesi ulanylyp bilner.
$var: 20px;
a {
@if $var == 10px {
color: blue;
} @else if $var == 25px {
color: red;
} @else if $var == 10px+10px {
color: green;
} @else {
color: black;
}
}
Indi styles.css faýlyna serediň:
a {
color: green;
}
Aşakdaky kodyň kompilýasiýasynyň netijesi näme bolar?
$size: 20px;
$font-size: 14px;
body {
@if $size == $font-size {
background-color: #7e7ed8;
} @else if $size > $font-size {
color: #f1bbbb;
} @else {
color: #000000;
}
}
Aşakdaky kodyň kompilýasiýasynyň netijesi näme bolar?
$size: 20px;
$font-size: 14px;
.active {
@if $size < $font-size {
color: red;
} @else if $size > $font-size {
color: green;
} @else {
color: #000000;
}
}
.not-active {
@if $size == $font-size {
display:block ;
} @else {
display: none;
}
}