4 ms·
The article uses normal CSS, but you can apply the same principle in Sass/Less/Stylus, and in an even cleaner way. For instance, here is an example from the art
by roryokane 14y ago
The article uses normal CSS, but you can apply the same principle in Sass/Less/Stylus, and in an even cleaner way. For instance, here is an example from the article, abbreviated and converted to Sass. You can refactor
.header
padding: 20px
margin-bottom: 20px
background-color: #121416
color: #fff
.content
width: 640px
float: left
margin-right: 20px
padding: 20px
margin-bottom: 20px
into
@mixin island
display: block
padding: 20px
margin-bottom: 20px
.header
@include island
background-color: #121416
color: #fff
.content
@include island
width: 640px
float: left
margin-right: 20px
, and you don't even have to change the HTML.
- reissbaker 14y agoThe Sass mixin example is clean, but you'll end up generating much larger files that way: the preprocessor will repeat the island definition for every single class you mix it into, which means that the more useful and reusable your mixin actually is, the more the output will get bloated. The following CSS: .island { display: block; padding: 20px; margin-bottom: 20px; } .header { background-color: #121416; color: #fff; } .content { width: 640px; float: left; margin-right: 20px; } Is roughly as clean, but will make your files much smaller by virtue of not repeating the definitions per class. In general, avoiding property mixins (aside from vendor prefixes) and deep nesting in compile-to-CSS languages helps keep your output small and your pages fast. :)
- Schlaefer 14y agoThe Sass code should use @extend [1] instead of @mixin, which doesn't insert the whole definition each time but extends the base definition: .island, .header, .content { display block; … } [1]: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#ex...