search

madebysource / lesshat

Smart LESS CSS mixins library.
lesshat.com
MIT License
2.19k stars 259 forks source link

Updating to use detached rulesets, with .keyframes example #142

Open lourd opened 9 years ago

lourd commented 9 years ago

Starting in Less 1.7.0, there is now a feature in Less called detached rulesets.

Detached ruleset is a group of css properties, nested rulesets, media declarations or anything else stored in a variable. You can include it into a ruleset or another structure and all its properties are going to be copied there. You can also use it as a mixin argument and pass it around as any other variable.

Lesshat could be greatly simplified by making use of this feature. For example, the current keyframes mixin is over 2000 characters long when compressed/minified. It can be rewritten in 200 using a ruleset parameter (and no Javascript)

.keyframes (@name, @frames) {
  @-webkit-keyframes @name { @frames(); }
  @-moz-keyframes @name { @frames(); }
  @-ms-keyframes @name { @frames(); }
  @-o-keyframes @name { @frames(); }
  @keyframes @name { @frames(); }
}

Almost all of the mixins could benefit using this feature.

mboudreau commented 8 years ago

This is good idea. I'll have to look into it. If you (or someone else) wants to do it and create a PR, that would be fantastic.