A minimalistic Sass library for making CSS and SASS life easier. I see Sass as a way to write browserconsistent CSS. This library makes this process easier and more maintainable.
- Version: 2017-12-13
- Author: Erik Joling [email protected]
Note: Some of these packages prevent the redundancy of writing extensive code over and over again. But I think this should be handled by your editor via code-snippets. I think it's unnecessary to distantiate from vanilla CSS for this reason.
Note: The two reasons I use sass are: 1) to centralize layout and styling settings.* 2) to have extra control of writing browserconsistent CSS.**
- I could also use helper classes or variables for this reason (NO! -->). The downside is that I need to add this to my HTML and I don't want that, because it fades the line between content and styling. ** Flexbox in IE10/11 needs an additional max-width/height property for example. With Sass I can easily add this to the flex-item mixin.
This library consists of multiple (largely) independant functionalities.
Define borderstyles in your settings file. Use functions like @border or @border-width to write your borders.
Make it easier to use breakpoints. (Maybe remove, because I could also write this manually and add as a code-snippet)
Centralize the color palette, ie. multiple main colors and their variants
Helper functions to make my Sass life easier
@functions: strip-units, rem, em, shade, tint
@mixins: on-event
Easy and consistent access to font-awesome icons
Centralize the padding to the horizontal sides of the websites. Has support for breakpoints (which is the reason it exists).
Use v-space and h-space to create consistent space-sizes over the entire website.
Create a consistent typography structure. Define you fonts (family, weights, styles) in your settings and use the mixins and functions in your Sass
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent