An elegant way to define your CSS variables in all their forms
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.
$ npm install lyas
1. Import Lyas at the beginning of your stylesheet
2. Set your CSS variables using the pre-defined
3. Use your CSS variables as you would usually do.
4. Inject all the CSS variables defined with
var-mq into the
:root selector. [Must be placed at the very end of your file]
The example above from the second-point will be compiled into:
var-mq mixin takes multiple arguments.
|$sm||Small devices value|
|$md||Medium devices value|
|$lg||Large devices value|
|$xl||Extra large devices value|
By default, Lyas comes with four pre-defined breakpoints:
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);
You can choose to omit some breakpoints (as the
smin the example) but you still have to set their value to