Ungic packer - development environment for web layout

# SASS Framework API

# ungic.component, ungic.component.core

  • Type: module

  • Usage: @use "ungic.component" as *;

    Get access to current core of component

    • @use ".core" as this; - relative path
    • @use "ungic.component.core; - absolute path from the root of the component

    Restriction of usage

    This module can be used in

    • once.scss
    • render.scss and in any files that will be included in render.scss
    • custom modules - any custom modules like functions or mixins.
    // You can use relative path
@use ".core" as this;

// or absolute
@use "ungic.components.core" as this;

# $cid

  • Type: variable

  • Usage:

    ID of current component.

    TIP

    Use the cid method instead

    @use ".core" as this;

@debug this.$cid;

@debug this.cid();

# $config

  • Type: variable

  • Usage:

    Source config map of the current component.

    TIP

    Use the config method instead

    @use ".core" as this;

@debug this.config();

# $project

  • Type: variable

  • Usage:

    Source map of the project

    TIP

    Use the project method instead

# exist

  • Type: function

  • Usage: exist()

    Check if a component exists in project.

    @use "ungic.sprites" as sprites;
@use "sass:meta";

@if sprites.exist() {
	@include sprites.render();
}

# export

  • Type: function

  • Arguments:

    • $oid String / Number - Custom options id
    • $data Any SASS data

  • Usage: export($oid, $data)

    Export SASS data to JSON

# this

  • Type: function

  • Parameters:

    • $suffix - suffix to be added to the component class using the append sass method

  • Usage: this($suffix)

    Method for creating a selector by adding a suffix to the component class name using an append sass method.

    @use ".core" as *;

@debug this('-test'); // .app-test

# cid

  • Type: function

  • Arguments:

    • $as_selector Boolean - Get as selector (selector with class name of component)

  • Usage: cid($as_selector: false)

    Get component ID

# config

  • Type: function

  • Arguments:

    • $key - Get a specific configuration variable
    • $subkey - it is possible to get a specific key of a map type variable

  • Usage: config($key: "", $subkey: false)

    Get access to config of the current component. Using without parameters returns the entire configuration of the component.

# properties, props

  • Type: function

  • Usage: properties($defaults: false), component.props($defaults: false)

    TIP

    This method belongs to the ungic.component.props module!

# prop

# is-prop-changed

  • Type: function

  • Usage: is-prop-changed($prop)

    TIP

    This method belongs to the ungic.component.props module!

# component

  • Type: mixin, @content required

  • Usage: @include component {...}

    This mixin creates a wrapper for component rules with class name of component

    @use ".core" as this;
@include this.component {
	// rules
}

# this

  • Type: mixin, @content required

  • Parameters:

    • $suffix - suffix to be added to the component class name using the append sass method

  • Usage: @include this($suffix: null) {...}

    This mixin creates a wrapper for component rules with class name of component

    @use ".core" as *;
@include this {
	// rules
	@include this(-method) {
		// rules
	}
}

# wrap

  • Type: mixin, @content required

  • Parameters:

    • $suffix - The suffix to be added to the component class name using the append sass method
    • $merge - Boolean [true] Add component class to suffix

  • Usage: @include wrap($suffix: null, $merge: true) {...}

    This method adds the passed suffix to the beginning of the current selector. if the suffix is not a valid selector, it will be merged with component class name using the append sass method, this behavior can be disabled using the second parameter of this method.

    // components/app/render.scss
@use ".core" as *;

@include component {
	&-header {
		@include wrap('-opened') {
			&debug &; // .app-opened .app-header
		}
		@include wrap('.opened') {
			&debug &; // .opened .app-header
		}
		@include wrap('html', false) {
			&debug &; // html .app-header
		}
	}
}

# and

  • Type: mixin, @content required

  • Parameters:

    • $suffix - The suffix to be added to the component class name using the append sass method

  • Usage: @include and($suffix: null) {...}

    This method uses the append method to add the passed suffix to the root element of the selector. Important! The selector root must be with the class name of the component!

    // components/app/render.scss
@use ".core" as *;

@include component {
	@include this {
		&-icon {
			display: none; // .app .app-icon {display:none}
			@include and('.has-icon, .big-icon') {
				// .app.has-icon .app-icon,
				// .app.big-icon .app-icon {display:block}
				display: block;
			}
		}
	}
	&-header {
		@include and('__this') {
			@debug &; // .test.test-header
		}
		@include and('-section') {
			@debug &; // .test-section-header
		}
	}
}

