From b259a57e729612492b8e599ffa45698443e5bfb7 Mon Sep 17 00:00:00 2001 From: Black Mirror Date: Mon, 30 Apr 2018 12:10:43 +0200 Subject: [PATCH] display & box sizing mixins documentation --- docs/index.html | 439 ++++++++++++++++++++---------------- scss/mixins/_animation.scss | 1 + scss/mixins/_border.scss | 1 - scss/mixins/_box.scss | 98 +++++++- 4 files changed, 338 insertions(+), 201 deletions(-) diff --git a/docs/index.html b/docs/index.html index a97f86c..c97f506 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,23 +1,143 @@ Flavor-scss - v0.7.10

Flavor SCSS - Advanced and strongly type checked mixins with a Grid System

Greetings to

Core

functions

is-null

Flavor SCSS - Advanced and strongly type checked mixins with a Grid System
Greetings to
Core
functions
is-null
@function is-null($n) { ... }
Description
Checks if a value is null
Parameters
NameDescriptionTypeDefault value
$n
the value to check
Any—
Returns
Boolean
Used by
Author
  • blackmirror1980
is-defined
@function is-defined($d) { ... }
Description
Checks if a value is defined
Parameters
NameDescriptionTypeDefault value
$d
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
Mixins - Animation
functions
is-animation-name
@function is-defined($d) { ... }
Description
Checks if a value is defined
Parameters
NameDescriptionTypeDefault value
$d
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
Mixins - Animation
functions
is-animation-name
@function is-animation-name($an) { ... }
Description
Checks if animation name is string or animation-name-mode (none, inherit, initial)
Parameters
NameDescriptionTypeDefault value
$an
the animation name
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-time
@function is-animation-time($at) { ... }
Description
Checks if animation time is a correct time value
Parameters
NameDescriptionTypeDefault value
$at
the animation time
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-direction
@function is-animation-name($an) { ... }
Description
Checks if animation name is string or animation-name-mode (none, inherit, initial)
Parameters
NameDescriptionTypeDefault value
$an
the animation name
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-direction
@function is-animation-direction($ad) { ... }
Description
Checks if animation direction is a correct direction value
Parameters
NameDescriptionTypeDefault value
$ad
the animation direction
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-iteration-count
@function is-animation-direction($ad) { ... }
Description
Checks if animation direction is a correct direction value
Parameters
NameDescriptionTypeDefault value
$ad
the animation direction
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-iteration-count
@function is-animation-iteration-count($aic) { ... }
Description
Checks if animation iteration count is a correct iteration count value (integer or infinite, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$aic
the animation iteration count
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-fill-mode
@function is-animation-fill-mode($afm) { ... }
Description
Checks if animation fill mode is a correct fill mode value (integer or none, forwards, backwards, both, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$afm
the animation fill mode
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-play-state-modes
@function is-animation-play-state-modes($aps) { ... }
Description
Checks if animation play state is a correct play state value (paused, running, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$aps
the animation play state
String—
Returns
Boolean
Requires
Links
Author
  • blackmirror1980
is-animation-timing-function
@function is-animation-fill-mode($afm) { ... }
Description
Checks if animation fill mode is a correct fill mode value (integer or none, forwards, backwards, both, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$afm
the animation fill mode
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-timing-function
@function is-animation-timing-function($atf) { ... }
Description
Checks if animation timing function mode is a correct timing function (steps(), cubid-bezier(), linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$atf
the animation timing function
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
mixins
animation
@function is-animation-timing-function($atf) { ... }
Description
Checks if animation timing function mode is a correct timing function (steps(), cubid-bezier(), linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$atf
the animation timing function
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-animation-play-state-modes
@function is-animation-play-state-modes($aps) { ... }
Description
Checks if animation play state is a correct play state value (paused, running, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$aps
the animation play state
String—
Returns
Boolean
Requires
Links
Author
  • blackmirror1980
is-animation-time
@function is-animation-time($at) { ... }
Description
Checks if animation time is a correct time value
Parameters
NameDescriptionTypeDefault value
$at
the animation time
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
mixins
keyframe
@mixin keyframe($animation-name) { ... }
Description
Keyframe Mixin
Parameters
NameDescriptionTypeDefault value
$animation-name
the animation name
String—
Content
This mixin allows extra content to be passed (through the @content directive).
Example
Usage - Fade Out
@include keyframe(fade-out) {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
Output - Fade Out
@-webkit-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-moz-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-ms-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@-o-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
Usage - Change Color
@include keyframe(change-color) {
+  0% {
+    color: #000;
+  }
+  100% {
+    color: #FFF;
+  }
+}
Output - Change Color
@-webkit-keyframes change-color {
+  0% {
+    color: #000;
+  }
+  100% {
+    color: #FFF;
+  }
+}
+
+@-moz-keyframes change-color {
+  0% {
+    color: #000;
+  }
+  100% {
+    color: #FFF;
+  }
+}
+
+@-ms-keyframes change-color {
+  0% {
+    color: #000;
+  }
+  100% {
+    color: #FFF;
+  }
+}
+
+@-o-keyframes change-color {
+  0% {
+    color: #000;
+  }
+  100% {
+    color: #FFF;
+  }
+}
+
+@keyframes change-color {
+  0% {
+    color: #000;
+  }
+  100% {
+    color: #FFF;
+  }
+}
Author
  • blackmirror1980
animation
Throws
  • animation-name: #{$animation-name} is mandatory parameter
Requires
Author
  • blackmirror1980
keyframe
@mixin keyframe($animation-name) { ... }
Description
Keyframe Mixin
Parameters
NameDescriptionTypeDefault value
$animation-name
the animation name
String—
Content
This mixin allows extra content to be passed (through the @content directive).
Example
Usage - Fade Out
@include keyframe(fade-out) {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
Output - Fade Out
@-webkit-keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@-moz-keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@-ms-keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@-o-keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
Usage - Change Color
@include keyframe(change-color) {
-  0% {
-    color: #000;
-  }
-  100% {
-    color: #FFF;
-  }
-}
Output - Change Color
@-webkit-keyframes change-color {
-  0% {
-    color: #000;
-  }
-  100% {
-    color: #FFF;
-  }
-}
-
-@-moz-keyframes change-color {
-  0% {
-    color: #000;
-  }
-  100% {
-    color: #FFF;
-  }
-}
-
-@-ms-keyframes change-color {
-  0% {
-    color: #000;
-  }
-  100% {
-    color: #FFF;
-  }
-}
-
-@-o-keyframes change-color {
-  0% {
-    color: #000;
-  }
-  100% {
-    color: #FFF;
-  }
-}
-
-@keyframes change-color {
-  0% {
-    color: #000;
-  }
-  100% {
-    color: #FFF;
-  }
-}
Author
  • blackmirror1980
variables
[private] animation-direction-modes
$animation-direction-modes: array-concat((normal, reverse, alternate, alternate-reverse), $css-default-modes);
Description
Animation direction modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-timing-function-modes
$animation-timing-function-modes: array-concat((linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end), $css-default-modes);
Description
Animation timing function modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-fill-modes
$animation-fill-modes: array-concat((none, forwards, backwards, both), $css-default-modes);
Description
Animation fill modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-iteration-count-modes
$animation-iteration-count-modes: array-concat((infinite), $css-default-modes);
Description
Animation iteration count modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-name-modes
$animation-name-modes: array-concat((none), $css-default-modes);
Description
Animation name modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-play-state-modes
$animation-play-state-modes: array-concat((paused, running), $css-default-modes);
Description
Animation play state supported
Type
List
Author
  • blackmirror1980
Mixins - Appearance
functions
is-appearance-mode
Throws
  • animation-name: #{$animation-name} is mandatory parameter
Requires
Author
  • blackmirror1980
variables
[private] animation-direction-modes
$animation-direction-modes: array-concat((normal, reverse, alternate, alternate-reverse), $css-default-modes);
Description
Animation direction modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-fill-modes
$animation-fill-modes: array-concat((none, forwards, backwards, both), $css-default-modes);
Description
Animation fill modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-iteration-count-modes
$animation-iteration-count-modes: array-concat((infinite), $css-default-modes);
Description
Animation iteration count modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-timing-function-modes
$animation-timing-function-modes: array-concat((linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end), $css-default-modes);
Description
Animation timing function modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-name-modes
$animation-name-modes: array-concat((none), $css-default-modes);
Description
Animation name modes supported
Type
List
Used by
Author
  • blackmirror1980
[private] animation-play-state-modes
$animation-play-state-modes: array-concat((paused, running), $css-default-modes);
Description
Animation play state supported
Type
List
Author
  • blackmirror1980
Mixins - Appearance
functions
is-appearance-mode
@function is-appearance-mode($a) { ... }
Description
Checks if something is an appearance mode
Parameters
NameDescriptionTypeDefault value
$a
the appearance mode
String—
Returns
Boolean
Requires
Links
Author
  • blackmirror1980
mixins
appearance
@function is-background-position($bp) { ... }
Description
Checks if something is a background position value
Parameters
NameDescriptionTypeDefault value
$bp
the background position value/values
String or Array—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-background-repeat
@function is-background-repeat($br) { ... }
Description
Checks if something is a background repeat value
Parameters
NameDescriptionTypeDefault value
$br
the background repeat value
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-background-size
@function is-background-position($bp) { ... }
Description
Checks if something is a background position value
Parameters
NameDescriptionTypeDefault value
$bp
the background position value/values
String or Array—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-background-size
@function is-background-size($bs) { ... }
Description
Checks if something is a background size value
Parameters
NameDescriptionTypeDefault value
$bs
the background size value/values
String or Array—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
mixins
background
@function is-background-size($bs) { ... }
Description
Checks if something is a background size value
Parameters
NameDescriptionTypeDefault value
$bs
the background size value/values
String or Array—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
is-background-repeat
@function is-background-repeat($br) { ... }
Description
Checks if something is a background repeat value
Parameters
NameDescriptionTypeDefault value
$br
the background repeat value
String—
Returns
Boolean
Requires
Used by
Links
Author
  • blackmirror1980
mixins
background
Output Shorthand
.background-element {
   background: transparent url('http://test.com/image.png') 0 0/cover no-repeat padding-box border-box fixed;
-}
Requires
Author
  • blackmirror1980
variables
[private] background-size-modes
$background-size-modes: array-concat((auto, cover, contain), $css-default-modes);
Description
Background size modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-repeat-modes
$background-repeat-modes: array-concat((repeat, repeat-x, repeat-y, no-repeat), $css-default-modes);
Description
Background repeat modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-position-vertical-modes
$background-position-vertical-modes: array-concat((top, center, bottom), $css-default-modes);
Description
Background position vertical modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-attachment-modes
$background-attachment-modes: array-concat((scroll, fixed, local), $css-default-modes);
Description
Background attachment modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-position-horizontal-modes
$background-position-horizontal-modes: array-concat((left, center, right), $css-default-modes);
Description
Background position horizontal modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-image-modes
$background-image-modes: array-concat((none), $css-default-modes);
Description
Background image modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-origin-clip-modes
$background-origin-clip-modes: array-concat((border-box, padding-box, content-box), $css-default-modes);
Description
Background origin and background clip modes
Type
List
Used by
Author
  • blackmirror1980
Mixins - Border
functions
is-border-mode
@function is-border-mode($bm) { ... }
Description
Checks if something is border mode value (none, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$bm
the border mode value
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-border-style
@function is-border-style($bs) { ... }
Description
Checks if something is border style mode
Parameters
NameDescriptionTypeDefault value
$bs
the border style mode
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-border-radius-value
@function is-border-radius-value($br) { ... }
Description
Checks if something is border radius value
Parameters
NameDescriptionTypeDefault value
$br
the border radius value
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
mixins
border-radius
Requires
Author
  • blackmirror1980
variables
[private] background-repeat-modes
$background-repeat-modes: array-concat((repeat, repeat-x, repeat-y, no-repeat), $css-default-modes);
Description
Background repeat modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-origin-clip-modes
$background-origin-clip-modes: array-concat((border-box, padding-box, content-box), $css-default-modes);
Description
Background origin and background clip modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-position-vertical-modes
$background-position-vertical-modes: array-concat((top, center, bottom), $css-default-modes);
Description
Background position vertical modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-attachment-modes
$background-attachment-modes: array-concat((scroll, fixed, local), $css-default-modes);
Description
Background attachment modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-position-horizontal-modes
$background-position-horizontal-modes: array-concat((left, center, right), $css-default-modes);
Description
Background position horizontal modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-image-modes
$background-image-modes: array-concat((none), $css-default-modes);
Description
Background image modes
Type
List
Used by
Author
  • blackmirror1980
[private] background-size-modes
$background-size-modes: array-concat((auto, cover, contain), $css-default-modes);
Description
Background size modes
Type
List
Used by
Author
  • blackmirror1980
Mixins - Border
mixins
border-right
@mixin border-right() { ... }
Description
Border right mixin
Parameters
None.
Example
Usage
.border-element {
+  @include border-right(1px null red);
+}
Output
.border-element {
+  border-right: 1px solid red;
+}
Requires
See
Author
  • blackmirror1980
border-radius
Output
.border-radius-element {
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px;
-}
Requires
Links
Author
  • blackmirror1980
border-left
@mixin border-left() { ... }
Description
Border left mixin
Parameters
None.
Example
Usage
.border-element {
-  @include border-left(1px null red);
-}
Output
.border-element {
-  border-left: 1px solid red;
-}
Requires
See
Author
  • blackmirror1980
border-left-radius
Requires
Links
Author
  • blackmirror1980
border-bottom-radius
@mixin border-bottom-radius($br: 0) { ... }
Description
Border bottom radius mixin
Parameters
NameDescriptionTypeDefault value
$br
the border radius
Size0
Example
Usage
.border-radius-element {
+  @include border-bottom-radius(15px);
+}
Output
.border-radius-element {
+  border-bottom-left-radius: 15px;
+  border-bottom-right-radius: 15px;
+}
Requires
Links
Author
  • blackmirror1980
border-left-radius
@mixin border-left-radius($br: 0) { ... }
Description
Border left radius mixin
Parameters
NameDescriptionTypeDefault value
$br
the border radius
Size0
Example
Usage
.border-radius-element {
   @include border-left-radius(15px);
 }
Output
.border-radius-element {
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
-}
Requires
Links
Author
  • blackmirror1980
border-bottom
@mixin border-bottom() { ... }
Description
Border bottom mixin
Parameters
None.
Example
Usage
.border-element {
-  @include border-bottom(1px null red);
+}
Requires
Links
Author
  • blackmirror1980
border-left
@mixin border-left() { ... }
Description
Border left mixin
Parameters
None.
Example
Usage
.border-element {
+  @include border-left(1px null red);
 }
Output
.border-element {
-  border-bottom: 1px solid red;
+  border-left: 1px solid red;
 }
Requires
See
Author
  • blackmirror1980
border
Output
.border-element {
   border-top: 1px solid red;
-}
Requires
See
Author
  • blackmirror1980
border-right
@mixin border-right() { ... }
Description
Border right mixin
Parameters
None.
Example
Usage
.border-element {
-  @include border-right(1px null red);
+}
Requires
See
Author
  • blackmirror1980
border-bottom
@mixin border-bottom() { ... }
Description
Border bottom mixin
Parameters
None.
Example
Usage
.border-element {
+  @include border-bottom(1px null red);
 }
Output
.border-element {
-  border-right: 1px solid red;
-}
Requires
See
Author
  • blackmirror1980
border-bottom-radius
@mixin border-bottom-radius($br: 0) { ... }
Description
Border bottom radius mixin
Parameters
NameDescriptionTypeDefault value
$br
the border radius
Size0
Example
Usage
.border-radius-element {
-  @include border-bottom-radius(15px);
-}
Output
.border-radius-element {
-  border-bottom-left-radius: 15px;
-  border-bottom-right-radius: 15px;
-}
Requires
Links
Author
  • blackmirror1980
variables
[private] border-modes
$border-modes: array-concat((none), $css-default-modes);
Description
Border modes
Type
List
Used by
Author
  • blackmirror1980
[private] border-styles
$border-styles: array-concat((none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), $css-default-modes);
Description
Border style modes
Type
List
Used by
Author
  • blackmirror1980
Types - Angle
functions
is-angle
Requires
See
Author
  • blackmirror1980
functions
is-border-style
@function is-border-style($bs) { ... }
Description
Checks if something is border style mode
Parameters
NameDescriptionTypeDefault value
$bs
the border style mode
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-border-mode
@function is-border-mode($bm) { ... }
Description
Checks if something is border mode value (none, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$bm
the border mode value
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-border-radius-value
@function is-border-radius-value($br) { ... }
Description
Checks if something is border radius value
Parameters
NameDescriptionTypeDefault value
$br
the border radius value
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
variables
[private] border-styles
$border-styles: array-concat((none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset), $css-default-modes);
Description
Border style modes
Type
List
Used by
Author
  • blackmirror1980
[private] border-modes
$border-modes: array-concat((none), $css-default-modes);
Description
Border modes
Type
List
Used by
Author
  • blackmirror1980
Mixins - Box
mixins
reset-inline-block
@mixin reset-inline-block() { ... }
Description
Reset inline-block mixin (useful to fix those annoying auto margins between inline-block children elements
Parameters
None.
Used by
Author
  • blackmirror1980
display
@mixin display($dm, $auto-reset-inline-block: false) { ... }
Description
Display mixin
Parameters
NameDescriptionTypeDefault value
$dm
the display mode
String—
$auto-reset-inline-block
the display mode
Stringfalse
Example
Usage
.display-element {
+  @include display(block);
+}
Output
.display-element {
+  display: block;
+}
Usage inline-block
.display-element {
+  @include display(inline-block);
+}
Output inline-block
.display-element {
+  display: inline-block;
+}
Usage inline-block with auto reset
.display-element {
+  @include display(inline-block, true);
+}
Output inline-block with auto reset
.display-element {
+  display: inline-block;
+  letter-spacing: -.3em;
+  line-height: 0;
+  text-rendering: optimizeSpeed;
+
+  * {
+    letter-spacing: initial;
+    line-height: initial;
+  }
+}
Requires
Author
  • blackmirror1980
box-sizing
@mixin box-sizing($bs) { ... }
Description
Box sizing mixin
Parameters
NameDescriptionTypeDefault value
$bs
the box sizing mode
String—
Example
Usage
.box-sizing-element {
+  @include box-sizing(content-box);
+}
Output
.box-sizing-element {
+  box-sizing: content-box;
+}
Requires
Author
  • blackmirror1980
functions
is-display-mode
@function is-display-mode($dm) { ... }
Description
Checks if something is a correct display mode value
Parameters
NameDescriptionTypeDefault value
$dm
the display mode
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-box-sizing-mode
@function is-box-sizing-mode($bs) { ... }
Description
Checks if something is box sizing mode
Parameters
NameDescriptionTypeDefault value
$bs
the box sizing mode
String—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
variables
[private] display-modes
$display-modes: array-concat((none, inline, block, inline-block, flex, inline-flex, table, inline-table, table-caption, table-header-group, table-row-group, table-column-group, table-footer-group, table-row, table-column, table-cell, list-item, run-in), $css-default-modes);
Description
Display modes
Type
List
Used by
Author
  • blackmirror1980
[private] box-sizing-modes
$box-sizing-modes: array-concat((content-box, border-box), $css-default-modes);
Description
Box sizing modes
Type
List
Used by
Author
  • blackmirror1980
Types - Angle
functions
is-angle
@function is-angle($a) { ... }
Description
Checks if a value is an angle value
Parameters
NameDescriptionTypeDefault value
$a
the value to check
Number (with unit)—
Returns
Boolean
Example
Usage
.element {
   $a: 30deg;
@@ -814,16 +869,7 @@
   transform: rotate(30deg);
 }
Requires
Author
  • blackmirror1980
variables
[private] angle-units
$angle-units: (deg, rad, grad, turn);
Description
Angle units supported
Type
List
Used by
Author
  • blackmirror1980
Types - Array
functions
is-array
@function is-array($a) { ... }
Description
Checks if a value is an array/list
Parameters
NameDescriptionTypeDefault value
$a
the value to check
List or Array—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
array-contains
@function array-contains($a, $i) { ... }
Description
Checks if an array/list contains specified item
Parameters
NameDescriptionTypeDefault value
$a
the array/list
List or Array—
$i
the item
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
array-concat
@function is-array($a) { ... }
Description
Checks if a value is an array/list
Parameters
NameDescriptionTypeDefault value
$a
the value to check
List or Array—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
array-concat
@function array-join($a, $sep: ',') { ... }
Description
Joins an array/list in a string with the specified separator
Parameters
NameDescriptionTypeDefault value
$a
the array/list
List or Array—
$sep
the sparator
String','
Returns
String
Author
  • blackmirror1980
Types - Boolean
functions
is-boolean
@function array-join($a, $sep: ',') { ... }
Description
Joins an array/list in a string with the specified separator
Parameters
NameDescriptionTypeDefault value
$a
the array/list
List or Array—
$sep
the sparator
String','
Returns
String
Author
  • blackmirror1980
array-contains
@function array-contains($a, $i) { ... }
Description
Checks if an array/list contains specified item
Parameters
NameDescriptionTypeDefault value
$a
the array/list
List or Array—
$i
the item
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
Types - Boolean
functions
is-boolean
@function is-boolean($b) { ... }
Description
Checks if a value is a boolean value
Parameters
NameDescriptionTypeDefault value
$b
the value to check
Boolean—
Returns
Boolean
Requires
Author
  • blackmirror1980
Types - Color
functions
is-color
@function is-color($c) { ... }
Description
Checks if a value is a color value
Parameters
NameDescriptionTypeDefault value
$c
the value to check
Color—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-css-color
@function is-css-color($c) { ... }
Description
Checks if a value is a css color value (including transparent, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$c
the value to check
Color—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
variables
[private] color-modes
$color-modes: array-concat((transparent), $css-default-modes);
Description
Color modes supported
Type
List
Used by
Author
  • blackmirror1980
Types - Common
functions
is-absolute-length
@function is-absolute-length($l) { ... }
Description
Checks if a length value has an absolute length unit
Parameters
NameDescriptionTypeDefault value
$l
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-calc-length
@function is-css-color($c) { ... }
Description
Checks if a value is a css color value (including transparent, initial, inherit)
Parameters
NameDescriptionTypeDefault value
$c
the value to check
Color—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
variables
[private] color-modes
$color-modes: array-concat((transparent), $css-default-modes);
Description
Color modes supported
Type
List
Used by
Author
  • blackmirror1980
Types - Common
functions
is-css-default
@function is-css-default($cd) { ... }
Description
Checks if a value is a css default mode (initial, inherit)
Parameters
NameDescriptionTypeDefault value
$cd
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-calc-length
@function is-calc-length($cl) { ... }
Description
Checks if a value is a css calc length value
Parameters
NameDescriptionTypeDefault value
$cl
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
get-calc-length-expression
@function get-calc-length-expression($cl) { ... }
Description
Returns the css expression included in a css calc length value
Parameters
NameDescriptionTypeDefault value
$cl
the value to check
Any—
Returns
Css-expression
Requires
Author
  • blackmirror1980
strip-unit
@function strip-unit($v) { ... }
Description
Strips the unit from a value.
Parameters
NameDescriptionTypeDefault value
$v—Number—
Returns
Number (unitless)
Example
Usage
$dimension: strip-unit(10em);
Result
$dimension: 10;
Author
  • blackmirror1980
is-length-mode
@function is-length-mode($lm) { ... }
Description
Checks if a value is a css length mode supported
Parameters
NameDescriptionTypeDefault value
$lm
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-size
@function get-calc-length-expression($cl) { ... }
Description
Returns the css expression included in a css calc length value
Parameters
NameDescriptionTypeDefault value
$cl
the value to check
Any—
Returns
Css-expression
Requires
Author
  • blackmirror1980
is-size
@function is-size($s) { ... }
Description
Checks if a value is a CSS size.
Parameters
NameDescriptionTypeDefault value
$s—Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-relative-length
@function is-relative-length($l) { ... }
Description
Checks if a length value has a relative length unit
Parameters
NameDescriptionTypeDefault value
$l
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-length
@function is-size($s) { ... }
Description
Checks if a value is a CSS size.
Parameters
NameDescriptionTypeDefault value
$s—Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-length-mode
@function is-length-mode($lm) { ... }
Description
Checks if a value is a css length mode supported
Parameters
NameDescriptionTypeDefault value
$lm
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-length
@function is-length($l) { ... }
Description
Checks if a value is a valid CSS length
Relative, Absolute, Calc or Length Mode
Parameters
NameDescriptionTypeDefault value
$l—Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-css-default
@function is-css-default($cd) { ... }
Description
Checks if a value is a css default mode (initial, inherit)
Parameters
NameDescriptionTypeDefault value
$cd
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
variables
[private] absolute-length-units
$absolute-length-units: (cm, mm, in, px, pt, pc);
Description
Absolute length units supported
Type
List
Used by
Author
  • blackmirror1980
[private] css-size-modes
$css-size-modes: array-concat((auto, fill, fill-available, available, fit-content, min-content, max-content), $css-default-modes);
Description
CSS size/length modes supported
Type
List
Used by
See
Author
  • blackmirror1980
[private] relative-length-units
$relative-length-units: (em, ex, ch, rem, vw, vh, vmin, vmax);
Description
Relative length units supported
Type
List
Used by
Author
  • blackmirror1980
[private] length-modes
$length-modes: array-concat((auto), $css-default-modes);
Description
Length modes supported (auto and $css-default-modes)
Type
List
Used by
See
Author
  • blackmirror1980
[private] css-default-modes
$css-default-modes: (initial, inherit);
Description
CSS default modes supported (shared between all modes arrays/lists)
Type
List
Used by
Author
  • blackmirror1980
Types - Frequency
functions
is-frequency
@function is-length($l) { ... }
Description
Checks if a value is a valid CSS length
Relative, Absolute, Calc or Length Mode
Parameters
NameDescriptionTypeDefault value
$l—Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
strip-unit
@function strip-unit($v) { ... }
Description
Strips the unit from a value.
Parameters
NameDescriptionTypeDefault value
$v—Number—
Returns
Number (unitless)
Example
Usage
$dimension: strip-unit(10em);
Result
$dimension: 10;
Author
  • blackmirror1980
is-absolute-length
@function is-absolute-length($l) { ... }
Description
Checks if a length value has an absolute length unit
Parameters
NameDescriptionTypeDefault value
$l
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
is-relative-length
@function is-relative-length($l) { ... }
Description
Checks if a length value has a relative length unit
Parameters
NameDescriptionTypeDefault value
$l
the value to check
Any—
Returns
Boolean
Requires
Used by
Author
  • blackmirror1980
variables
[private] absolute-length-units
$absolute-length-units: (cm, mm, in, px, pt, pc);
Description
Absolute length units supported
Type
List
Used by
Author
  • blackmirror1980
[private] relative-length-units
$relative-length-units: (em, ex, ch, rem, vw, vh, vmin, vmax);
Description
Relative length units supported
Type
List
Used by
Author
  • blackmirror1980
[private] css-size-modes
$css-size-modes: array-concat((auto, fill, fill-available, available, fit-content, min-content, max-content), $css-default-modes);
Description
CSS size/length modes supported
Type
List
Used by
See
Author
  • blackmirror1980
[private] length-modes
$length-modes: array-concat((auto), $css-default-modes);
Description
Length modes supported (auto and $css-default-modes)
Type
List
Used by
See
Author
  • blackmirror1980
[private] css-default-modes
$css-default-modes: (initial, inherit);
Description
CSS default modes supported (shared between all modes arrays/lists)
Type
List
Used by
Author
  • blackmirror1980
Types - Frequency
functions
is-frequency
@function is-frequency($f) { ... }
Description
Checks if a value has a supported frequency unit
Parameters
NameDescriptionTypeDefault value
$f
the value to check
Any—
Returns
Boolean
Requires
Author
  • blackmirror1980
variables
[private] frequency-units
$frequency-units: (Hz, kHz);
Description
Frequency units supported
Type
List
Used by
Author
  • blackmirror1980
Types - Function
functions
is-function