4 ms·
It's longer for the simple case, declaring and calling a function once is also always longer than simply inline the code. Nesting rules allow you to turn .f
by joesb 14y ago
It's longer for the simple case, declaring and calling a function once is also always longer than simply inline the code.
Nesting rules allow you to turn
.foo p {
}
.foo p a {
}
.foo p div {
}
into
.foo {
p {
a {
}
div {
}
}
}
Less duplicate code and more obvious hierarchy.
'&' context reference allows you to turn this.
.widget a.button { ... }
.widget a.button:hover { ... }
.widget a.button:active, .widget a.button:focus { ... }
Into
.widget a.button {
...
&:hover { ... }
&:focus, &:active { ... }
}
Again, less duplication, less code to read/change. More obvious hierarchy.
@includes is like writing function. Which is very useful when you have to write browser-specific style. You can define `round-border` mixin once.
@mixin round-border($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.dialog {
@include round-border(10px);
}
.color-picker {
@include round-border(5px);
}
.button {
@include round-border(3px);
...
}
Is that less clear or harder to maintain than CSS version?