# nest

  • Type: mixin, @content required

  • Parameters:

    • $suffix - The suffix to be added to the component class name using the append sass method

  • Usage: @include nest($suffix: null) {...}

    This method inserts a part of the selector immediately after the first root of the selector, serves to create a sibling selector

    // components/app/render.scss
@use ".core" as *;

@include component {
	@include component {
		@include nest('+__this __this') {
			&-btn {
				@debug &; // .test + .test .test-btn
			}
		}
		&-btn {
			@include nest('+__this __this') {
				@debug &; // .test + .test .test-btn
			}
		}
	}
}

# before

  • Type: mixin, @content required

  • Parameters:

    • $suffix - The suffix to be added to the component class name using the append sass method

  • Usage: @include before($suffix: null) {...}

    This method inserts a part of the selector before the current element.

    @use ".core"as this;	
@include this.component {
	.btn {
		@include this.before('.btns') {
			display: inline-block;
		}
	}
}

    .app .btns .btn {
	display: inline-block;
}

# prev

  • Type: mixin, @content required

  • Parameters:

    • $suffix - The suffix to be added to the component class name using the append sass method
    • $merge - Boolean [true] merge component class name with suffix

  • Usage: @include prev($suffix: null, $merge: true) {...}

    This method adds a suffix to the previous selector element using the append sass method. If the suffix is not a valid selector, it will be merged with component class name using the append sass method, this behavior can be disabled using the second parameter of this method.

    @use ".core"as this;	
@include this.component {
	.btn {
		@include this.prev('.hide-btn') {
			display: none;
		}
	}
}

    .app.hide-btn .btn {
	display: none;
}

# ungic.component.{path}

  • Type: module

  • Usage: @use "ungic.component.function" as *;

    ungic.component - absolute path relative to the current component.

    You can include any path of the current component, for this you must specify the full path to the file or directory with the file index, just

    • use a dot instead of a path separator
    • don't include the file extension!

# ungic.components

  • Type: module

  • Usage: @use "ungic.components" as cids;

    Get access to the list of project components.

    @use "ungic.components" as components;

@debug components.$cids;

# $cids

  • Type: variable

  • Usage:

    Contains a list of all project sass components

# ungic.component.props

  • Type: module

  • Usage: @use "ungic.component.props" as props;

    This module is used to work with component properties.

    Restriction of usage

    This module can be used in

    • config_over.scss file of project
    • config.scss file of component

    TIP

    This module is already included in the core of the component!

    // project/config_over.scss
@use "sass:map";
$cid: null !default;
$config: () !default;
/* ------------------------------------------------ */

@use "ungic.theme" as theme;
@use "ungic.component.props" as props;

// Overridden the app component configuration
// relative to its computed properties
@if($cid == app) {
$config: map.merge($config, (
		border-btn: (props.prop(border-width)
					props.prop(border-style)
					red)
	));
}

# $properties

  • Type: variable

  • Usage:

    Contains the combined project properties with the properties of the component. To get component properties, the following methods are used:

# $private_properties

  • Type: variable

  • Usage:

    Contains private component properties

# properties, props

  • Type: function

  • Parameters:

    • $defaults Boolean - Get a complete list of all properties including default properties

  • Usage: props.properties($defaults: false), props.props($defaults: false)

    Get properties list of the component

# prop

  • Type: function

  • Parameters:

    • $prop - Property name
    • $args... - Parameters that will be passed to the handler

  • Usage: props.prop($prop, $args...)

    Get the computed value of a specific property of a component

    List of properties that have a handler:

    • border($param: false)
    • padding($param: false)
    • margin($param: false)
    • font($param: false)
    • background($param: false)
    • list-style($param: false)
    • border-radius($param: false)
    • overflow($param: false)
    • outline($param: false)
    • outline($param: false)

    $param parameter can be:

    • Boolean - Returns a sass map with all derived properties with their values
    • String - Returns a specific derived property
    // project/config_over.scss
@use "sass:map";
$cid: null !default;
$config: () !default;
/* ------------------------------------------------ */

@use "ungic.theme" as theme;
@use "ungic.component.props" as props;

// Overridden the app component configuration
// relative to its computed properties
@if($cid == app) {
$config: map.merge($config, (
		border-btn: (props.prop(border-width)
					props.prop(border-style)
					red)
	));
}

    @use ".core" as this;

@include this.component {
	background: this.prop(background);
	border-width: this.prop(border, width);
}

# is-prop-changed

  • Type: function

  • Parameters:

    • $prop - Property name

  • Usage: props.is-prop-changed($prop)

    Check if component property differs from project property, also checks for changes to derived properties.

    // components/app/properties.scss

// change the width of the border
$border-width: 3px;

