Skip to content

Instantly share code, notes, and snippets.

Revisions

  1. Alexis Sellier revised this gist Jan 10, 2012. 1 changed file with 7 additions and 7 deletions.
    14 changes: 7 additions & 7 deletions sass_and_less_compared.markdown
    Original file line number Diff line number Diff line change
    @@ -47,15 +47,15 @@ And their different output:

    Sass and Less have the `&` selector that allows nested selector to refer to the parent scope.

    Sass | Less(.js)
    Sass | Less
    -------------------+-----------------
    p { | p {
    a { | a {
    color: red; | color: red;
    &:hover { | &:hover {
    color: blue; | color: blue;
    } | }
    } | }
    a { | a {
    color: red; | color: red;
    &:hover { | &:hover {
    color: blue; | color: blue;
    } | }
    } | }
    } | }

    ## Mixins
  2. Alexis Sellier revised this gist Jan 10, 2012. 1 changed file with 27 additions and 27 deletions.
    54 changes: 27 additions & 27 deletions sass_and_less_compared.markdown
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,8 @@
    In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax
    in sass, if you prefer it, it has no functional differences from the SCSS syntax.

    For less, I'm using the ruby version because this is what they suggest on the website.
    The javascript version may be different.
    For Less, I'm using the JavaScript version because this is what they suggest on the website.
    The ruby version may be different.

    ## Variables

    @@ -45,8 +45,7 @@ And their different output:

    ## Nested Selectors

    Sass has the `&` selector that allows nested selector to refer to the parent scope.
    I think `&` selector is added in less.js.
    Sass and Less have the `&` selector that allows nested selector to refer to the parent scope.

    Sass | Less(.js)
    -------------------+-----------------
    @@ -166,16 +165,14 @@ Less:

    ## Conditionals & Control Structures

    Less does not provide any conditionals or looping structures.
    Less does not provide any conditionals or looping structures. Instead, it provides *mixin guards* and *pattern-matching* which can be used to similar effect.

    As a result of not providing conditionals, less does not have a boolean type nor does it support
    comparison operators and boolean logic. Sass provides `and`, `or`, and `not` operators as well as
    `<`, `>`, `<=`, `>=`, `==` operators.
    Sass and Less provides provide boolean types `true` and `false`, the `and`, `or`, and `not` operators as well as `<`, `>`, `<=`, `>=`, `==` operators. There are minor syntax differences between the two (Sass syntax shown here).

    Some sass examples:

    @if lightness($color) > 30% {
    background-color: back;
    background-color: black;
    }
    @else {
    background-color: white;
    @@ -189,46 +186,49 @@ Looping:
    }
    }

    A similar example in Less, using mixins:

    .mixin (@color) when (lightness(@color) > 30%) {
    background-color: black;
    }
    .mixin (@color) when (lightness(@color) =< 30%) {
    background-color: white;
    }

    Less supports looping via recursion, but not (yet) selector interpolation as shown in the Sass example, so it is of limited use.

    ## Server Side Imports

    Both sass and less will import other sass and less files.

    ## Output formatting

    Less has just one output format. Sass has four: nested, compact, compressed, expanded
    Less has three output formats: normal, compressed & yui-compressed. Sass has four: nested, compact, compressed, expanded.

    Sass output compression currently beats the google pagespeed css plugin output by a few percent.

    ## Comments

    Less and Sass both support C-style (`/* */`) and C++ Style comments (`//`).

    ## Namespaces and Accessors
    ## Namespaces

    Less provides some features that Sass does not:
    Less provides a feature that Sass does not:

    #bundle {
    @color: red;
    color: @color;
    span { width: 200px; }
    #bundle () {
    .red { background-color: red }
    .green { background-color: green }
    }

    .foo {
    #bundle > span;
    border: 1px solid #bundle[@color];
    color: #bundle['color'];
    #bundle > .red;
    }

    Generates:

    #bundle { color: red; }
    #bundle span { width: 200px; }
    .foo {
    width: 200px;
    border: 1px solid red;
    color: red;
    background-color: red;
    }

    The sass team considered these features and decided that adding them would create
    fragility and unexpected interconnectedness. Sass recommends that you extract variables
    to share values.
    The sass team considered this feature and decided that adding it would create
    fragility and unexpected interconnectedness.
  3. Alexis Sellier revised this gist Jan 10, 2012. 1 changed file with 4 additions and 13 deletions.
    17 changes: 4 additions & 13 deletions sass_and_less_compared.markdown
    Original file line number Diff line number Diff line change
    @@ -48,14 +48,14 @@ And their different output:
    Sass has the `&` selector that allows nested selector to refer to the parent scope.
    I think `&` selector is added in less.js.

    Sass | Less
    Sass | Less(.js)
    -------------------+-----------------
    p { | p {
    a { | a {
    color: red; | color: red;
    &:hover { | }
    color: blue; | a:hover {
    } | color: blue;
    &:hover { | &:hover {
    color: blue; | color: blue;
    } | }
    } | }
    } | }

    @@ -84,10 +84,6 @@ I think `&` selector is added in less.js.
    @include bordered(4px); | .bordered(4px);
    } | }

    Differences between mixins with Args:
    1. Less does not allow nested selectors in dynamic mixins
    2. Sass allows some arguments to be required, in less all arguments must have a default.

    ## Selector Inheritance

    Less does not provide selector inheritance.
    @@ -207,11 +203,6 @@ Sass output compression currently beats the google pagespeed css plugin output b

    Less and Sass both support C-style (`/* */`) and C++ Style comments (`//`).

    However Less strips comments from output in all cases, while Sass always strips `//` comments
    and only strips `/* */` comments in compressed output mode.

    Note: Less.js matches Sass's behavior.

    ## Namespaces and Accessors

    Less provides some features that Sass does not:
  4. @chriseppstein chriseppstein revised this gist Jan 11, 2011. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions sass_and_less_compared.markdown
    Original file line number Diff line number Diff line change
    @@ -210,6 +210,8 @@ Less and Sass both support C-style (`/* */`) and C++ Style comments (`//`).
    However Less strips comments from output in all cases, while Sass always strips `//` comments
    and only strips `/* */` comments in compressed output mode.

    Note: Less.js matches Sass's behavior.

    ## Namespaces and Accessors

    Less provides some features that Sass does not:
  5. @chriseppstein chriseppstein revised this gist Jan 11, 2011. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions sass_and_less_compared.markdown
    Original file line number Diff line number Diff line change
    @@ -135,6 +135,8 @@ Mutators:
    * `grayscale($color)`
    * `compliment($color)`

    Note: [Less.js provides a number of similar color functions](https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js).

    ## Numbers

    Both Sass and Less support numbers and basic arithmetic. However they differ
  6. @chriseppstein chriseppstein revised this gist Nov 12, 2010. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion sass_and_less_compared.markdown
    Original file line number Diff line number Diff line change
    @@ -152,7 +152,8 @@ changes in the w3c specification or in case a browser introduces a non-standard

    Sass:

    1cm * 1cm => 1 cm * cm
    1cm * 1em => 1 cm * em
    2in * 3in => 6 in * in
    (1cm / 1em) * 4em => 4cm
    2in + 3cm + 2pc => 3.514in
    3in / 2in => 1.5
    @@ -161,6 +162,7 @@ Less:

    1cm * 1em => Error
    2in * 3in => 6in
    (1cm / 1em) * 4em => Error
    2in + 3cm + 2pc => Error
    3in / 2in => 1.5in

  7. @chriseppstein chriseppstein revised this gist Nov 12, 2010. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion sass_and_less_compared.markdown
    Original file line number Diff line number Diff line change
    @@ -30,7 +30,7 @@ However they differ in their behavior:
    .unscoped { | .unscoped {
    color: $color; | color: @color;
    // Would be an error | // Would be an error
    // background: @bg; | // background: @bg;
    // background: $bg; | // background: @bg;
    } | }

    And their different output:
  8. @chriseppstein chriseppstein created this gist Nov 12, 2010.
    237 changes: 237 additions & 0 deletions sass_and_less_compared.markdown
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,237 @@
    # Sass/Less Comparison

    In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax
    in sass, if you prefer it, it has no functional differences from the SCSS syntax.

    For less, I'm using the ruby version because this is what they suggest on the website.
    The javascript version may be different.

    ## Variables

    Sass | Less
    -----------------+-----------------
    $color: red; | @color: red;
    div { | div {
    color: $color; | color: @color;
    } | }

    Both languages support scoped variable definition within a selector context.
    However they differ in their behavior:

    Sass | Less
    -------------------------+-----------------
    $color: black; | @color: black;
    .scoped { | .scoped {
    $bg: blue; | @bg: blue;
    $color: white; | @color: white;
    color: $color; | color: @color;
    background-color: $bg; | background-color: @bg;
    } | }
    .unscoped { | .unscoped {
    color: $color; | color: @color;
    // Would be an error | // Would be an error
    // background: @bg; | // background: @bg;
    } | }

    And their different output:

    Sass Output | Less Output
    ----------------------------+----------------------------
    .scoped { | .scoped {
    color: white; | color: white;
    background-color: blue; | background-color: blue;
    } | }
    .unscoped { color: white; } | .unscoped { color: black; }

    ## Nested Selectors

    Sass has the `&` selector that allows nested selector to refer to the parent scope.
    I think `&` selector is added in less.js.

    Sass | Less
    -------------------+-----------------
    p { | p {
    a { | a {
    color: red; | color: red;
    &:hover { | }
    color: blue; | a:hover {
    } | color: blue;
    } | }
    } | }

    ## Mixins

    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;
    } | }

    ## Mixins with Arguments / Dynamic 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);
    } | }

    Differences between mixins with Args:
    1. Less does not allow nested selectors in dynamic mixins
    2. Sass allows some arguments to be required, in less all arguments must have a default.

    ## Selector Inheritance

    Less does not provide selector inheritance.

    Sass | Less | CSS Output
    ----------------------------+-------+---------------------------
    .bordered { | N/A | .bordered, #menu a {
    border: 1px solid back; | | border: 1px solid back; }
    } | |
    | |
    #menu a { | |
    @extend .bordered; | |
    } | |

    ## Colors

    Both less and sass provide color math. It was a bad idea in Sass, I'm not sure why
    less chose to copy it. There's no point in comparing them.

    Sass provides a full array of tools for manipulating colors. All color representations
    (named colors, hex, rgb, rgba, hsl, hsla) are understood as colors and colors can be manipulated.

    Sass exposes a long list of color functions not found in CSS:

    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)`

    ## Numbers

    Both Sass and Less support numbers and basic arithmetic. However they differ
    significantly with respect to how they handle units.

    Sass supports unit-based arithmetic, just like you learned in school. 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.

    Additionally, Sass has conversion tables so that any comparable units can be combined.

    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 * 1cm => 1 cm * cm
    (1cm / 1em) * 4em => 4cm
    2in + 3cm + 2pc => 3.514in
    3in / 2in => 1.5

    Less:

    1cm * 1em => Error
    2in * 3in => 6in
    2in + 3cm + 2pc => Error
    3in / 2in => 1.5in

    ## Conditionals & Control Structures

    Less does not provide any conditionals or looping structures.

    As a result of not providing conditionals, less does not have a boolean type nor does it support
    comparison operators and boolean logic. Sass provides `and`, `or`, and `not` operators as well as
    `<`, `>`, `<=`, `>=`, `==` operators.

    Some sass examples:

    @if lightness($color) > 30% {
    background-color: back;
    }
    @else {
    background-color: white;
    }

    Looping:

    @for $i from 1px to 10px {
    .border-#{i} {
    border: $i solid blue;
    }
    }

    ## Server Side Imports

    Both sass and less will import other sass and less files.

    ## Output formatting

    Less has just one output format. Sass has four: nested, compact, compressed, expanded

    Sass output compression currently beats the google pagespeed css plugin output by a few percent.

    ## Comments

    Less and Sass both support C-style (`/* */`) and C++ Style comments (`//`).

    However Less strips comments from output in all cases, while Sass always strips `//` comments
    and only strips `/* */` comments in compressed output mode.

    ## Namespaces and Accessors

    Less provides some features that Sass does not:

    #bundle {
    @color: red;
    color: @color;
    span { width: 200px; }
    }

    .foo {
    #bundle > span;
    border: 1px solid #bundle[@color];
    color: #bundle['color'];
    }

    Generates:

    #bundle { color: red; }
    #bundle span { width: 200px; }
    .foo {
    width: 200px;
    border: 1px solid red;
    color: red;
    }

    The sass team considered these features and decided that adding them would create
    fragility and unexpected interconnectedness. Sass recommends that you extract variables
    to share values.