sscreen
A scss library for working with custom media queries
Install
npm i sscreen -D
Usage
The library consists of a mixin screen-set
which lets you define your breakpoints and a function screen-get
for retrieval as well as mixins screen-up
and screen-down
by which you actually make your stuff responsive.
Note: For getting
sscreen
to work in recent user-agents,@custom-media
directives must be transpiled on top of scss compilation. See postcss-custom-media for further information
Here's a complete example...
// postcss.config.jsmoduleexports = plugins: preserve: true // For the sake of example, we preserve our transpiled @custom-media rules ;
;;; // Define your breakpoints ;
// Grid.scss .Grid
// GridItem.scss .GridItem
Output:
@); @); @); @); @); @); @); @); /* ... */ { /* ... */} { /* ... */} { /* ... */} { /* ... */} { /* ... */} { /* ... */} { /* ... */} { /* ... */}
Note:
sscreen
is intented for being used at application level and is currently not suited for being incorporated into a dedicated scss library
Development
In order to run specs, issue the following from your terminal:
npm test
Run dev-server
npm start
Create a build (for whatever purpose)
npm run build