Css3 Less & Sass

 Css3 Less & Sass

Write less do more

A program that takes one type of data and converts it to another type of data.

Popular CSS preprocessor languages include LESS and SASS

Following reasons should consider using a CSS preprocessor

It adds the stuff that should have been in CSS in the first place

It will make your CSS dry

It will save you time

It will make your code easier to maintain

It will make your CSS more organized

It's easy to set up

It will make your websites prettier

It's easier to write than you think

Frameworks that supercharge your CSS

 

 

Functions

Less provides a variety of functions which transform colors, manipulate strings and do maths.

@base: #f04615;

@width: 0.5;

.class {

  width: percentage(@width); // returns `50%`

  color: saturate(@base, 5%);

  background-color: spin(lighten(@base, 25%), 8);

}

Nested rules

oYou can also bundle pseudo-selectors with your mixins using this method.

o& represents the current selector parent

o

.clearfix {

  display: block;

  zoom: 1;

  &:after {

    content: " ";

    display: block;

    font-size: 0;

    height: 0;

    clear: both;

    visibility: hidden;

  }

}

Media query bubbling and nested media queries

Media queries can be nested in the same way as selectors.

Selectors are copied into the body of the media query:

Importing

oimport a .less file, and all the variables in it will be available.

oThe extension is optionally specified for .less files.

  @import "library";  // library.less

  @import "typo.css";

Operations

oAny number, color or variable can be operated on.

oLess understands the difference between colors and units.

 

  @base: 5%;

  @filler: @base * 2;

  @other: @base + @filler;

  color: #888 / 4;

  background-color: @base-color + #111;

  height: 100% / 2 + @filler;

Importing

oimport a .less file, and all the variables in it will be available.

oThe extension is optionally specified for .less files.

  @import "library";  // library.less

  @import "typo.css";

Operations

oAny number, color or variable can be operated on.

oLess understands the difference between colors and units.

 

  @base: 5%;

  @filler: @base * 2;

  @other: @base + @filler;

  color: #888 / 4;

  background-color: @base-color + #111;

  height: 100% / 2 + @filler;

Sass is

oa CSS preprocessor

oan extension of CSS

oadds power and elegance to the basic language.

Allows to use 

oVariables

oNnested rules

oMixins

oInline imports

oWith a fully CSS-compatible syntax

Helps to

oKeep large style-sheets well-organized

oGet small style-sheets up and running quickly

 

Installation

> Install Ruby

> gem install sass

> sass style.scss appstyle.css

> sass --watch style.scss appstyle.css