This repository has been archived by the owner on Nov 6, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Mixins
Anthony Bellancourt edited this page Jan 21, 2021
·
1 revision
Allows you to use a selector and insert content into it
Arguments | Description |
---|---|
selector | Selector name |
value | Selector value |
extends | Placeholders to extends |
Exemple:
+add-selector('container', 'full'){
width: 100%;
background-color: white;
}
Return:
[_container~="full"] {
width: 100%;
background-color: white;
}
Allow you to put value inside a selector
Arguments | Description |
---|---|
value | Selector value |
extends | Placeholders to extends |
You need to set the
current_selector
value before.Exemple:
+add-selector('container'){
_.current_selector = 'container';
width: 100%;
background-color: white;
+add-value('limited'){
max-width: 1280px;
}
}
Return:
[_container] {
width: 100%;
background-color: white;
}
[_container][_container~="limited"] {
max-width: 1280px;
}
Add a extends to created placeholders
Arguments | Description |
---|---|
name | Placeholders name |
Return the most contrasted theme color between light and dark for the given color
Arguments | Description |
---|---|
color | Color value |
Add automatically the box-shadow with the given modifier and the shadow variables
Arguments | Description |
---|---|
modifier | Modifier value |
Use the font face with the arguments
Arguments | Description |
---|---|
family | Font family name |
file | File name see font-url |
hack-chrome-windows | if use the hack for chrome |
weight | Font weight |