mirror of
https://github.com/danog/sass-site.git
synced 2024-12-02 17:38:26 +01:00
77 lines
2.1 KiB
Plaintext
77 lines
2.1 KiB
Plaintext
---
|
|
title: Booleans
|
|
introduction: >
|
|
Booleans are the logical values `true` and `false`. In addition their literal
|
|
forms, booleans are returned by [equality](../operators/equality) and
|
|
[relational](../operators/relational) operators, as well as many built-in
|
|
functions like [`math.comparable()`](../modules/math#comparable) and
|
|
[`map.has-key()`](../modules/map#has-key).
|
|
---
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@use "sass:math";
|
|
|
|
@debug 1px == 2px; // false
|
|
@debug 1px == 1px; // true
|
|
@debug 10px < 3px; // false
|
|
@debug math.comparable(100px, 3in); // true
|
|
===
|
|
@use "sass:math"
|
|
|
|
@debug 1px == 2px // false
|
|
@debug 1px == 1px // true
|
|
@debug 10px < 3px // false
|
|
@debug math.comparable(100px, 3in) // true
|
|
<% end %>
|
|
|
|
You can work with booleans using [boolean operators][]. The `and` operator
|
|
returns `true` if *both* sides are `true`, and the `or` operator returns `true`
|
|
if *either* side is `true`. The `not` operator returns the opposite of a single
|
|
boolean value.
|
|
|
|
[boolean operators]: ../operators/boolean
|
|
|
|
<% example do %>
|
|
@debug true and true; // true
|
|
@debug true and false; // false
|
|
|
|
@debug true or false; // true
|
|
@debug false or false; // false
|
|
|
|
@debug not true; // false
|
|
@debug not false; // true
|
|
===
|
|
@debug true and true // true
|
|
@debug true and false // false
|
|
|
|
@debug true or false // true
|
|
@debug false or false // false
|
|
|
|
@debug not true // false
|
|
@debug not false // true
|
|
<% end %>
|
|
|
|
## Using Booleans
|
|
|
|
You can use booleans to choose whether or not to do various things in Sass. The
|
|
[`@if` rule][] evaluates a block of styles if its argument is `true`:
|
|
|
|
[`@if` rule]: ../at-rules/control/if
|
|
|
|
<%= partial 'code-snippets/example-if' %>
|
|
|
|
The [`if()` function][] returns one value if its argument is `true` and
|
|
another if its argument is `false`:
|
|
|
|
[`if()` function]: ../modules#if
|
|
|
|
<% example(autogen_css: false) do %>
|
|
@debug if(true, 10px, 30px); // 10px
|
|
@debug if(false, 10px, 30px); // 30px
|
|
===
|
|
@debug if(true, 10px, 30px) // 10px
|
|
@debug if(false, 10px, 30px) // 30px
|
|
<% end %>
|
|
|
|
<%= partial 'documentation/snippets/truthiness-and-falsiness' %>
|