lyas
v1.0.5
Published
An elegant way to define your CSS variables in all their forms
Downloads
13
Maintainers
Readme
Lyas
An elegant way to define your CSS variables in all their forms
Version v1.0.5
Lyas is a Sass-based library which provide an alternative solution to define your CSS variables and their values depending of the current device-width.
Installation
NPM
$ npm install lyas
Download
See https://github.com/VeronQ/lyas/blob/1.0.5/lyas.scss
CDN
See https://cdn.jsdelivr.net/npm/lyas@latest/lyas.scss
Usage
1. Import Lyas at the beginning of your stylesheet
@import '<path-to>/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: 768px) {
:root {
--text-color: blue;
}
}
@media screen and (min-width: 992px) {
: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 $breakpoints
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
.