// components/app/render.scss

@use ".core" as this;

// check the property border
@debug this.is-prop-changed(border); // true

# ungic.components.{cid}

  • Type: module

  • Usage: @use ungic.components.grid as grid

    Use a specific component as module! This module returns the index.scss of the component file

    TIP

    In order to provide access to the internal custom api of the component to such as functions or mixins, you should export them using the forward method in the index.scss file of component!

    
// component/app/index.scss
@forward ".core";
@forward "functions";
@forward "mixins";

# ungic.components.{cid}.{path}

  • Type: module

  • Usage: @use ungic.components.grid.functions as grid-functions

    ungic.component.{cid} - absolute path relative to the specific component.

    You can include any path of the specific component, for this you must specify the full path to the file or directory with the file index.

    To include a component file

    • use a dot instead of a path separator
    • don't include the file extension!

# ungic.project

  • Type: module

  • Usage: @use "ungic.project" as project;

    Get access to the current project

    @use "ungic.project" as project;

@debug project.config();

# $config

  • Type: variable

  • Usage:

    Source config map of the project.

    TIP

    Use the project.config method instead

    @use "ungic.project" as project;

@debug project.config();

# $properties

  • Type: variable

  • Usage:

    Source properties map of the project.

    WARNING

    Use component methods like prop, props instead

# config

  • Type: function

  • Parameters:

    • $key - Get a specific configuration variable
    • $subkey - it is possible to get a specific key of a map type variable

  • Usage: project.config($key: "", $subkey: false)

    Get access to config of the project. Using without parameters returns the entire configuration of the project.

# properties, props

  • Type: function

  • Parameters:

    • $defaults Boolean - Get a complete list of all properties including default properties

  • Usage: project.properties($defaults: false), project.props($defaults: false)

    Get properties list of the project

    WARNING

    Use component methods like properties, props instead

# ungic.theme

  • Type: module

  • Usage: @use "ungic.theme" as theme;

    This module is used for theming components.

    @use "ungic.theme" as theme;

@debug theme.color(primary);

# $name

  • Type: variable

  • Usage:

    Contains the name of the current project theme

    TIP

    Use the get method instead

    @use "ungic.theme" as theme;

@debug get(name);

# $inverse-mode

  • Type: variable

  • Usage:

    Contains the status of inversion build mode

    TIP

    Use the get method instead

    @use "ungic.theme" as theme;

@debug get(inverse-mode);

# $inverse

  • Type: variable

  • Usage:

    Contains the status of inversion mode

    TIP

    Use the get method instead

    @use "ungic.theme" as theme;

@debug get(inverse);

# $colors

  • Type: variable

  • Usage:

    Contains the colors of the current project theme

    TIP

    Use the color method instead

# $config

  • Type: variable

  • Usage:

    Contains the config of the current project theme

# $palettes

  • Type: variable

  • Usage:

    Contains the palettes of the current project theme

    TIP

    Use the palette method instead

    TIP

    The palette method also used in the color method as the second parameter!

# $theme-type

  • Type: variable

  • Usage:

    Theme type, dark or light

    TIP

    Use the get method instead

    @use "ungic.theme" as theme;

@debug get(theme-type);

# has-palette

  • Type: function

  • Parameters:

    • $color-name - theme color name
    • $tint-name, Default: null - color tint name (optional parameter to generate more detailed error in logs)
    • $silent, Default: false - error output to console

  • Usage: theme.has-palette($color-name, $tint-name: null, $silent: false)

    Checks if the theme color has a palette

# has-palette-tint

  • Type: function

  • Parameters:

    • $color-name - theme color name
    • $tint-name - color tint name
    • $silent, Default: false - error output to console

  • Usage: theme.has-palette-tint($color-name, $tint-name, $silent: false)

    Checks if the color of the palette has a specific color tint

# palette

  • Type: function

  • Parameters:

    • $color-name - theme color name
    • $tint-name - color tint name
    • $hue-offset, Default: 0 - offset the hue of color using the color.adjust sass method

  • Usage: theme.palette($color-name, $tint-name, $hue-offset: 0)

    Get color tint of theme color with hue offset

# lighten

  • Type: function

  • Parameters:

    • $color - theme color name
    • $intensity - Number - must be a number from 0 to 1 or percentage from 0 to 100%

  • Usage: theme.lighten($color, $intensity)

    Custom color lighten method, works in relation to the main colors (text-color, background-color) of the theme.

