CSS PREPROCESSORS

Sweta Shrestha

shresthasweta.com.np

@sweet_anjell

 I WILL TALK ABOUT

• CSS Weaknesses
• Preprocessors Features
• Less, Sass or stylus

 CSS WEAKNESSES

• Lack of essential basic features
• Hard to Maintain
• Not DRY Enough
• Working with multiple files

CSS PREPROCESSORS

FEATURES

VARIABLES

Less

@brand-color:#F16622;
.container {
    background: @brand-color;
}

Sass

$brand-color:#F16622;
.container {
    background: $brand-color;
}

Stylus

brand-color = #F16622
.container 
    background brand-color

OPERATIONS AND COLOR FUNCTIONS

Maths and color operations

width: 200px * 4 - 300px; // =500px
color: #990033 + #666666; // =FF66CC

Color functions

$brand-color:#F16622;
$lighten-brand-color: lighten($brand-color,20%);
$saturate-brand-color: saturate($brand-color,20%);

MIXINS

Less

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

.rounded-btn {
    .border-radius(4px);
}

Sass

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    border-radius: $radius;
}

.rounded-btn {
    @include border-radius(4px);
}

Stylus

border-radius(n) 
    -webkit-border-radius n
    -moz-border-radius n
    -o-border-radius n
    border-radius n

.rounded-btn 
    border-radius(4px)

NESTING

nav {
    width: 600px;
    ul {
        padding: 0;
	li {
            float: left;
            a {
                color: #333;
		&:hover {
		    text-decoration: underline;
	        }
	    }
	 }
    }
}


Output CSS:

nav { width: 600px; }
nav ul { padding: 0; }
nav ul li { float: left; }
nav ul li a { color: #333; }
nav ul li a:hover { text-decoration: none; }

IMPORTS

@import "colors";
@import "typography";
@import "layouts";

Output CSS:

.container { width: 600px; margin: 0 auto; }
.container p { font-family: "ubuntu"; font-size: 15px; }
.container span { color: #333; background: #ccc; }

LESS,SASS

 or

STYLUS?

80% of the sass,less and stylus is the same.

The 20% that is different is in advanced usage.

SASS

@extend

@media

@extend

$button {
    background: $blue;
    color: #fff;
    font-size: 16px;
}

.save-button {
    @extend $button;
    font-size: 20px;
}

@media

.wrapper {
    width: 940px;
    margin: 0 auto;
    @media only screen and (max-width: 940px) {
        width: 100%;
    }
}

COMPASS

Compass makes sass even more awesome.

• CSS3 Mixins,supports almost every css3 feature. 
• typography styling helpers.
• Generates css sprites

STYLUS

Syntax

Language

@Keyframes

@Keyframes

@keyframes pulse
    0%,100%
        -webkit-transform translateX(0)   
    20%,60%
         -webkit-transform translateX(-10px)
    40%,80%
        -webkit-transform translateX(10px)

Less just doesn't have the features or power of SASS or Stylus.

SASS and Stylus both have similar features, a powerful plugin ecosystem and lots of css3 helpers.

CHOOSE WISELY

HAPPY CODING :)