_light()
A little brighten
scss
//
// @param hex $hex
// @return hex
//
color: _light(#000);
A little brighten
//
// @param hex $hex
// @return hex
//
color: _light(#000);
Brighten
//
// @param hex $hex
// @return hex
//
color: _lighter(#000);
To very brighten
//
// @param hex $hex
// @return hex
//
color: _lightest(#000);
A little darken
//
// @param hex $hex
// @return hex
//
color: _dark(#fff);
Darken
//
// @param hex $hex
// @return hex
//
color: _darker(#fff);
To very darken
//
// @param hex $hex
// @return hex
//
color: _darkest(#fff);
Checks for a valid int
//
// @param mixed $value
// @return bool
//
@if (_is-int($value)) {
z-index: $value;
}
Checks for a valid CSS length
//
// @param mixed $value
// @return bool
//
@if (_is-length($value)) {
width: $value;
}
Checks for a valid null
//
// @param mixed $value
// @return bool
//
@if (not _is-null($value)) {
width: $value;
}
Checks for a valid number
//
// @param mixed $value
// @return bool
//
@if (_is-number($value)) {
z-index: $value;
}
Return rem font-size
//
// @param int $scale-or-font-size Font size scaling factor.
// @return rem
//
font-size: _font-size(1); // => 16px
Return line-height for vertical rhythum
//
// @param int $scale-or-font-size Font size scaling factor.
// @return int
//
.c-foo {
line-height: _line-height(1); // line-height for 1rem
}
Return the margin conforming to the rhythm
//
// @param number $coefficient
// @param boolean $apply-space-scale
// @param boolean $apply-margin-scale
// @return length
//
padding: _space(1);
padding: _space(1, true);
padding: _space(1, true, true);
Return greatest common divisor
//
// @param int $a The number to be divided
// @param int $b The number to divide
// @return int The number of the remainder
//
$gcd: _gcd(4, 8);
Return min size.
$size
is key of $_size
, return that value.$size
is number, return this.//
// @param size|length $size
// @return length|false
//
@media (min-width: _min(md)) {
...
}
Return max size.
$size
is key of $_size
, return that max value.$size
is number, return this.//
// @param size|length $size
// @return length|false
//
@media (max-width: _max(md)) {
...
}
Return prev key of $_size
//
// @param size $size
// @return size
//
$prev_size_key: _prev-size-key(md); // => sm
Return next key of $_size
//
// @param size $size
// @return size
//
$next_size_key: _next-size-key(md); // => lg
Return em from px
//
// @param px $px
// @param px $base-font-size-px
// @return em
//
font-size: _px2em(16px);
Return rem from px
//
// @param px $px
// @param px $base-font-size-px
// @return rem
//
font-size: _px2rem(16px);
Return px from rem
//
// @param rem $rem
// @param px $base-font-size-px
// @return px
//
font-size: _rem2px(2rem);
Replace in a string
//
// @param string|list $substr
// @param string $newsubstr
// @param string $string
// @return string
//
$value: _replace('p', 'a', 'apple'); // => aaale
Sanitize animation name
//
// @param string $name
// @return string
//
$animation-name: _sanitize-animation-name($name);
animation: $animation-name .2s ease-in 0s;
Return prefix for the device size
//
// @param string $size sm|md|lg
// @return string
//
$prefix: _size-prefix(md); // -> --md
Return numeric value that doesn't have the unit.
//
// @param length $value numeric value
// @return int
//
$value: _strip-unit(10px); // => 10