1.0.2 ⢠Published 5 years ago
cbscroll-top v1.0.2
- šØ Demo
- š Documentation
- š¬ Description
- š¦ Installation
- ā¶ļø Getting started
šØ Colors
š Demo
š Documentation
š Description
š¦ Installation
// To install using npm
npm install sass-colors -S
// To install using yarn
yarn add sass-colors
ā¶ļø Getting started
// If you use nodejs, reactjs, vuejs or angular
@import "node_modules/sass-colors/src/colors.scss";
// You can also download it directly and import the file colors.scss, as follows
@import "src/colors.scss";
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
@import "src/colors.scss";
body {
// First parameter receives the name of the main color, and as a second parameter requires the name of the secondary color
// usage: color("name_of_color", "type_of_color")
// to avoid to repeating map-get($colors, ...)
background: color("red", "base");
}
.button {
background: color("blue", "accent-1");
color: white;
border: 1px solid color("blue", "darken-1");
}
// I will explain more clearly!
// First we import this color map for this example.
/**
| Main Color | Color value |
**/
$deep-red: (
"base": #e51c23,
"lighten-5": #fdeaeb,
"lighten-4": #f8c1c3,
"lighten-3": #f3989b,
"lighten-2": #ee6e73,
"lighten-1": #ea454b,
"darken-1": #d0181e,
"darken-2": #b9151b,
"darken-3": #a21318,
"darken-4": #8b1014,
);
// When you execute the function that requires two parameters
/**
color($primary-color, $secondary-color)
**/
šØ Colors
N° | Name | Lighten | Darken | Accent |
---|---|---|---|---|
1 | deep-red | āļø | āļø | ā |
2 | red | āļø | āļø | āļø |
3 | pink | āļø | āļø | āļø |
4 | purple | āļø | āļø | āļø |
5 | deep-purple | āļø | āļø | āļø |
6 | indigo | āļø | āļø | āļø |
7 | blue | āļø | āļø | āļø |
8 | light-blue | āļø | āļø | āļø |
9 | cyan | āļø | āļø | āļø |
10 | teal | āļø | āļø | āļø |
11 | green | āļø | āļø | āļø |
12 | light-green | āļø | āļø | āļø |
13 | lime | āļø | āļø | āļø |
15 | yellow | āļø | āļø | āļø |
16 | amber | āļø | āļø | āļø |
17 | orange | āļø | āļø | āļø |
18 | deep-orange | āļø | āļø | āļø |
19 | brown | āļø | āļø | ā |
20 | blue-grey | āļø | āļø | ā |
21 | grey | āļø | āļø | ā |
šØ Shades
N° | Name | Ligthen | Darken | Accent |
---|---|---|---|---|
22 | black | ā | ā | ā |
23 | white | ā | ā | ā |
24 | transparent | ā | ā | ā |
ā Support for
Sass-colors is an open source project licensed by MIT. You can grow thanks to the sponsors and the support of the amazing sponsors. If you want to join them, contact me here.
š© Stay in touch
- Author Yoni Calsin
- Twitter Yoni Calsin
This project follows the all-contributors specification. Contributions of any kind welcome!
š License
Sass-colors is MIT licensed.