- VARIABLES
- NESTED SELECTORS
- MIXINS
- DYNAMIC MIXINS (with Arguments)
- SELECTOR INHERITANCE
- COLOR FUNCTIONS
- HANDLING WITH NUMBERS
- FUNCTIONS & LOOP CONDITIONALS
- MEDIA QUERIES
- NAMESPACES
- SERVER SIDE IMPORTS
- OUTPUT FORMATTING
- COMMENTS
Note: The following SASS Examples below are shown in .SCSS
Syntax
SASS USES: $
LESS USES: @
Sass | Less -------------------------+----------------- $colorPrimary: #333; | @colorPrimary: #333; $siteWidth: 960px; | @siteWidth: 960px; | body { | body { color: $colorPrimary; | color: @colorPrimary; width: $siteWidth; | width: @siteWidth; } | }
SCOPING NOTE:
Atm SASS is using the global scoping only. Less is designed of scoping by default and uses global and local variables. In future updates of SASS you will be able to change the scoping with special declarations.
EXAMPLE:
Sass | Less -----------------------------------------+----------------- $color: black; | @color: black; | .scoped { | .scoped { $color: white; | @color: white; color: $color; | color: @color; } | } | .unscoped { | .unscoped { //SASS = white (overwritten by local) | // LESS = black (global) color: $color; | color: @color; } | }
The example below shows that there is no difference in nesting.
Sass | Less -------------------+----------------- p { | p { a { | a { color: red; | color: red; &:hover { | &:hover { color: blue; | color: blue; } | } } | } } | }
Sass | Less ----------------------------------+---------------------------------- @mixin bordered { | .bordered() { border-top: dotted 1px black; | border-top: dotted 1px black; border-bottom: solid 2px black; | border-bottom: solid 2px black; } | } | #menu a { | #menu a { @include bordered; | .bordered; }
Note:
A Class with an empty argument " () " will be used as mixin in LESS. That means that they will not be compiled into the .css if they are not in use. Advantage: It is also possible to use normal classes as mixins.
Sass | Less ----------------------------------+---------------------------------- @mixin bordered($width: 2px) { | .bordered(@width: 2px) { border: $width solid black; | border: @width solid black; } | } | #menu a { | #menu a { @include bordered(4px); | .bordered(4px); } | }
Sass | Less (since 1.4.0) | CSS Output ----------------------------+-----------------------------+--------------------------- .bordered { | .bordered { | .bordered, #menu a { border: 1px solid back; | border: 1px solid back; | border: 1px solid back; } | } | } | | #menu a { | #menu a { | @extend .bordered; | &:extend(.bordered); | } | } | | // OR USE IT THIS WAY: | | #menu a:extend(.bordered) { | | }
Note:
Both SASS & LESS provide similar color functions
Accessors:
red($color)
green($color)
blue($color)
hue($color)
saturation($color)
lightness($color)
alpha($color)
Mutators:
lighten($color, $amount)
darken($color, $amount)
saturate($color, $amount)
desaturate($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount)
transparentize($color, $amount)
mix($color1, $color2[, $amount])
grayscale($color)
compliment($color)
Christ Eppstein said that SASS supports "supports unit-based arithmetic": Complex units are supported in any intermediate form and will only raise an error if you try to print out the value of a complex unit.
Sass will let you define your own units and will happily print out unknown units into your css. Less will not. Sass does this as a form of future proofing against changes in the w3c specification or in case a browser introduces a non-standard unit.
SASS:
1cm * 1em => 1 cm * em 2in * 3in => 6 in * in (1cm / 1em) * 4em => 4cm 2in + 3cm + 2pc => 3.514in 3in / 2in => 1.5
LESS:
1cm * 1em => Error 2in * 3in => 6in (1cm / 1em) * 4em => Error 2in + 3cm + 2pc => Error 3in / 2in => 1.5in
SASS:
@IF
@ELSE IF
@ELSE
@THEN
@FOR
@WHILE
LESS:
WHEN
Let's say we want to create a mixin function that makes the background-color depend from the font lightness of the font color:
Do it with SASS:
@if lightness($color) > 30% { background-color: black; } @else { background-color: white; }
Do it with LESS:
.mixin (@color) when (lightness(@color) > 30%) { background-color: black; } .mixin (@color) when (lightness(@color) = 30%) { background-color: white; }
$emotions: happy sad excited mustached; @each $emotion in $emotions { .feeling-#{$emotion} { background-image: url("images/feeling-#{$emotion}"); } }
SASS Loop Compiled to CSS:
.feeling-happy { background-image: url("images/feeling-happy"); } .feeling-sad { background-image: url("images/feeling-sad"); } .feeling-excited { background-image: url("images/feeling-excited"); } .feeling-mustached { background-image: url("images/feeling-mustached"); }
Note:
It is also possible to generate Loops with LESS but it's a little bit more complicated with the WHEN
directive. Loops could be very useful if you have to generate a lot of code. It saves your time.
Note:
It's very useful to use variables for the naming of Media Query Breakpoints
SASS EXAMPLE (for LESS use the variables with an @
:
$small-breakpoint: 480px; $medium-breakpoint: 768px; $large-breakpoint: 1024px;div { width: 100%;
@media screen and (min-width: $small-breakpoint) { width: 100px; display: inline-block; } @media screen and (min-width: $medium-breakpoint) { width: 200px; } @media screen and (min-width: $large-breakpoint) { width: 400px; }
}
With SASS you can do it more fancy with Control Directives:
@mixin respond-to($name){ @if $name == small-screen { @media only screen and (min-width: 320px) { @content } } @if $name == large-screen { @media only screen and (min-width: 960px) { @content } } } aside { width: 25%; @include respond-to(small-screen) { width: 100%; } }Note: Let's do it similar with
LESS
:Update by @helgri
@small-screen: ~"only screen and (min-width:320px)"; @large-screen: ~"only screen and (min-width:960px)";aside{ width: 25%; @media @small-screen { width: 100%; } }
Note:
Less provides the feature of Namespaces that SASS can't do. The founder of SASS considered this feature and decided that adding it would create fragility and unexpected interconnectedness.
How to code Namespaces with LESS:
#bundle () { .red { background-color: red } .green { background-color: green } }.foo { #bundle > .red; }
In compiled CSS:
.foo { background-color: red; }
SASS
&LESS
will@import
other files. That's very useful because you can build your css modular, scalable and maintainable.3 Outputs of LESS
normal
compressed
yui-compressed
4 Outputs of SASS
nested
compact
compressed
expanded
Both Support C-Style (
/* */
) and C++ Style Comments (//
)