Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gone369/sass-themify
sass mixin for managing multiple themed sass templates
https://github.com/gone369/sass-themify
sass scss style theme themify
Last synced: 2 months ago
JSON representation
sass mixin for managing multiple themed sass templates
- Host: GitHub
- URL: https://github.com/gone369/sass-themify
- Owner: gone369
- License: mit
- Created: 2017-04-20T08:32:32.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:28:42.000Z (about 2 years ago)
- Last Synced: 2024-10-31T17:28:58.673Z (3 months ago)
- Topics: sass, scss, style, theme, themify
- Language: SCSS
- Size: 1.19 MB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Sass-Themify
============
[](https://www.npmjs.com/package/sass-themify)   
Sass-Themify is a sass library that comes with a set of mixins and functions to help you easily manage multiple color(or variable) themes.
### Usage
##### main.scss
```scss
@import "sass-themify";
@import "box";
//define a theme map
$theme-map: (
'default':(
'text-color':black,
'background-color':white
),
'red':(
'text-color':red,
'background-color':white
),
'blue':(
'text-color':blue,
'background-color':white
)
);
//call initialize mixin with the theme-map variable
@include sass-themify-init($theme-map);
```
Then in your other scss component file:
##### box.scss
```scss
#box{
width: 100px;
height: 100px;
display: table;
#text{
display: table-cell;
vertical-align: middle;
text-align: center;;
font-size: 12px;
}
}
//all color related styling goes below within the sass-themify mixin ( you can even put this in a seperate file if you like )
@include sass-themify(){
#box{
background-color: sass-themify-get-color("background-color");
#text{
color: sass-themify-get-color("text-color");
}
}
};
```
Now everytime you append a theme name to body's class, ie.
```html
...
```
`sass-themify-get-color` will get the corresponding variable name fed into the function from `$theme-map`.
Here's a demo on CodePen: [Codepen Demo](https://codepen.io/gone369/pen/vmGaNd)
It's that simple!
The advantages in managing your themes this way is that you are able to seperate out color styling code into seperate components while having a single point of management for your color schemes in a hash/map-like format.
### Setup and Installation
The simplest way is to just clone the repo and include `sass-themify.scss` as a partial from your main scss file.
##### NPM
`npm install sass-themify`
##### Webpack Config
usage with webpack and sass-loader
```javascript
var path = require("path");
...
module: {
rules: [
...
{
test:/\.(scss|sass)$/,
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "sass-loader",
options: {
includePaths: [
path.resolve(__dirname, "../node_modules/sass-themify"),
]
}
}
]
}
]
}
...
```
then you should be able to just do
```scss
@import "sass-themify"
```
in your scss file
a full working example is in the [test folder](https://github.com/gone369/sass-themify/tree/master/test)
If you like it please support me by giving me a star!