mlut documentation

8.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.

Source: ../src/sass/tools/functions/_index.scss, line 1

8.1.1 #sass-tools.functions.custom_units Custom units

Functions for working with custom units.

Source: ../src/sass/tools/functions/common/_custom-units.scss, line 9

8.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)

Parameters:

$n

unitless number or number with gg unit
$data

service argument for provide any data
Defaults to: ()

Source: ../src/sass/tools/functions/common/_custom-units.scss, line 42

8.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

Parameters:

$n

unitless number or number with u unit
$data

service argument for provide any data
Defaults to: ()

Source: ../src/sass/tools/functions/common/_custom-units.scss, line 15

8.1.2 #sass-tools.functions.math Math

Functions for calculations.

Source: ../src/sass/tools/functions/base/_math.scss, line 6

8.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%

Parameters:

$number

decimal to be rounded. Type: number.
$pos

the number of decimal places.

Source: ../src/sass/tools/functions/base/_math.scss, line 51

8.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%

Parameters:

$number

decimal to be rounded. Type: number.
$pos

the number of decimal places.

Source: ../src/sass/tools/functions/base/_math.scss, line 68

8.1.2.3 #sass-tools.functions.math.decimal_round decimal-round

Decimal rounding.

@debug ml.decimal-round(33.33333%, 2); // 33.33%

Parameters:

$number

decimal to be rounded. Type: number.
$pos

the number of decimal places.
$type

service parameter for functions-wrappers.
Defaults to: 'round'

Source: ../src/sass/tools/functions/base/_math.scss, line 12

8.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

Parameters:

$number

number in px that will be converted.
$divider

parent font size in px.
Defaults to: $browser-font-size
$unit

service parameter for functions-wrappers.
Defaults to: 'em'

Source: ../src/sass/tools/functions/base/_math.scss, line 84

8.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

Parameters:

$number

number in px that will be converted.
$divider

parent font size in px.
Defaults to: $browser-font-size

Source: ../src/sass/tools/functions/base/_math.scss, line 134

8.1.2.6 #sass-tools.functions.math.px2rem px2rem

Wrapper on px2em for converting to rem. Works similarly.

@debug ml.px2rem(24px); // 1.5rem

Parameters:

$number

number in px that will be converted.
$divider

browser default font size in px.
Defaults to: $browser-font-size

Source: ../src/sass/tools/functions/base/_math.scss, line 117

8.1.3 #sass-tools.functions.string String

Functions to manipulate strings.

Source: ../src/sass/tools/functions/base/_string.scss, line 10

8.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

Parameters:

$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 is
Defaults to: false

Source: ../src/sass/tools/functions/base/_string.scss, line 16

8.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

Parameters:

$str

string for search

Source: ../src/sass/tools/functions/base/_string.scss, line 77

8.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'

Parameters:

$value

value for escaping

Source: ../src/sass/tools/functions/base/_string.scss, line 122

8.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'

Parameters:

$str

string for converting

Source: ../src/sass/tools/functions/base/_string.scss, line 103

8.1.4 #sass-tools.functions.utils Utilities

Functions for working with utilities.

Source: ../src/sass/tools/functions/high/utils/_index.scss, line 21

8.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'

Parameters:

$name

utility name
$section

section in the registry in which utility was defined
Defaults to: 'utils'
$name-as-prop

return the utility name as a property if it was not found
Defaults to: false
$single

return one property of the utility, even if there are several
Defaults to: false

Source: ../src/sass/tools/functions/base/_getters.scss, line 78

8.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

Parameters:

$util

string
Any utility

Source: ../src/sass/tools/functions/high/utils/_index.scss, line 211

8.2 #sass-tools.mixins Mixins

Useful mixins. Most of the mixins are used for internal needs, but some can be useful in ordinary code.

Source: ../src/sass/tools/mixins/_index.scss, line 1

8.2.1 #sass-tools.mixins.ar At-Rules

At-Rules mixins.

Source: ../src/sass/tools/mixins/base/_index.scss, line 12

8.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;
	}
}

Parameters:

$bp

string in syntax for breakpoins or list with numbers.
@content

CSS relus that will be placed into mediaquery.

Source: ../src/sass/tools/mixins/base/_index.scss, line 18

8.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;
		}
	}
}

Parameters:

$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

Source: ../src/sass/tools/mixins/base/_mk-ar.scss, line 8

8.2.2 #sass-tools.mixins.utils Utilities

Mixins for creating utilities and working with them.

Source: ../src/sass/tools/mixins/high/utils/_index.scss, line 12

8.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;
}

Parameters:

$utils

string | list
string with space-separated utilities or a list of utils as strings
$components

map
Contains utility components in longhand format
Defaults to: ()
$ready-list

boolean
if true than you can pass any utilities as a list
Defaults to: false

Source: ../src/sass/tools/mixins/high/utils/_index.scss, line 96

8.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',
));

Parameters:

$raw-name

string
name of the utility. You can use generation syntax here
$values

list | map
You can specify a map with utility values and CSS properties values. Or you can pass a list with only utility values. It will be converted to CSS values depends on conversion type of utility
$components

map
Contains utility components in longhand format
Defaults to: ()
$options

map
Options of utilities, similarly to those that are in the utility registry. Here you can change the options for a specific set of values without changing the main utility options. Also, you can create a new utility in-place, without registration ~~and SMS~~
Defaults to: ()

Source: ../src/sass/tools/mixins/high/utils/_mk-util.scss, line 10

8.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

Parameters:

$raw-name

string
name of the group. You can use generation syntax here
$values

list | map
You can specify a map with utility values and CSS properties values. Or you can pass a list with only utility values. It will be converted to CSS values depends on conversion type of utility
$components

map
Contains utility components in longhand format
Defaults to: ()

Source: ../src/sass/tools/mixins/high/utils/_index.scss, line 18