# darken

  • Type: function

  • Parameters:

    • $color - color or theme color name
    • $intensity - Number - must be a number from 0 to 1 or percentage from 0 to 100%

  • Usage: theme.darken($color, $intensity)

    Custom color darken method, works in relation to the main colors (text-color, background-color) of the theme.

# lightness

  • Type: function

  • Parameters:

    • $color - color or theme color name
    • $intensity - Number - must be a number from -1 to 1

  • Usage: theme.lightness($color, $intensity)

    A method that lightens or darkens a color depending on the type of theme.

    • if theme is light - a positive number increases light in color and a negative number decreases the amount of light in color
    • if theme is dark - a positive number decreases the light in color, and a negative number increases the amount of light in a color

# brightness

  • Type: function

  • Parameters:

    • $color - color or theme color name
    • $intensity - Number - must be a number from -1 to 1
    • $hue-offset - Default: 0 - offset the hue of color using the color.adjust sass method
    • $saturation - Default: 0 - offset the saturation of color using the color.adjust sass method

  • Usage: theme.brightness($color, $intensity, $hue-offset: 0, $saturation: 0)

    Works like lightness method but also adjusts the hue and saturation of color

# dim

  • Type: function

  • Parameters:

    • $color - color or theme color name
    • $intensity - Number - must be a number from -1 to 1
    • $hue-offset - Default: 0 - offset the hue of color using the color.adjust sass method
    • $saturation - Default: 0 - offset the saturation of color using the color.adjust sass method

  • Usage: theme.dim($color, $intensity, $hue-offset: 0, $saturation: 0)

    Used in the brightness method to darken the color

# brighten

  • Type: function

  • Parameters:

    • $color - color or theme color name
    • $intensity - Number - must be a number from -1 to 1
    • $hue-offset - Default: 0 - offset the hue of color using the color.adjust sass method
    • $saturation - Default: 0 - offset the saturation of color using the color.adjust sass method

  • Usage: theme.brighten($color, $intensity, $hue-offset: 0, $saturation: 0)

    Used in the brightness method to lighten the color

# tint

  • Type: function

  • Parameters:

    • $color - color or theme color name
    • $offset - Number

  • Usage: theme.tint($color, $offset)

    Generate color tint

    // Theme module
@use "ungic.theme"as theme;

@for $i from 1 through 10 {
	.tint-#{$i} {
		padding: 10px;
		background-color: theme.tint(red, ($i / 10));
	}
	.tint-reverse-#{$i} {
		padding: 10px;
		background-color: theme.tint(red, ($i / 10) * -1);
	}
}

# theme-config

  • Type: function

  • Parameters:

    • $key - config option name

  • Usage: theme.theme-config($key:'')

    Get theme config option

# get

  • Type: function

  • Parameters:

    • $key - name of the requested variable

  • Usage: theme.get($key:'')

    Get data belonging to the current project theme

    // Theme module
@use "ungic.theme"as theme;

@debug theme.get(name); // default

# subs

  • Type: function

  • Parameters:

    • $light - if the theme is light will return the given value
    • $dark - Defaut: null if the theme is dark will return the given value.

  • Usage: theme.subs($light, $dark: null)

    WARNING

    The second argument is optional only if the first parameter passed is a number! If the first passed parameter is a number, and the second parameter is not specified, then the number will be inverted during inversion!

    @use "ungic.theme"as theme;

// will return 1 if the theme is not 
// in inversion mode, and vice versa, 
// in inversion mode will return -1

@debug theme.subs(1);

    Get value relative to theme type (light or dark theme)

    // Theme module
@use ".core"as this;

@include this.component {
	color: subs(dark, white);
}

# subs-theme

  • Type: function

  • Parameters:

    • $theme_name - name of an existing project theme
    • $value - the value to be returned
    • $default - value by default (for other themes)

  • Usage: theme.subs-theme($theme_name, $value, $default: null)

    Return value relative to theme

# colors

  • Type: function

  • Parameters:

    • $color - theme color name

  • Usage: theme.colors($color: '')

    Return all colors in sass map format or a specific color of the current theme. If the color does not exist will return a transparent.

# gray

  • Type: function

  • Parameters:

    • $offset Number (from -1 to 1) or String

  • Usage: theme.gray($offset:0)

    • If the value for $color-name is a number then the number must be between -1 and 1 the given number will be passed to brightness method as $intensity.

    • If the value for $color-name is a string then this value will be interpreted as the name of the tint of palette

    Function for generating gray color. Gray color is computed between the main colors of the theme (text-color, background-color).

    TIP

    Gray is 50% of the light between text-color and background-color!

    Offset can be used to shift the gray scale to one side or the other from the middle of the color light. Lightening and darkening gray depends on the type of theme!

    // main colors of our theme:
