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
;
var-mq
mixin.
2. Set your CSS variables using the pre-defined 3. Use your CSS variables as you would usually do.
.foo
var-mq
into the :root selector
. [Must be placed at the very end of your file]
4. Inject all the CSS variables defined with The example above from the second-point will be compiled into:
{}{}
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);
You can choose to omit some breakpoints (as the
sm
in the example) but you still have to set their value tonull
.