Neck to Neck: Less vs Scss

Less and Scss are two of the most popular CSS preprocessor used today. Most projects use either one of them and at times it gets difficult to remember how to implement something in one when you are working on another for quite some time. So, I am aiming that this article can act as a quick lookup for context switching from Less to Scss and visa versa.

Import dependencies

--- less ---
@import <file_path>
@import (<comma separated keywords list>) <file_path>
// read about keywords here - https://lesscss.org/features/#import-atrules-feature
--- scss ---
@import <file_path>
@use <file_path>
@forward <file_path>

Extend base class

.base-class {
  border: 1px solid;
}
--- less ---
.newClass {
  &:extend(.base-class);
}
--- scss ---
.newClass {
  @extend(.base-class);
}

Variables

--- less ---
@bg-color: #ffc;
--- scss ---
$bg-color: #ffc;

Mixins

--- less ---
.lessMixin(@color) {
   color: @color;
   background: @bg-color 
}
.someclass {
  .lessMixin(#fff);
}
--- scss ---
@mixin scssMixin($color) {
    color: $color;
    background: $bg-color;
}
.someclass {
  @include scssMixin(#fff);
}

Functions

--- less ---
// use like this .square(5)[@res]
.square(@var) {
  @res: @var*@var;  
}
--- scss ---
@function square($var) {
  @return $var*$var
}

Namespaces

--- less ---
// use like this #namespace.container
#namespace {
  .container(@h, @w) {
     width: @w;
     height: @h;
     padding: 10px
   }
}
--- scss ---
In scss this feature was mssing for long time. Now namespcing is achievied using @use rule while importing modules

Lists

--- less ---
@colors: blue, green, yellow, red;
// accessing list item
@index: 1;
extract(@colors, @index);
--- scss ---
$colors: blue, green, yellow, red;
// accessing list item
$index: 1;
list.nth($list, $index);

Maps

--- less ---
@sizes: {
  xs: 10px;
  s: 12px;
  @new: {
    xs: 13px;
  }
}
use as font: @sizes[xs]
// for nested 
font: @sizes[@new][xs] 
--- scss ---
$sizes: (
  xs: 10px,
  s: 12px,
  new: (
    xs: 13px
  )
);
use as font: map.get($sizes, 'xs') 
// for nested
font: map.get(map.get($sizes, 'new'), 'xs')

Conditional Logic

--- less ---
// use when for conditional styles, mixins, functions etc
@option: true
.conditional-style when(@option = true) {
   color: red;
}
--- scss ---
.class {
  @if $option == 'R' {
   text-align: right;
  } 
  @else if $option == 'L' {
    text-align: left;
  } @else {
    text-align: center;
  }
} 

Loops

--- less ---
// use recursion and condition for loops
.gen-clss(@n) when (@n>0) {
  .gen-clss(@n - 1);
  .clss-@{n} {
    font-size: @n*2px;
  }
}
.gen-clss(5);
--- scss ---
$n : 5;
@while($n != 0) {
  .clss-#{$n} {
    font-size: $n*2px;
  }
  $n: $n - 1;
}
@for $i from 1 through 3 {
   .myclss-#{$i} {
    font-size: $i*2px;
  }
}
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
  }
}

That’s all. Let me know in the comments if I missed something important.