// text-color: (#000, #CCC), 
// background-color: (#FFF, #444)  

@use "ungic.theme" as theme;

// #867a7a - if light theme 
// (50% of light because it is the middle of light between #000 and #FFF colors)

// #8e8282 - if dark theme 
// (53% of light because it is the middle of light between #444 and #CCC colors)
@debug theme.gray(); 

// Lightening by 50% relative to main colors
// 	#c3bcbc - if light theme (75% of light)
//	#6b6161 - if dark theme (40% of light)
@debug theme.gray(.5);

# color

  • Type: function

  • Parameters:

    • $color-name - theme color name Required
    • $color-tint - Number, List, String
    • $hue-offset - offset of hue
    • $saturation - offset of saturation

  • Usage: theme.color($color-name, $color-tint: 0, $hue-offset: 0, $saturation: 0)

    Returns the theme color and applies the brightness method to it.

    • If the value for $color-name is number then the number must be between -1 and 1 the given number will be passed to brightness method as $intensity.
    @use "ungic.theme" as theme;

@debug theme.color(primary, .9);
    • If the value for $color-name is a list then the first item in the list is the name of the palette tint for this color, and the second item of the list can be passed as default value (if the tint is missing from the palette).
    @use "ungic.theme" as theme;

@debug theme.color(primary, (lighten, .9));
    • If the value for $color-name is a string then this value will be interpreted as the name of the tint of palette
    @use "ungic.theme" as theme;

@debug theme.color(primary, lighten);
    • If the value for $color-name is a "gray" or "grey" then the gray method will be applied!
    @use "ungic.theme" as theme;

@debug theme.color(gray, .5); // the same as theme.gray(.5);

# color-var

  • Type: function

  • Parameters:

    • $color-name - theme color name Required
    • $color-tint - Number, List, String
    • $hue-offset - offset of hue
    • $saturation - offset of saturation
    • $rgb-list - Default: false save var as rgb list

  • Usage: theme.color-var($color-name, $color-tint: 0, $hue-offset: 0, $saturation: 0)

    Works like color method, but return a css variable instead of a color

# color-rgb

  • Type: function

  • Parameters:

    • $color-name - theme color name Required
    • $color-tint - Number, List, String
    • $hue-offset - offset of hue
    • $saturation - offset of saturation
    • $rgb-list - Default: false save var as rgb list

  • Usage: theme.color-rgb($color-name, $color-tint: 0, $hue-offset: 0, $saturation: 0)

    Works like color method, but return a css variable whose value is a rgb list of color

# gray-var

  • Type: function

  • Parameters:

    • $offset Number (from -1 to 1) or String

  • Usage: theme.gray-var($offset:0)

    Works like gray method, but return a css variable instead of a color

# gray-rgb

  • Type: function

  • Parameters:

    • $offset Number (from -1 to 1) or String

  • Usage: theme.gray-var($offset:0)

    Works like gray method, but return a css variable whose value is a rgb list of color

# is-inverse

  • Type: mixin, @content required

  • Using: @include theme.is-inverse {...}

    Apply css rules in inversion mode only! This mixin will only save the CSS rules that will be generated in inversion mode!

    TIP

    It is recommended to use the is-dark or is-light methods instead!

# skip-inverse

  • Type: mixin, @content required

  • Using: @include theme.skip-inverse {...}

    CSS rules passed to this mixin will be processed in relation to the current theme type, and rules in inversion mode will be skipped (removed)!

# custom-inverse-prefix

  • Type: mixin, @content required

  • Parameters:

    • $prefix - Selector as string

  • Using: @include custom-inverse-prefix($prefix) {...}

    Assign a custom prefix for inversion. This mixin wraps the passed css rules with a custom selector that is passed as $prefix parameter. In normal build mode (not in inversion mode) all css properties will be saved, and in inversion mode all css properties except those containing colors will be removed! Also, the name of the passed selector as $prefix parameter must be controlled manually, see example:

    @use ".core" as this;
@use "ungic.theme" as theme;

$suffix: '';
@if theme.get(inverse-mode) {
	$suffix: '.inverse';
} 

@include this.component {
	@include theme.custom-inverse-prefix("#{$suffix}") {
		background-color: theme.color(primary, .9);
		display: none;
	}
}

    The result will be as follows:

    .myComponent {
	display: none
}

[dir] .myComponent {
	background-color: #35880b
}

