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 {
    @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;
}

Quick start

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

Helper classes (if wanted) :

@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

Take advantage of all the powerful sugar mixins, functions, etc...

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

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 |