colorscss
v0.1.7
Published
Color themes tool for SASS
Downloads
3
Readme
Tool created for provide SASS color themes functionality in a handy way, allow to having separate *.scss file for each theme, but without generating multiple CSS files as an output. All theme-related styles are injected in the main stylesheet, so you can switch themes by simply change the HTML container class, without loading another CSS file.
This is implementation of the idea from http://www.sitepoint.com/sass-theming-neverending-story/ article. It may be a good solution, when you have got just a few color variants in your app, and it's great when you have to switch them on the fly.
Note: was tested with Node v6.5.0.
Instalation
$ npm install colorscss --save-devSetup
You can require module in your Gulpfile or any other JS file which will be executed by Node.js (by running $ node file.js e.g. from npm scripts, watch-run, webpack-shell-plugin).
const colorscss = require('colorscss');In this file, call colorscss function generate() with arguments as listed in example below.
colorscss.generate({
input: [
{theme1_name_key: './themes_path/theme1.scss'},
{theme2_name_key: './themes_path/theme2.scss'}
],
output: './themes_path/generated_multitheme_file.scss'
});Usage
####1.
Every input SASS file should contains the same color variables set, declared as color literals, hex values, color functions like rgba(), lighten(), darken(), or reference to a previous variable:
$var1: black;
$var2: rgba(#333, 0.5);
$var3: #F0F0F0;
$var4: lighten($var1, 20);####2.
Generated output (which is also *.scss file) should be imported in your SASS stylesheet and be reachable from every file which using themed colors (so I recommend import it at the top of main stylesheet).
import './themes_path/generated_multitheme_file';####3.
Instead of using colors directly in CSS properties, take advantage from using one of colorscss SASS mixins. These are the most common ones:
@include themify('border-color', $var1, '!important');
@include themifyRGBA('background-color', $var1, 0.7, '!important');Note: '!important' is an optional argument.
In case that you need some more complex ones, like gradient or brightness functions, take a look at the list of available mixins.
####4.
Put chosen theme name key (passed in colorscss.generate() call) in <body> or <html> attribute class="". Voila!
##Available mixins
#####For solid color
- themify(property, color, '!important')
@include themify('border-color', $var1, '!important');
#####For semi-transparent color
- themifyRGBA(property, color, opacity, '!important')
@include themifyRGBA('background-color', $var1, 0.7, '!important');
#####For linear gradient
- themifyGradient(direction, color1, opacity1, percent1, color2, opacity2, percent2)
@include themifyGradient('right', $var1, 0.2, '0%', $var3, 0.8, '50%');
#####For box shadow
- themifyBoxShadow('inset x y blur spread', color, '!important')
@include themifyBoxShadow('3px 3px 10px', $var1, '!important');@include themifyBoxShadow('inset 0 0 0 5px', $var1);
#####For darker shade
- themifyDarken(property, color, value)
@include themifyDarken('border-color', $var3, '20%');
#####For brighter shade
- themifyLighten(property, color, value)
@include themifyLighten('border-color', $var3, '20%');
#####For SVG fill color
- themifySVG(color, '!important')
@include themifySVG($var1, '!important');