5 ms·

> use Stylus/Sass not LESS I really like LESS. What am I missing out on?

mylittlepony 14y ago
I too want to know this.
pdog 14y ago
"Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing." http://css-tricks.com/sass-vs-less/ http://css-tricks.com/sass-vs-less/
rcsorensen 14y ago
The thing that finally pushed me off LESS was animations, and the contortions necessary to get to something even approximating DRY for some concepts. I think it might be a result of trying to be "better CSS" instead of "a language for generating CSS". Say you wanted to delay a slide-in-right animation for 50ms per list item. (So item 1 slides in immediately, item 2 50ms later, item 3 50ms later, etc.) For that portion, this is what the LESS looks like: -animation-delay(@delay) { animation-delay: @delay; ...vendor prefixes... } .delay-child-animations { &:nth-child(2n){ .animation-delay: 50ms; } &:nth-child(3n){ .animation-delay: 100ms; } &:nth-child(4n){ .animation-delay: 150ms; } ... more things here ... } In SASS, we could do something like @mixin delay-child-animations($max-children: 20) { @for $i from 1 to $max-children { &:nth-child(#{$i}n){ .animation-delay: ($i - 1)*50ms; } } References: http://stackoverflow.com/questions/8294400/css-animations-with-delay-for-each-child-element http://stackoverflow.com/questions/8294400/css-animations-wi... http://radiatingstar.com/css-keyframes-animations-with-less http://radiatingstar.com/css-keyframes-animations-with-less
ahoge 14y ago
Compass (which was built on top of Sass) does sprite sheet generation and cache busting. It's also shipped with a bunch of pre-defined CSS3 mixins. Sass also allows you to put media queries inside your rule blocks. (In the future, this will be also possible in regular CSS.)
SkyMarshal 14y ago
Fwiw, here's why Bootstrap uses LESS instead Stylus/Sass: http://www.quora.com/Bootstrap-front-end-framework/Why-did-Twitter-use-LESS-instead-of-Sass-for-Bootstrap http://www.quora.com/Bootstrap-front-end-framework/Why-did-T...

I too want to know this.

pdog 14y ago

"Sass is better on a whole bunch of different fronts, but if you are already happy in LESS, that's cool, at least you are doing yourself a favor by preprocessing." http://css-tricks.com/sass-vs-less/ http://css-tricks.com/sass-vs-less/

rcsorensen 14y ago

The thing that finally pushed me off LESS was animations, and the contortions necessary to get to something even approximating DRY for some concepts. I think it might be a result of trying to be "better CSS" instead of "a language for generating CSS". Say you wanted to delay a slide-in-right animation for 50ms per list item. (So item 1 slides in immediately, item 2 50ms later, item 3 50ms later, etc.) For that portion, this is what the LESS looks like: -animation-delay(@delay) { animation-delay: @delay; ...vendor prefixes... } .delay-child-animations { &:nth-child(2n){ .animation-delay: 50ms; } &:nth-child(3n){ .animation-delay: 100ms; } &:nth-child(4n){ .animation-delay: 150ms; } ... more things here ... } In SASS, we could do something like @mixin delay-child-animations($max-children: 20) { @for $i from 1 to $max-children { &:nth-child(#{$i}n){ .animation-delay: ($i - 1)*50ms; } } References: http://stackoverflow.com/questions/8294400/css-animations-with-delay-for-each-child-element http://stackoverflow.com/questions/8294400/css-animations-wi... http://radiatingstar.com/css-keyframes-animations-with-less http://radiatingstar.com/css-keyframes-animations-with-less

ahoge 14y ago

Compass (which was built on top of Sass) does sprite sheet generation and cache busting. It's also shipped with a bunch of pre-defined CSS3 mixins. Sass also allows you to put media queries inside your rule blocks. (In the future, this will be also possible in regular CSS.)

SkyMarshal 14y ago

Fwiw, here's why Bootstrap uses LESS instead Stylus/Sass: http://www.quora.com/Bootstrap-front-end-framework/Why-did-Twitter-use-LESS-instead-of-Sass-for-Bootstrap http://www.quora.com/Bootstrap-front-end-framework/Why-did-T...