{ By: "Nirmal V",
Date: 19/02/2017
Location: Kochi Ruby Meetup, Kochi }

Some Background

I am a developer and a project manager, As a coder, mostly I code webapps using PHP and javascript 

Less and Sass are CSS pre processors or dynamic style sheet languages that extends the capabilities of CSS.

These tools helps us write cleaner, cross browser friendly CSS more faster and easier.

 

These tools reduce the repetition with CSS and helps us to save a lot of time. It helps to convert your CSS code more structural and modular.

Installing

gem install sass
sass style.scss style.css
sass --watch C:\ruby\lib\sass\style.scss:style.css
$ npm install less
lessc style.less style.css

SASS

Less (Command line usage or usage with Node development)

<script src="less.js"></script>
<link href="styles.less" rel="stylesheet/less" type="text/css"/>

Using less in the browser

Ok Ok, which is best?
 

Sass if you are using Ruby. Less if you using Node and also if you afraid of the command line.

Slightly longer answer

80/20

80% of Sass, Less are the same.
20% that is different is in advanced usage.

What is Less?

  • Less is a tool that extends CSS with the additions of variables, mixins, operations and nested rules.
  • Originally written in Ruby, Now less is rewritten in javascript.
  • There is now less implementations in other languages, i.e. PHP, .Net

Why to use Less?

  • LESS supports creating cleaner, cross-browser friendly CSS faster and easier.

  • LESS is designed in JavaScript and also created to be used in live, which compiles more faster than other CSS pre-processors.

  • LESS keeps your code in modular way which is really important by making it readable and easily changeable.

  • Faster maintenance can be achieved by the use of LESS variables.

Less - Nested Rules

.container h1 {
  font-size: 25px;
  color: #E45456;
}
.container p {
  font-size: 25px;
  color: #3C7949;
}
.container .myclass h1 {
  font-size: 25px;
  color: #E45456;
}
.container .myclass p {
  font-size: 25px;
  color: #3C7949;
}
.container{
  h1{
       font-size: 25px;
       color:#E45456;
 }
  p{
       font-size: 25px;
       color:#3C7949;
  }

 .myclass{
  h1{
        font-size: 25px;
        color:#E45456;
  }
  p{
       font-size: 25px;
       color:#3C7949;
  }
 }
}

style.less

style.css

lessc style.less style.css

LESS - Operations

.myclass {
  font-size: 20px;
  color: green;
}
@fontSize: 10px;
.myclass {
 font-size: @fontSize * 2;
 color:green;
}

style.less

style.css

lessc style.less style.css

LESS - Functions

.mycolor {
  color: #FF8000;
  width: 100%;
}
@color: #FF8000;
@width:1.0;
.mycolor{
color: @color;
 width: percentage(@width);
}

style.less

style.css

lessc style.less style.css

LESS - Importing

.myclass {
  color: #FF8000;
}
.myclass1 {
  color: #5882FA;
}
.myclass2 {
  color: #FF0000;
}
@import "myfile.less";
.myclass2
{
color: #FF0000;
}

style.less

style.css

lessc style.less style.css
.myclass{
    color: #FF8000;
}

.myclass1{
    color: #5882FA;
}

myfile.less

LESS - Mixins

.p1 {
  color: red;
}
.p2 {
  background: #64d9c0;
  color: red;
}
.p3 {
  background: #DAA520;
  color: red;
}
.p1{
  color:red;
}
.p2{
  background : #64d9c0;
  .p1();
}
.p3{
   background : #DAA520;
  .p1;
}

style.less

style.css

lessc style.less style.css

LESS - Mixins with Multiple Parameters

.myclass {
  color: #FE9A2E;
  padding: 2;
}
.mixin(@color) {
  color: @color;
}
.mixin(@color; @padding: 2) {
  color: @color;
  padding: @padding;
}

.myclass {
  .mixin(#FE9A2E);
}

style.less

style.css

lessc style.less style.css

LESS - Parametric Mixins

.border(@width; @style; @color) {
    border: @width @style @color;
}

.myheader {
    .border(2px; dashed; green);
}

LESS - Extend

h2 {
  &:extend(.style);
  font-style: italic;
}
.style {
  background: green;
}
h2 {
  font-style: italic;
}
.style,
h2 {
  background: blue;
}

style.css

style.less

What is Sass?

  • Sass is an extention of CSS3, adding nested rules, variables, mixins, selector inheritance and more.
  • It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

What is Sass?

  • Sass has two syntaxes. SCSS, SASS
  • SCSS: It is a superset of CSS3's syntax. Every valid CSS style sheet is valid SCSS as well. Extention is .scss.
  • SASS: It's uses the intentation of lines to specify blocks.
    Extention of its syntax is .sass

Syntax of Sass

//SCSS
#header{
  h1 {
    font-size:26px;
    font-weight:bold;
  }
} 

//SASS
#header
h1
font-size:26px
font-weight:bold

/* Compiled CSS */
#header h1{
    font-size:26px;
    font-weight:bold;
}

Installation

For converting sass to css

sass input.scss output.css
sass --watch C:\ruby\lib\sass\style.scss:style.css

For auto update the css every time the sass file changes

Gem install Sass

Convert Sass to Scss

Convert Scss to Sass

sass-convert style.sass style.scss
sass-convert style.scss style.sass

Differences B/W Sass and Less

  • Sass has much robust mixin libraries available compared to less.

  • Sass has actual logical and mixing operators in the language. if/then/else statements , for loops, while loops and each loops.  

  • Less is following sass advances. For eg, extend was not supported in Less until 1.4

  • Less is built upon Javascript, so installing less is as easy as linking javascipt library to your HTML document.

Differences B/W Sass and Less

//SCSS
$color1: #ca428b;
.div1{
  background-color : $color1;
}
.div2{
  background-color : $color1;
}
//LESS
@color1: #ca428b;
.div1{
  background-color : @color1;
}
.div2{
  background-color : @color1;
}

Syntax - Variables

Differences B/W Sass and Less

//SCSS
@mixin border-radius ($values) {
  border-radius: $values;
}
nav {
  margin: 50px auto 0;
  width: 788px;
  height: 45px;
  @include border-radius(10px);
}
//LESS
.border(@radius) {
  border-radius: @radius;
}
nav {
  margin: 50px auto 0;
  width: 788px;
  height: 45px;
  .border(10px);
}

Syntax - Mixins

Differences B/W Sass and Less

//LESS
@margin: 10px;
 
div {
  margin: @margin - 10%; /* = 0px (Weird) */
}
//SASS
$margin: 10px;
div {
  margin: $margin - 10%; /* Syntax error: Incompatible units: '%' and 'px' */
}

Maths:

Questions?

nirmalkamath@gmail.com

CSS Preprocessors - Sass vs Less

By nirmalvyas

Made with Slides.com

CSS Preprocessors - Sass vs Less

  • 1,308

More from nirmalvyas