[dir] .inverse .myComponent {
	background-color: #eefee6
}

    WARNING

    There are differences from the usual inversion!

    • The prefix is specified before the selector of the current block! This means that the prefix for switching the inversion mode in html can be added to the parent of the current element, and not to the HTML tag!
    • When creating a release, scs rules that have their own prefixes will not be placed in separate files with other inversion css rules!

# is-type

  • Type: mixin, @content required

  • Parameters:

    • $type: - String the value must be dark or light

  • Using: @include theme.is-type($type) {...}

    Apply css rules relative to theme type (dark or light). This mixin will only save css rules for a specific theme type!

# is-dark

  • Type: mixin, @content required

  • Using: @include theme.is-dark {...}

    Apply css rules exclusively for dark theme. This mixin will only save css rules for a dark theme!

# is-light

  • Type: mixin, @content required

  • Using: @include theme.is-light {...}

    Apply css rules exclusively for light theme. This mixin will only save css rules for a light theme!

# is-theme

  • Type: mixin, @content required

  • Parameters:

    • $theme-name: - String the name of the theme that exists in the project

  • Using: @include theme.is-theme($theme-name) {...}

    Apply css rules relative to theme. This mixin will only save css rules for a specific theme!

# ungic.meta

  • Type: system module

  • Specification: @use "ungic.meta" as un-meta;

    This module contains system methods of the framework.

# export

  • Type: function

  • Parameters:

    • $cid - ID of component
    • $oid - options ID
    • $data - any sass data

  • Specification: un-meta.export($cid, $oid, $data)

    Used in the core of the component. Export sass data in json format.

# hsl

  • Type: function

  • Returns:

    HSL SASS List of values

  • Parameters:

    • $color - Color to split
    • $strip-unit - Strip unit
    • $asmap - return as sass map (list by default)

  • Specification: un-meta.hsl($color, $strip-unit: true, $asmap: false)

    Used in the "ungic.theme" module. Split $color to hsl map.

# lightest

  • Type: function

  • Specification: un-meta.lightest($color1, $color2)

    Returns the lightest color

# darkest

  • Type: function

  • Specification: un-meta.darkest($color1, $color2)

    Returns the darkest color

# is-darker

  • Type: function

  • Parameters:

    • $this-color - if this color is darker than the second
    • $than-this-color - second color

  • Specification: un-meta.is-darker($this-color, $than-this-color)

    Checks if the first color is darker than the second

# get-all-available-сolors

  • Type: function

  • Specification: un-meta.get-all-available-сolors()

    Get a list of all supported project colors

# is-color-available

  • Type: function

  • Specification: un-meta.is-color-available($color-name)

    Check if this color name is available. Used in check-color-name

# is-valid-color-value

  • Type: function

  • Specification: un-meta.is-valid-color-value($color-name, $color, $return_error: false)

    Check if the color value is correct

# check-color-name

  • Type: function

  • Specification: un-meta.check-color-name($color-name)

    Check if this color name is available.

# default-prop

  • Type: function

  • Specification: un-meta.default-prop($prop)

    Get default property value of ungic framework

# parse-selector

  • Type: function

  • Specification: un-meta.parse-selector($selector)

    Custom system method

# check-colors

  • Type: mixin

  • Specification: @include un-meta.check-colors($colors)

    Checks theme colors

# wrapsys

  • Type: mixin, @content required

  • Specification: @include un-meta.wrapsys($prepend: '') {...}

    Custom system method

# ungic.utils

  • Type: module

  • Usage: @use "ungic.utils" as un-utils

    This module contains tools that can be used to write CSS rules of components.

# str-replace

  • Type: function

  • Parameters:

    • $string - string to be searched
    • $search - search value
    • $replace - replacement value
    • $global Boolean - global replacement, if false - replace only the first matching element

  • Usage: un-utils.str-replace($string, $search, $replace: '', $global: true)

    This method searches and replaces the value in the string and returns the result.

# insert-nth

  • Type: function

  • Parameters:

    • $list List - sass list to which the item should be inserted
    • $index Number - list item index where the new item will be inserted
    • $value - new value to be inserted

  • Usage: un-utils.insert-nth($list, $index, $value)

    This method inserts a new item by index into the sass list and returns the result.

    $list: (1,3,4);

// 1, 2, 3, 4
@debug un-utils.insert-nth($list, 2, 2);

# remove-nth

  • Type: function

  • Parameters:

    • $list List - sass list from which to remove the item by its index
    • $index Number - index of list item

  • Usage: un-utils.remove-nth($list, $index)

This method removes a value from the list by its index

# replace-nth($list, $index, $replaceable_value)

  • Type: function

  • Parameters: $list List - sass list in which to replace the list item $index Number - index of the item to be replaced $replaceable_value - New list item

  • Usage: un-utils.replace-nth($list, $index, $replaceable_value)

    Replace a specific list item by its index

