{ 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
CSS Preprocessors - Sass vs Less
- 1,308