đ¨ Sass-colors đ is a scss library, which adds modern colors.
- đ¨ Demo
- đ Documentation
- đŹ Description
- đŚ Installation
- âśď¸ Getting started
- đ¨ Colors
đ Demo
Preview live Click Here
đ Documentation
Go to documentation Click Here
đ Description
Under the hood, sass-colors uses scss/sass, but also provides compatibility with a wide range of other libraries, such as Eg ReactJs, Vuejs, Angular, which allows easy use of the countless third-party add-ons that are available!
đŚ Installation
To start using Sass-colors you need to install it with the package manager npm or yarn, as shown in the next section or download it directly!
// To install using npmnpm install sass-colors -SÂ// To install using yarnyarn add sass-colors
âśď¸ Getting started
To use the beautiful colors of sass-colors is very simple, first we will import the colors.scss file that contains the colors. Example:
// If you use nodejs, reactjs, vuejs or angular ; // You can also download it directly and import the file colors.scss, as follows ; // usage: color("name_of_color", "type_of_color") // to avoid to repeating map-get($colors, ...)Â
As you can see we already import correctly! Sass-Colors includes a function that adds selection a color and its secondary color, for example:
; body .buttonÂ
// I will explain more clearly! // First we import this color map for this example.  /**| Main Color | Color value |**/;// 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.