# deep-merge

  • Type: function

  • Parameters:

    • $source-map - Map
    • $secondary-map - Map

  • Usage: un-utils.deep-merge($source-map, $secondary-map)

    Method for deep merging of two sass maps

# merge

  • Type: function

  • Parameters:

    • $maps... - Maps

  • Usage: un-utils.merge($maps...)

    Merge any number of sass maps using the deep-merge method

# px

  • Type: function

  • Parameters:

    • $num - Number

  • Usage: un-utils.px($num)

    Return value in px

    @use "ungic.utils" as un-utils;

// the result will be 16px
@debug un-utils.px(16px);
@debug un-utils.px(16em);
@debug un-utils.px(16vh);
@debug un-utils.px(16%);
@debug un-utils.px(16);

# em

  • Type: function

  • Parameters:

    • $px - Number - the value to be converted
    • $def - Number - relative to this number

  • Usage: un-utils.em($px, $def)

    @use "ungic.utils" as un-utils;

@debug un-utils.em(16px, 18px); // 0.8888888889em

# inv

  • Type: function

  • Parameters:

    • $number Number

  • Usage: un-utils.inv($number)

    Returns an inverted number

# negative

  • Type: function

  • Parameters:

    • $number Number

  • Usage: un-utils.negative($number)

    Returns a negative number

# unit-merge

  • Type: function

  • Parameters:

    • $number Number
    • $unit Unit

  • Usage: un-utils.unit-merge($number, $unit)

    Returns the merged number with the unit

# strip-unit

  • Type: function

  • Parameters:

    • $number Number

  • Usage: un-utils.strip-unit($number)

    Returns a number without a unit

# char

  • Type: function

  • Parameters:

    • $character-code Charcode

  • Usage: un-utils.char($character-code)

    Adds a backslash to the charcode

    @use "ungic.utils" as un-utils;

@debug un-utils.char(f10); // "\f10"

# dir

  • Type: function

  • Parameters:

    • $ltr value for LTR
    • $rtl value for RTL

  • Usage: un-utils.dir($ltr, $rtl)

    Returns the value depending on the direction mode

    @use "ungic.utils" as un-utils;

body {
	font-family: un-utils.dir("Roboto", "Rubik")
}

    [dir=ltr] body {
	font-family: "Roboto"
}

[dir=rtl] body {
	font-family: "Rubik"
}

# rtli, rtl-ignore

  • Type: function

  • Parameters:

    • $val

  • Usage: un-utils.rtli($val)

    This function indicates that this property will be ignored by the rtlcss plugin

    @use "ungic.utils" as *;

body {
	border-left: 10px;
	margin-left: rtli(10px);
}

    [dir=ltr] body {
	border-left: 10px
}
[dir=rtl] body {
	border-right: 10px
}

body {
	/* This property was not processed */
	margin-left: 10px
}

# rtl-prepend

  • Type: function

  • Parameters:

    • $value - the default value to be assigned in LTR mode
    • $rtl-prepend - the value to be prepended into the RTL mode
    • $sep - separator

  • Usage: un-utils.rtl-prepend($value, $rtl-prepend, $sep:' ')

    Insert the value before the default value in RTL mode

    @use "ungic.utils" as un-utils;

$font-family: un-utils.rtl-prepend('-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', 'Heebo', ',');

# rtl-append

  • Type: function

  • Parameters:

    • $value - the default value to be assigned in LTR mode
    • $rtl-prepend - the value to be appended into the RTL mode
    • $sep - separator

  • Usage: un-utils.rtl-append($value, $rtl-append, $sep: ' ')

    Insert the value after the default value in RTL mode

# merge

  • Type: mixin

  • Usage: @include un-utils.merge {...}

// components/app/render.scss
@use ".core" as *;
@use "sass:meta;

@include component {
	@include meta.load-css('./includes/popups.scss');
}

// components/app/includes/popups.scss
@use "ungic.utils" as utils;

@include utils.merge {
	&-btn {
		display: inline-block;
	}
}

/* Result */
.app-btn {
	display: inline-block;
}

# ungic.sprites

  • Type: module

  • Usage: @use "ungic.sprites" as sprites

    The module generated by the icons plugin is used to work with icons - sprites (Icons raster format).

# $url

  • Type: variable

  • Usage:

    Contains a link to the generated sprite

# $class-name

  • Type: variable

  • Usage:

    Contains a class name of sprites

