This is an adaptation of the Sass/Less comparison document.
Not a comprehensive overview of features of either library but a comparison of commonalities.
Sass | Crush
-----------------+-----------------
$color: red; | @set color red;
div { | div {
color: $color; | color: $(color);
} | }
Crush also supports block variable declaration:
@set {
color: red;
foo: "bar";
}
Sass additionally supports scoped variable definition within a selector context.
All variables in Crush are global although block scoping can be partially emulated with the this() function.
Sass and Crush both have the parent selector (&) that allows nested selector to refer to the parent scope.
Sass | Crush
-------------------+-----------------
p { | p {
a { | a {
color: red; | color: red;
&:hover { | &:hover {
color: blue; | color: blue;
} | }
} | }
} | }
Sass | Crush
----------------------------------+----------------------------------
@mixin bordered { | @mixin 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; | @include bordered;
} | }
Sass | Crush (positional arguments with optional default)
----------------------------------+----------------------------------
@mixin bordered($width: 2px) { | @mixin bordered {
border: $width solid black; | border: #(0, 2px) solid black;
} | }
|
#menu a { | #menu a {
@include bordered(4px); | @include bordered(4px);
} | }
Sass | Crush | 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; |
} | } |
Sass provides color math.
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)
Crush has a small number of mutator color functions that use offset values (and accept negative values):
h-adjust(color, h-offset)s-adjust(color, s-offset)l-adjust(color, l-offset)a-adjust(color, a-offset)hsl-adjust(color, h-offset, s-offset, l-offset)hsla-adjust(color, h-offset, s-offset, l-offset, s-offset)
Both Sass and Crush support numbers and basic arithmetic. However they differ significantly with respect to how they handle units.
Sass has conversion tables so that any comparable units can be combined.
Sass:
1cm * 1em => 1 cm * em
2in * 3in => 6 in * in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5
Crush requires math expressions to be inside a math() function. No attempt is made to
ascertain the intended output unit; all units in the expression are stripped and the author must
specify the desired unit:
Crush:
math(1cm * 1em) => 1
math(2 * 3, in) => 6in
math(2 + 3 + 2, %) => 7%
math(3 / 2, em) => 1.5em
Sass provides a custom scripting language (SassScript) for use directly inside SCSS/SASS files.
Crush has no CSS level scripting, though there is a PHP function named csscrush_add_function() for adding custom CSS functions with PHP. And a lightweight plugin system (using PHP) for extending.
SassScript pros:
- A convenient way to extend and add functionality
SassScript cons:
- Another scripting language to learn
- Potential for mixing too much logic in CSS.
- May find limiting compared to a full scripting language
Crush plugins pros:
- Access to a fully-powered scripting language
- Complicated logic kept out of CSS
Crush plugins cons:
- Need to know PHP
- Less convenient
Some Sass examples:
@if lightness($color) > 30% {
background-color: black;
}
@else {
background-color: white;
}
Looping:
@for $i from 1px to 10px {
.border-#{i} {
border: $i solid blue;
}
}
Looping in Crush is possible using the loop plugin (bundled):
@for i in range(1, 10) {
.border-#(i) {
border: #(i)px solid blue;
}
}
Crush has an @ifset directive for including/excluding CSS by testing the existence of variables:
@set foo true;
@ifset foo {
p {
color: black;
}
@ifset not bar {
p a {
color: red;
}
}
}
Outputs:
p {
color: black;
}
p a {
color: red;
}Both Sass and Crush will import other files.
Sass requires files with .scss extensions when importing or no extension, and media designations are ignored.
Crush imports work like vanilla CSS, except they are inlined, and relative URLs are automatically adjusted.
Sass has four: nested, compact, compressed, expanded.
Crush has four: block, single-line, single-line-padded and minified. Custom formatters can be defined in PHP.
Sass supports C-style (/* */) and C++ Style comments (//).
Crush supports C-style (/* */) comments.
Sass has the Compass extension framework for handling CSS polyfills.
Crush handles polyfills out of the box with vendor aliases and core plugins.
Your comparison is seriously lacking.
For example, one feature I really care for in SCSS is its placeholder technique :
INPUT :
Now, I did get from your documentation that CSS crush supports the same feature, but using the following syntax :
@abstract ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .foo { @extend ellipsis; display: block; } .bar { @extend ellipsis; }