1.0.2 • Published 5 years ago
lyas.scss v1.0.2
Lyas
An elegant way to define your CSS variables in all their forms
Version v1.0
Lyas is a Sass-based solution which provide an alternative solution to define your CSS variables and their values depending of the current device-width.
Installation
NPM
$ npm install -D lyas.scss
CDN
See https://cdn.jsdelivr.net/gh/VeronQ/lyas@1.0/lyas.scss
Usage
1. Import Lyas at the beginning of your stylesheet
@import 'lyas';
2. Set your CSS variables using the pre-defined var-mq
mixin.
@include var-mq(--text-color,
$default: red,
$md: blue,
$lg: green
);
3. Use your CSS variables as you would usually do.
.foo {
color: var(--text-color);
}
4. Inject all the CSS variables defined with var-mq
into the :root selector
. Must be placed at the very end of your file
@include init-lyas;
The example above from the second-point will be compiled into:
:root {
--text-color: red;
}
@media screen and (min-width: 992px) {
:root {
--text-color: blue;
}
}
@media screen and (min-width: 1280px) {
:root {
--text-color: green;
}
}
Options
@var-mq
The var-mq
mixin takes multiple arguments.
Variable | Required | Description |
---|---|---|
$custom-property | Yes | Variable name |
$default | Yes | Default value |
$sm | Small devices value | |
$md | Medium devices value | |
$lg | Large devices value | |
$xl | Extra large devices value |
$breakpoints
By default, Lyas comes with four pre-defined breakpoints:
sm
: 576pxmd
: 768pxlg
: 992pxxl
: 1200px
You can easily change those values by defining a new $breakpoint
map which will override the default one.
// A new defined breakpoints map (Materialize.css)
$breakpoints: (
'sm': null,
'md': 600px,
'lg': 992px,
'xl': 1200px
);
You can choose to omit some breakpoints (as the
sm
in the example) but you still have to set their value tonull
.