utilities
variables
testing-mode
$testing-mode: true;Description
The testing mode controls weather the errors are handled using @error and interrupt the compilation (false) or @debug while on testing mode (true).
Type
Bool
Used by
- [function]
throw
error-types
$error-types: ('value', 'handling');Description
Error types and descriptions of their usage.
- Value: A variable or parameter in quetion had the wrong value range or data type.
- Handling: Error related to error handling.
Type
List
Used by
- [function]
throw
unit
$unit: 24px;Description
Determines the standard unit of measurement.
Type
Number - pixels
Used by
sizes
$sizes: (
hand: 320px,
page: 600px,
book: 900px,
desk: 1200px,
wide: 1800px
);Description
Contains the minimum width value for the standard spaces.
Type
Map
Used by
max-sizes
$max-sizes: (
hand: 599px,
page: 899px,
book: 1199px,
desk: 1799px,
wide: 3000px
);Description
Contains the maximum width value for the standard spaces.
Type
Map
Used by
functions
throw
@function throw($message: 'Unkown error.', $error-type: 'none') { ... }Description
Reports and handles @errors and @debugs. Constructs their content using a message and a type.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$message | The text message that is displayed in the @error or | String | 'Unkown error.' |
$error-type | Has to be one of the types of errors inside the Error Handling Standard. | String | 'none' |
Example
Sass
@mixin set-width($width) {
@if ($width == 0) {
content: throw('Can't convert value 0 to pixels.', value);
} @else {
width: $width;
}
}
div {
@include set-width(0);
}Console message
Value Error: Can't Convert value 0 to pixels.Requires
- [function]
capitalize - [variable]
error-types - [variable]
testing-mode
Used by
- [function]
measure - [function]
measure - [mixin]
display-on - [mixin]
display-on - [mixin]
display-on - [mixin]
grid - [mixin]
grid - [mixin]
grid
capitalize
@function capitalize($string: null) { ... }Description
Turns the first letter of a word into uppercase.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$string | The word that is going to be capitalized. | String | null |
Example
Sass
p {
&::after {
content: capitalize(lips);
}
}Compiled CSS
p::after {
content: "Lips";
}Used by
- [function]
throw
measure
@function measure($space: null, $max: false) { ... }Description
Looks for a the limit value of a space's width. Default returns the lower limit, the $max variable controls when to return the upper limit.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$space | Name of the space that needs to be measured. | String | null |
$max | Returns the upper limit of the space's width. | Bool | false |
Example
Sass
div {
&.min {
width: measure($space: hand);
}
&.max {
width: measure($space: hand, $max: true);
}
}Compiled CSS
div.min {
width: 320px;
}
div.max {
width: 599px;
}Requires
- [function]
throw - [function]
throw - [variable]
max-sizes - [variable]
max-sizes - [variable]
sizes - [variable]
sizes
Used by
- [mixin]
display-on - [mixin]
display-on - [mixin]
display-on - [mixin]
display-on
mixins
display-on
@mixin display-on($size: null, $until: null) { ... }Description
Creates the correct media query according to a space size input. The exact values will be the limits of said space in pixels. Devices with screens smaller than 320px are not going to be handled by the 'display-on()' function. Correct input values are: hand, page, book, desk, and wide.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$size | Space size that will be used to create a media query. | String | null |
$until | Optional space size used to extend $size space to a larger limit. | String | null |
Content
This mixin allows extra content to be passed (through the @content directive).
Example
Sass
div {
@include display-on(page, $until: desk) {
// Style
}
}Compiled CSS
div {
@media (min-width: 600px) and (max-width: 1799px) {
// Style
}
}Output
- Media query with a range width according to standard of space sizes.
Requires
grid
@mixin grid($columns: 0, $offset-mutiplier: 0) { ... }Description
Sets the correct grid attributes depending on the amount of columns and offset spaces.
Parameters
| parameter Name | parameter Description | parameter Type | parameter Default value |
|---|---|---|---|
$columns | Amount of columns, can only be 4, 8 or 12. | Number | 0 |
$offset-mutiplier | This number multiplied by 24px will become the grid’s margin and offset. | Number | 0 |
Example
Sass
div {
@include grid(12, 4);
}Compiled CSS
div {
display: grid;
grid-gap: 24px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
padding-left: 96px;
padding-right: 96px;
width: 100%;
}Output
- Displays a grid and sets it's columns, gap and padding.