1
0
mirror of https://github.com/danog/sass-site.git synced 2024-12-14 18:37:35 +01:00
sass-site/source/documentation/at-rules/control/if.html.md.erb

128 lines
3.3 KiB
Plaintext
Raw Normal View History

2018-09-01 22:35:20 +02:00
---
title: "@if and @else"
table_of_contents: true
2019-03-05 01:24:31 +01:00
introduction: >
The `@if` rule is written `@if <expression> { ... }`, and it controls whether
or not its block gets evaluated (including emitting any styles as CSS). The
[expression](../../syntax/structure#expressions) usually returns either
[`true` or `false`](../../values/booleans)—if the expression returns `true`,
the block is evaluated, and if the expression returns `false` its not.
2018-09-01 22:35:20 +02:00
---
<%= partial 'code-snippets/example-if' %>
## `@else`
An `@if` rule can optionally be followed by an `@else` rule, written
`@else { ... }`. This rule's block is evaluated if the `@if` expression returns
`false`.
<% example do %>
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;
@mixin theme-colors($light-theme: true) {
@if $light-theme {
background-color: $light-background;
color: $light-text;
} @else {
background-color: $dark-background;
color: $dark-text;
}
2018-09-01 22:35:20 +02:00
}
.banner {
@include theme-colors($light-theme: true);
body.dark & {
@include theme-colors($light-theme: false);
}
2018-09-01 22:35:20 +02:00
}
===
$light-background: #f2ece4
$light-text: #036
$dark-background: #6b717f
$dark-text: #d2e1dd
@mixin theme-colors($light-theme: true)
@if $light-theme
background-color: $light-background
color: $light-text
@else
background-color: $dark-background
color: $dark-text
.banner
@include theme-colors($light-theme: true)
body.dark &
@include theme-colors($light-theme: false)
2018-09-01 22:35:20 +02:00
<% end %>
### `@else if`
You can also choose whether to evaluate an `@else` rule's block by writing it
`@else if <expression> { ... }`. If you do, the block is evaluated only if the
preceding `@if`'s expression returns `false` *and* the `@else if`'s expression
returns `true`.
In fact, you can to chain as many `@else if`s as you want after an `@if`. The
first block in the chain whose expression returns `true` will be evaluated, and
no others. If there's a plain `@else` at the end of the chain, its block will be
evaluated if every other block fails.
<% example do %>
@mixin triangle($size, $color, $direction) {
height: 0;
width: 0;
border-color: transparent;
border-style: solid;
border-width: $size / 2;
@if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
} @else {
@error "Unknown direction #{$direction}.";
}
2018-09-01 22:35:20 +02:00
}
.next {
@include triangle(5px, black, right);
}
===
@mixin triangle($size, $color, $direction)
height: 0
width: 0
border-color: transparent
border-style: solid
border-width: $size / 2
@if $direction == up
border-bottom-color: $color
@else if $direction == right
border-left-color: $color
@else if $direction == down
border-top-color: $color
@else if $direction == left
border-right-color: $color
@else
@error "Unknown direction #{$direction}."
.next
@include triangle(5px, black, right)
2018-09-01 22:35:20 +02:00
<% end %>
<%= partial 'documentation/snippets/truthiness-and-falsiness' %>