# exist

  • Type: function

  • Usage: sprites.exist()

    Checks if the module is generated by the icon plugin

    @use "ungic.sprites" as sprites;

@if sprites.exist() {
	@include sprites.render();
}

// OR

@if mixin-exists(render, sprites) {
	@include sprites.render();
}

# icon-exist, has-icon

  • Type: function

  • Parameters:

    • $id - Icon ID

  • Usage: sprites.icon-exist($id), sprites.has-icon($id)

    Checks if the icon exists in the project

# get-icon

  • Type: function

  • Parameters:

    • $id - Icon ID

  • Usage: sprites.get-icon($id)

    Get data for a specific image icon

# get-icons-list

  • Type: function

  • Usage: sprites.get-icons-list()

    Get a list of IDs of all image icons

# get-icons

  • Type: function

  • Usage: sprites.get-icons()

    Get data for all image icons

    WARNING

    Using this method for render an icons is not recommended, since this method does not track the use of icons!

# icon

  • Type: mixin

  • Parameters:

    • $id - Icon ID

  • Usage: @include sprites.icon($id)

    Render a specific icon

# icon-core

  • Type: mixin

  • Usage: @include sprites.icon-core()

    Render main styles of sprites

    WARNING

    Using this method for render an icons is not recommended, since this method does not track the use of icons!

# render

  • Type: mixin

  • Usage: @include sprites.render()

    Render all image icons

    @use "ungic.sprites" as sprites;

@if sprites.exist() {
	@include sprites.render();
}

# icon-label

  • Type: mixin

  • Usage: @include sprites.icon-label()

    Render label of icon

# ungic.ficons

  • Type: module

  • Usage: @use "ungic.ficons" as ficons

    The module generated by the icons plugin is used to work with icons - fonts.

# $font-family

  • Type: variable

  • Usage:

    Contains a value for font-family property

# $url

  • Type: variable

  • Usage:

    Contains a link to the generated fonts directory

# $class-name

  • Type: variable

  • Usage:

    Contains a class name of font icons

# exist

  • Type: function

  • Usage: ficons.exist()

    @use "ungic.ficons" as ficons;

@if ficons.exist() {
	@include ficons.render();
}

// OR

@if mixin-exists(render, ficons) {
	@include ficons.render();
}

# icon-exist, has-icon

  • Type: function

  • Parameters:

    • $id - Icon ID

  • Usage: ficons.icon-exist($id), ficons.has-icon($id)

    Checks if the svg icon exists in the project

# get-icon

  • Type: function

  • Parameters:

    • $id - Icon ID

  • Usage: ficons.get-icon($id)

    Get data for a specific svg icon

# get-icons-list

  • Type: function

  • Usage: ficons.get-icons-list()

    Get a list of IDs of all svg icons

# get-icons

  • Type: function

  • Usage: ficons.get-icons()

    Get data for all svg icons

    WARNING

    Using this method for render an icons is not recommended, since this method does not track the use of icons!

# icon

  • Type: mixin

  • Parameters:

    • $id - Icon ID

  • Usage: @include ficons.icon($id)

    Render a specific svg icon

# icon-core

  • Type: mixin

  • Usage: @include ficons.icon-core()

    Render main styles of svg icon

    WARNING

    Using this method for render an icons is not recommended, since this method does not track the use of icons!

# render

  • Type: mixin

  • Usage: @include ficons.render()

    Render all svg icons

    @use "ungic.ficons" as ficons;

@if ficons.exist() {
	@include ficons.render();
}

# icon-label

  • Type: mixin

  • Usage: @include sprites.icon-label()

    Render label of svg icon

# ungic.slots.{slot_id}

  • Type: Dynamic module

  • Usage:

    This module is created by the user in an html document, and then included anywhere in the component that is responsible for rendering the css rules.

    <div class="component">
	<header>
		<a href="">Link</a>
		<style sass="ungic" slot="header">
			a {
				font-size: 1.2em;
				display: block;
				width: 200px;
				text-align: right;
			}
		</style>
	</header>
	<footer>
		<a href="">Link</a>
		<style sass="ungic" slot="footer">
			// Get access to core of component
			@use "ungic.components.ungic" as this;
			@use "ungic.theme" as theme;
			a {
				font-size: 1.4em;
				color: theme.color(primary, .6);
			}
		</style>
	</footer>
</div>

    @use ".core" as this;

@include this.component {
	header {
		@include meta.load-css("ungic.slots.header");
	}
	footer {
		@include meta.load-css("ungic.slots.footer");
	}
}

# @{path}

  • Usage:

    @ - path relative to node_modules directory of current project

    @import "@bootstrap/scss/functions";
...