This is a fork from the original repo

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!

Sugar has a lots of cool mixins to help you write cleaner scss:

.my-cool-element {
    @include s-font(12px helvetica bold underline uppercase nowrap right);
}

This will give:

.my-cool-element {
    font-size : 12px;
    font-family : helvetica;
    font-weight : bold;
    text-decoration : underline;
    text-transform : uppercase;
    white-space : nowrap;
    text-align : right;
}

Importing sugar

@import "sugar/sugar"

Configure your sugar :

@include sugar((
	typo : (
		font-size : 13px
		// etc...
	),
	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...
));

@include sugar(classes);

.pull-left, .pull-right
.m-t-{size}, .m-b-{size}, .m-l-{size}, .m-r-{size}, .m-s-{size}
.p-t-{size}, .p-b-{size}, .p-l-{size}, .p-r-{size}, .p-s-{size}
.text-left, .text-right, .text-center, .text-justify, .text-uppercase, .text-lowercase, .text-capitalize
.c-{color}, .bkg-{color}
// and many more

.h1 {
    @include s-vertical-rhythme((
        s-font : 30px helvetica uppercase,
        margin-botton : 20px
    ));
}
.my-font-element {
    @include s-font(12px s-color(orange, light) uppercase underline nowrap);
}
.popover {
    // an orange bubble with an arrow top 20px
    @include s-bubble(top s-color(orange) 20px);
}
// and many more mixins and functions...

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...

• 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
• ...

• 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...

Sugar gives you for nearly free some very cool complexe effects like motion blur, etc..

Sugar gives you some very useful fully customizable components like drawers and more to come.

Sugar offer you a lot of features and advanced settings that you can discover on the full website.

	Generator	Version
	Sass	3.4.18
	Gulp	3.9.0
	NPM	2.5.1
	Libsass	3.3.3
	Grunt	0.4.4