4 ms·
Not another CSS preprocessor :( LESS vs SASS was bad enough, then we got Stylus, now another one? Why couldn't this BEM feature be built on top of an existing t
by lvh 14y ago
Not another CSS preprocessor :( LESS vs SASS was bad enough, then we got Stylus, now another one? Why couldn't this BEM feature be built on top of an existing thing?
- lvivski 14y agoLESS ans SASS are bad. They have strange syntax for mixins and variables. BOSS's mixins are hust sets of declarations and it is really easy to use them. You can even expand all "border-radius: " to all vendor prefixed --border-radius declarations with ease. Also you don't need special chars to determine a variable (but you may use "$" if you like)
- beatpanda 14y agoI don't know, LESS seems to work for me. The syntax doesn't seem significantly different than LESS.
- lvivski 14y agoLESS uses ".class" extendig dor mixins. It's totally wrong, you don't need to extend a class, 'cause you can assign multiple classnames to a DOM node. The only thing you need to extend is a set of declarations (properties), so you create a new declaration which contains all declarations you need, so that you can reuse them.
- nilliams 14y agoBelieve SASS can do what you're describing with @extend and %silent directive: http://codepen.io/bpainter/pen/FxHEm http://codepen.io/bpainter/pen/FxHEm (Example courtesy of this East Wing podcast episode on SASS: http://theeastwing.net/episodes/26-bermon http://theeastwing.net/episodes/26-bermon).
- lvivski 14y agoBOSS uses different approach. If you want to have declarations of "button" in "button-primary" you can just write <button class="button button-primary"> But is you want to reuse some fancy image-border "button" and "input", so they may have nothing in common, except that image-border. You can create a mixin with desired declarations for all browser, and then use it in your code as simple as "fancy-image-border: url('image.png')". And all rulesets, that have this "fancy-image-border" will then get a list of declarations in place of this mixin. So you see, the syntax is pretty simple and matches CSS-syntax. You don't need @extends or smth else, you just have to know the name of mixin declaration.
- criswell 14y agoYou can also just do button[class^=button] and use class names like "button-primary". It would be less repetitive code in the output CSS and less in the HTML. I'm so glad attribute selectors are actually OK to use now.
- jacobr 14y agoI love Sass, but CSS preprocessing is not a solved problem, and I can see how this helps if you're using Yandex' BEM principle. Sass and Stylus both have feature the other one is lacking, and Less has the feature of being able to run in the browser during development. Maybe we need a CSS preprocessor with regular CSS as a starting point, but with syntactic macros or something.
- lvivski 14y agoBOSS already has regular CSS as a starting point. If you give regular CSS to it's input you get this css in output (with some indentation changes 'caused by parsing process) Then you can use syntactic sugar: variables, declaration mixins, nesting, arithmetic (with type coercion, by the way)