7 #sass-tools Sass tools
Available when using mlut as a toolkit.
content/main.css
, line 1701
7.1 #sass-tools.functions Functions
Most of the functions are used for internal needs and has not yet been documented. But some functions from here can be useful in ordinary code.
../packages/core/src/sass/tools/functions/_index.scss
, line 1
7.1.1 #sass-tools.functions.custom_units Custom units
Functions for working with custom units.
../packages/core/src/sass/tools/functions/common/_custom-units.scss
, line 9
7.1.1.1 #sass-tools.functions.custom_units.gg gg
Converts grid gutter to CSS value.
@debug ml.gg(5); // calc(var(--ml-gg) * 5)
@debug ml.gg(1gg); // var(--ml-gg)
-
$n
unitless number or number withgg
unit -
$data
service argument for provide any dataDefaults to:()
../packages/core/src/sass/tools/functions/common/_custom-units.scss
, line 42
7.1.1.2 #sass-tools.functions.custom_units.su su
Converts space units to CSS value.
@debug ml.su(3u); // 0.75rem
@debug ml.su(4); // 1rem
-
$n
unitless number or number withu
unit -
$data
service argument for provide any dataDefaults to:()
../packages/core/src/sass/tools/functions/common/_custom-units.scss
, line 15
7.1.2 #sass-tools.functions.math Math
Functions for calculations.
../packages/core/src/sass/tools/functions/base/_math.scss
, line 6
7.1.2.1 #sass-tools.functions.math.decimal_ceil decimal-ceil
Wrapper on decimal-round for ceil round.
@debug ml.decimal-ceil(33.33333%, 2); // 33.34%
-
$number
decimal to be rounded. Type: number. -
$pos
the number of decimal places.
../packages/core/src/sass/tools/functions/base/_math.scss
, line 51
7.1.2.2 #sass-tools.functions.math.decimal_floor decimal-floor
Wrapper on decimal-round for floor round.
@debug ml.decimal-floor(33.33999%, 2); // 33.33%
-
$number
decimal to be rounded. Type: number. -
$pos
the number of decimal places.
../packages/core/src/sass/tools/functions/base/_math.scss
, line 68
7.1.2.3 #sass-tools.functions.math.decimal_round decimal-round
Decimal rounding.
@debug ml.decimal-round(33.33333%, 2); // 33.33%
-
$number
decimal to be rounded. Type: number. -
$pos
the number of decimal places. -
$type
service parameter for functions-wrappers.Defaults to:'round'
../packages/core/src/sass/tools/functions/base/_math.scss
, line 12
7.1.2.4 #sass-tools.functions.math.px2em px2em
Convert pixels to em
.
Final value in ems rounded because accuracy more than two decimal places does not make sense.
@debug ml.px2em(24px, 18px); // 1.33em
@debug ml.px2em(24px); // 1.5em
-
$number
number inpx
that will be converted. -
$divider
parent font size inpx
.Defaults to:$browser-font-size
-
$unit
service parameter for functions-wrappers.Defaults to:'em'
../packages/core/src/sass/tools/functions/base/_math.scss
, line 84
7.1.2.5 #sass-tools.functions.math.px2lh px2lh
Wrapper on px2em for converting to line-height
units. Works similarly.
@debug ml.px2lh(24px, 14px); // 1.71
@debug ml.px2lh(24px); // 1.5
-
$number
number inpx
that will be converted. -
$divider
parent font size inpx
.Defaults to:$browser-font-size
../packages/core/src/sass/tools/functions/base/_math.scss
, line 134
7.1.2.6 #sass-tools.functions.math.px2rem px2rem
Wrapper on px2em for converting to rem
. Works similarly.
@debug ml.px2rem(24px); // 1.5rem
-
$number
number inpx
that will be converted. -
$divider
browser default font size inpx
.Defaults to:$browser-font-size
../packages/core/src/sass/tools/functions/base/_math.scss
, line 117
7.1.3 #sass-tools.functions.string String
Functions to manipulate strings.
../packages/core/src/sass/tools/functions/base/_string.scss
, line 10
7.1.3.1 #sass-tools.functions.string.str2n str2n
Convert string to number. Returns null if conversion is not possible.
@debug ml.str2n('1.5'); // 1.5
@debug ml.str2n('1x5'); // 1
@debug ml.str2n('xx'); // null
@debug ml.str2n('1x5', 1); // 1x5
-
$str
string to be converted -
$skip-unknown
bool flag. If it on and the string contains an unknown sequence of characters after the number, then the it is returned as isDefaults to:false
../packages/core/src/sass/tools/functions/base/_string.scss
, line 16
7.1.3.2 #sass-tools.functions.string.str_digit_index str-digit-index
Returns the first index of digit in $str, or null
if digits not found
@debug ml.str-digit-index('Mb55'); // 3
@debug ml.str-digit-index('Mt-a'); // null
-
$str
string for search
../packages/core/src/sass/tools/functions/base/_string.scss
, line 77
7.1.3.3 #sass-tools.functions.string.str_escape str-escape
Escape special characters in value for using it in CSS selector.
@debug ml.str-escape(':^:&:h'); // '\\:\\^\\:\\&\\:h'
@debug ml.str-escape(1.5); // '1\\.5'
-
$value
value for escaping
../packages/core/src/sass/tools/functions/base/_string.scss
, line 122
7.1.3.4 #sass-tools.functions.string.str_ucfirst str-ucfirst
Converts the first letter of string to uppercase
@debug ml.str-ucfirst('fxg1'); // 'Fxg1'
-
$str
string for converting
../packages/core/src/sass/tools/functions/base/_string.scss
, line 103
7.1.4 #sass-tools.functions.utils Utilities
Functions for working with utilities.
../packages/core/src/sass/tools/functions/high/utils/_index.scss
, line 21
7.1.4.1 #sass-tools.functions.utils.util_prop util-prop
Get the CSS property, which corresponds to the utility from registry.
@debug ml.util-prop('D'); // 'display'
-
$name
utility name -
$section
section in the registry in which utility was definedDefaults to:'utils'
-
$name-as-prop
return the utility name as a property if it was not foundDefaults to:false
-
$single
return one property of the utility, even if there are severalDefaults to:false
../packages/core/src/sass/tools/functions/base/_getters.scss
, line 78
7.1.4.2 #sass-tools.functions.utils.uv uv
Get CSS value of utility.
@debug ml.uv('D'); // 'block'
@debug ml.uv('C#c06*80'); // rgba(204, 0, 102, 0.8)
@debug ml.uv('M3gg;a;gSm'); // calc(var(--ml-gg) * 3) auto 520px
-
$util
string
Any utility
../packages/core/src/sass/tools/functions/high/utils/_index.scss
, line 211
7.2 #sass-tools.mixins Mixins
Useful mixins. Most of the mixins are used for internal needs, but some can be useful in ordinary code.
../packages/core/src/sass/tools/mixins/_index.scss
, line 1
7.2.1 #sass-tools.mixins.ar At-Rules
At-Rules mixins.
../packages/core/src/sass/tools/mixins/base/_index.scss
, line 12
7.2.1.1 #sass-tools.mixins.ar.bp bp
Mixin for creation media queries with breakpoints. You can use syntax for breakpoints from utilities or one-two arbitrary numbers. When using numbers:
- one number:
min-width
query - two from zero:
max-width
- two numbers: range
@include ml.bp('<sm,md:lg') {
.inp--common {
padding-left: 48px;
}
}
@include ml.bp(0 600px) {
.btn__icon {
margin-left: 18px;
}
}
@include ml.bp(16em 32em) {
.btn__icon {
margin-top: 8px;
}
}
// CSS
@media (max-width: 519px), (min-width: 768px) and (max-width: 991px) {
.inp--common {
padding-left: 48px;
}
}
@media (max-width: 599px) {
.btn__icon {
margin-left: 18px;
}
}
@media (min-width: 16em) and (max-width: 31.94em) {
.btn__icon {
margin-top: 8px;
}
}
-
$bp
string in syntax for breakpoins or list with numbers. -
@content
CSS relus that will be placed into mediaquery.
../packages/core/src/sass/tools/mixins/base/_index.scss
, line 18
7.2.1.2 #sass-tools.mixins.ar.mk_ar mk-ar
Generate at-rules from the string with space separated abbreviations. Used syntax for at-rules from utilities.
@include ml.mk-ar('@s:apcr4/3@:dm') using ($ar) {
.block {
display: inline-grid;
}
}
// CSS
@supports (aspect-ratio: 4/3) {
@media (display-mode: fullscreen) {
.block {
display: inline-grid;
}
}
}
-
$at-rules
string with abbreviations -
$this-util
utility for which the at-rules will be generated.
This is a map in format('name': '', 'value': '')
Defaults to:null
-
@content
CSS rules that will be placed into at-rules
../packages/core/src/sass/tools/mixins/base/_mk-ar.scss
, line 8
7.2.2 #sass-tools.mixins.utils Utilities
Mixins for creating utilities and working with them.
../packages/core/src/sass/tools/mixins/high/utils/_index.scss
, line 12
7.2.2.1 #sass-tools.mixins.utils.apply apply
Applies a list of utilities in the form of styles to CSS rule:
.card {
display: block;
@include ml.apply('P2u Fns1r xl_P5u');
}
// CSS
.card {
display: block;
padding: 0.5rem;
font-size: 1rem;
}
@media (min-width: 1200px) {
.card {
padding: 1.25rem;
}
}
If a mixin is called outside CSS rule, then creates utilities from the list. See examples here.
Apply has some restrictions. If you try to use a utility with pre-state
in it without a clear indication that this is a state, you will get an error. This happens because the Parser cannot distinguish pre-state
from the utility itself. To create such utilities, pass a list of utilities as a list of strings, separating the components of the utility by spaces, as well as in Generation Syntax. Next, pass true
in the third argument:
@include ml.apply(('.js:h:>* _D', 'Lnh2r!_af'), (), true);
// CSS
.js:hover > * .\.js\:h\:\>\*_D {
display: block;
}
.Lnh2r\!_af::after {
line-height: 2rem !important;
}
-
$utils
string | list
string with space-separated utilities or a list of utils as strings -
$components
-
$ready-list
boolean
true
than you can pass any utilities as a listDefaults to:false
../packages/core/src/sass/tools/mixins/high/utils/_index.scss
, line 96
7.2.2.2 #sass-tools.mixins.utils.mk_util mk-util
Creates utilities based on a map or a list with values. Simple examples you can see here.
Even if you started using a map, you can still use the conversion of values. To do this, specify null
instead of CSS values. And if you want that CSS value corresponds to the value of the utility, use false
:
@include ml.mk-util(
'Mxw', (
500: false,
'sm0': 560px,
'n': null,
[5e, 7]: null,
));
// CSS
.Mxw500 {
max-width: 500;
}
.Mxw-sm0 {
max-width: 560px;
}
.Mxw-n {
max-width: none;
}
.Mxw5e {
max-width: 5em;
}
// etc
Do not forget that you can use Generation Syntax for any utility value. This is available, both in a map of values and in the list.
@include ml.mk-util(
'Mxw', (
'sm0_ af bf': 560px,
));
@include ml.mk-util(
'Mxw', (
':f _100_ +:h',
'@:pr _10p',
));
-
$raw-name
string
name of the utility. You can use generation syntax here -
$values
list | map
-
$components
-
$options
map
and SMSDefaults to:()
../packages/core/src/sass/tools/mixins/high/utils/_mk-util.scss
, line 10
7.2.2.3 #sass-tools.mixins.utils.mk_utils_group mk-utils-group
Creates utilities group based on a map or a list with values. Works similarly that mk-util mixin. You can find existing groups here.
@include ml.mk-utils-group(
'Margins', (
'xs0': 100px,
150: null
));
// CSS
.M-xs0 {
margin: 100px;
}
.M150 {
margin: 150px;
}
.Mt-xs0 {
margin-top: 100px;
}
// etc
-
$raw-name
string
name of the group. You can use generation syntax here -
$values
list | map
-
$components
../packages/core/src/sass/tools/mixins/high/utils/_index.scss
, line 18