2018-09-01 22:35:20 +02:00
|
|
|
---
|
|
|
|
|
title: Built-In Functions
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
In addition to allowing users to [define their own functions][], there are many
|
|
|
|
|
useful functions built right into Sass. These functions are called using the
|
|
|
|
|
normal CSS function syntax, with the addition of [special Sass argument
|
|
|
|
|
syntax][].
|
|
|
|
|
|
|
|
|
|
[define their own functions]: at-rules/function
|
|
|
|
|
[special Sass argument syntax]: at-rules/function#arguments
|
|
|
|
|
|
|
|
|
|
Sass's built-in functions are divided into a few categories:
|
|
|
|
|
|
|
|
|
|
* Any function that Sass doesn't recognize as built-in or user-defined is
|
|
|
|
|
treated as a [plain CSS function][].
|
|
|
|
|
* [Number functions][] operate on [numbers][], usually to perform some sort of
|
|
|
|
|
math.
|
|
|
|
|
* [String functions][] make it easy to combine, search, or split apart
|
|
|
|
|
[strings][].
|
|
|
|
|
* [Color functions][] generate new [colors][] based on existing ones, making it
|
|
|
|
|
easy to build color themes.
|
|
|
|
|
* [List functions][] access and modify values in [lists][].
|
|
|
|
|
* [Map functions][] make it possible to look up the value associated with a key
|
|
|
|
|
in a [map][], and much more.
|
|
|
|
|
* [Selector functions][] provide access to Sass's powerful selector engine.
|
|
|
|
|
* [Introspection functions][] expose the details of Sass's inner workings.
|
|
|
|
|
|
|
|
|
|
[plain CSS function]: functions/css
|
|
|
|
|
[Number functions]: functions/math
|
|
|
|
|
[numbers]: values/numbers
|
2018-10-24 02:45:14 +02:00
|
|
|
[String functions]: functions/string
|
2018-09-01 22:35:20 +02:00
|
|
|
[strings]: values/strings
|
2018-10-24 02:45:14 +02:00
|
|
|
[Color functions]: functions/color
|
2018-09-01 22:35:20 +02:00
|
|
|
[colors]: values/colors
|
2018-10-24 02:45:14 +02:00
|
|
|
[List functions]: functions/list
|
2018-09-01 22:35:20 +02:00
|
|
|
[lists]: values/lists
|
2018-10-24 02:45:14 +02:00
|
|
|
[Map functions]: functions/map
|
2018-09-01 22:35:20 +02:00
|
|
|
[map]: values/maps
|
2018-10-24 02:45:14 +02:00
|
|
|
[Selector functions]: functions/selector
|
2018-09-01 22:35:20 +02:00
|
|
|
[Introspection functions]: functions/meta
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<% function "if($condition, $if-true, $if-false)" do %>
|
2018-10-23 22:42:40 +02:00
|
|
|
Returns `$if-true` if `$condition` is [truthy][], and `$if-false` otherwise.
|
|
|
|
|
|
|
|
|
|
This function is special in that it doesn't even evaluate the argument that
|
|
|
|
|
isn't returned, so it's safe to call even if the unused argument would throw an
|
|
|
|
|
error.
|
|
|
|
|
|
2019-01-09 23:14:29 +01:00
|
|
|
[truthy]: at-rules/control/if#truthiness-and-falsiness
|
2018-10-23 22:42:40 +02:00
|
|
|
|
|
|
|
|
<% example(autogen_css: false) do %>
|
|
|
|
|
@debug if(true, 10px, 15px); // 10px
|
|
|
|
|
@debug if(false, 10px, 15px); // 15px
|
|
|
|
|
@debug if(variable-defined($var), $var, null); // null
|
|
|
|
|
===
|
|
|
|
|
@debug if(true, 10px, 15px) // 10px
|
|
|
|
|
@debug if(false, 10px, 15px) // 15px
|
|
|
|
|
@debug if(variable-defined($var), $var, null) // null
|
|
|
|
|
<% end %>
|
2018-09-01 22:35:20 +02:00
|
|
|
<% end %>
|
