mlut documentation

7 #sass-tools Sass tools

Available when using mlut as a toolkit.

Source: 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.

Source: ../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.

Source: ../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)
Parameters:
  • $n
    unitless number or number with gg unit
  • $data
    service argument for provide any data
    Defaults to: ()
Source: ../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
Parameters:
  • $n
    unitless number or number with u unit
  • $data
    service argument for provide any data
    Defaults to: ()
Source: ../packages/core/src/sass/tools/functions/common/_custom-units.scss, line 15

7.1.2 #sass-tools.functions.math Math

Functions for calculations.

Source: ../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%
Parameters:
  • $number
    decimal to be rounded. Type: number.
  • $pos
    the number of decimal places.
Source: ../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%
Parameters:
  • $number
    decimal to be rounded. Type: number.
  • $pos
    the number of decimal places.
Source: ../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%
Parameters:
  • $number
    decimal to be rounded. Type: number.
  • $pos
    the number of decimal places.
  • $type
    service parameter for functions-wrappers.
    Defaults to: 'round'
Source: ../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
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: ../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
Parameters:
  • $number
    number in px that will be converted.
  • $divider
    parent font size in px.
    Defaults to: $browser-font-size
Source: ../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
Parameters:
  • $number
    number in px that will be converted.
  • $divider
    browser default font size in px.
    Defaults to: $browser-font-size
Source: ../packages/core/src/sass/tools/functions/base/_math.scss, line 117

7.1.3 #sass-tools.functions.string String

Functions to manipulate strings.

Source: ../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
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: ../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
Parameters:
  • $str
    string for search
Source: ../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'
Parameters:
  • $value
    value for escaping
Source: ../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'
Parameters:
  • $str
    string for converting
Source: ../packages/core/src/sass/tools/functions/base/_string.scss, line 103

7.1.4 #sass-tools.functions.utils Utilities

Functions for working with utilities.

Source: ../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'
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: ../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
Parameters:
  • $util
    string
    Any utility
Source: ../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.

Source: ../packages/core/src/sass/tools/mixins/_index.scss, line 1
Source: ../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;
	}
}
Parameters:
  • $bp
    string in syntax for breakpoins or list with numbers.
  • @content
    CSS relus that will be placed into mediaquery.
Source: ../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;
		}
	}
}
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: ../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.

Source: ../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;
}
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: ../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',
));
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: ../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
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: ../packages/core/src/sass/tools/mixins/high/utils/_index.scss, line 18