diff options
author | ysds <ysds.code@gmail.com> | 2019-09-03 20:18:44 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-11-01 21:22:37 +0300 |
commit | 7bd70e54f2c02e0885b9da5d87a5caac5d963fae (patch) | |
tree | 6163fa05ab9689cd13f99f2174d6555abb3abfd8 /site | |
parent | ed4a4e60812ad2170d792493ea579c7019484923 (diff) |
Add add and subtract function
Diffstat (limited to 'site')
-rw-r--r-- | site/docs/4.3/getting-started/theming.md | 38 |
1 files changed, 38 insertions, 0 deletions
diff --git a/site/docs/4.3/getting-started/theming.md b/site/docs/4.3/getting-started/theming.md index 198a55da3a..ecc5895b13 100644 --- a/site/docs/4.3/getting-started/theming.md +++ b/site/docs/4.3/getting-started/theming.md @@ -227,6 +227,44 @@ You can also specify a base color with our color map functions: We use the `escape-svg` function to escape the `<`, `>` and `#` characters for SVG background images. These characters need to be escaped to properly render the background images in IE. +## Add and Subtract function + +We use the `add` and `subtract` functions instead of the CSS `calc` function. The primary purpose of these functions is to avoid errors when "unitless" 0 is given to the `calc` expression. + +Example where the calc is valid: + +{{< highlight scss >}} +$border-radius: .25rem; +$border-width: 1px; + +.element { + // Output calc(.25rem - 1px) is valid + border-radius: calc($border-radius - $border-width); +} + +.element { + // Output the same calc(.25rem - 1px) as above + border-radius: subtract($border-radius, $border-width); +} +{{< /highlight >}} + +Example where the calc is invalid: + +{{< highlight scss >}} +$border-radius: .25rem; +$border-width: 0; + +.element { + // Output calc(.25rem - 0) is invalid + border-radius: calc($border-radius - $border-width); +} + +.element { + // Output .25rem + border-radius: subtract($border-radius, $border-width); +} +{{< /highlight >}} + ## Sass options Customize Bootstrap 4 with our built-in custom variables file and easily toggle global CSS preferences with new `$enable-*` Sass variables. Override a variable's value and recompile with `npm run test` as needed. |