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