Coding pure css is bad, coding scss is good, coding scss with a little sugar has never tasted better!

Why Sugar?

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!

Cool mixins and classes

Sugar gives you access to a lot of cool mixins to handle common tasks that normally can be tricky to achieve as well as some very useful classes that match your settings.

Nice syntaxes

The goal of Sugar is also to make you write less code to achieve more. 1 line of code can replace 10 lines of standard css...

Easy to use

Sugar is not build to be a complexe library to use. The mixins are easely understandable and are made around the properties you already knows...

Vertical rhythme made easy

We all know as front-end developers that the vertical rhythme concept is nice, but sometimes it became hard to understand and implement. Sugar is here for you guys!

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!

Manage fonts, colors, etc...

Sometimes it become hard to manage your colors, fonts, sizes, etc... to stay coherent in your design and code implementation. Sugar can help you with that!

  • Setting up
  • A lot of mixins
  • Helper classes

// import sugar
@import "sugar/sugar";

// setting up 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...

// use the available mixins with the nice sugar syntax
.my-cool-bubble {
	@include s-bubble(top s-color(orange) 15px 10px);
h1 {
	@include s-font(12px #222 bold uppercase underline);
	// make something different on chrome retina display
	@include s-media(retina chrome) {
		@include s-font(16px);
// and more than 25 very useful mixins to
// discover in the documentation like :
// s-background, s-columns, s-list, etc...

<!-- automatic colors, margins, padding, etc... classes -->
<!-- depending on your settings -->
<h1 class="c-orange m-b-small">
	Hello world

<!-- helpers classes that you can choose. -->
<!-- you can even create your own set of helpers classes -->
<h1 class="text-uppercase clearfix">
	<span class="pull-right">world</span>

// import settings
@import "settings";

#content {
	// using gridle_set
	@include gridle_set( (
		grid : 8,
		mobile : (
			grid : 12
	) );

	// using universal mixin
	@include gridle(8 mobile 12);
#sidebar {
	@include gridle_grid(4);
	@include gridle_state( mobile ) {
		@include gridle_grid(12);
		background: pink;
.component {
	background: red;

	// element queries support
	@include gridle_eq(-200px) {


Download the Sugar package with demo files and all you need to get started right here!


Ruby Gem

Need a simple way to install and update Sugar, use the Sugar Ruby Gem available by taping :


Another way to install and update Sugar, use the Sugar Bower Component available by taping :


Another simple way to install and update Sugar, use the Sugar NPM package available by taping :

Discover the Sugar best friend

An easy & complete documentation

A good library is a documented library. That's why Sugar has his own full and easy documentation. No need to be an advanced developper to use it.

Access full documentation

Help me to keep Sugar as good as possible

Sugar is a project that I maintain in my free time. All of this take me a lot of efforts so if you love Sugar, a little donation is as welcome as a fresh bier!

Stay in touch

Don't miss anything new about Sugar, updates, etc... You will not be spammed don't worry

Fork me on GitHub