Sugar (v1.0.3)
The goal of Sugar is certainly not to tells you how to organize your project. It's just like a sugar in the coffee, you choose the coffee, Sugar enhance it with a nice touch!
Visit Website for full documentation
Write less, do more!
Sugar has a lots of cool mixins to help you write cleaner scss:
.my-cool-element
This will give:
Quick start
Importing sugar
Configure your sugar :
colors : ( orange : #f2bc2b // your colors here... ), transition : ( // your transitions settings here... ) // and many more settings by packages // like font-awesome, modular-scale, // animate.css, BEM, etc... ));
Helper classes (if wanted) :
,,,,,,,,,//
Take advantage of all the powerful sugar mixins, functions, etc...
.h1 .my-font-element .popover // and many more mixins and functions...
Cool packages out of the box
Sugar comes with some nice packages like font-awesome, animate.css, etc... out of the box. These packages are optimized to generate only the css you need!
- Font Awesome
- Sassdash
- CSSGram
- modular-scale
- animate.css
- ...
You can choose or not to use the embeded packages. Nothing stop you to install them by yourself and use the versions you want...
A not limited list of mixins
- s-font
- s-animation
- s-background
- s-bubble
- s-clearfix
- s-columns
- s-corner (s-border-radius)
- s-filter
- s-fit
- s-font
- s-font-face
- s-icon
- s-list / s-list-item
- s-long-shadow
- s-media
- s-position
- s-placeholder
- s-ratio
- s-show-rhythme
- s-selection
- s-size
- s-text-hidden
- s-text-truncate
- s-transform
- s-transition
- s-translate
- s-vertical-rhythme
- s-visually-hidden
- ...
A not limited list of functions
- s-color
- s-is
- s-setting
- s-size
- s-px
- s-rem
- s-em
- s-percent
- s-sqrt
- s-pow
- s-sin
- s-cos
- and many more...
That's not finished...
Sugar offer you a lot of features and advanced settings that you can discover on the full website.
Visit Website for full documentation
Tested with
Generator | Version | |
---|---|---|
Sass | 3.4.18 | |
Gulp | 3.9.0 | |
NPM | 2.5.1 | |
Libsass | 3.3.3 | |
Grunt | 0.4.4 |