Sass vs Less - Placeholders
// Source: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/ | |
// Sass | |
%separator | |
border-top: 1px solid black | |
hr | |
@extend %separator | |
.separator | |
@extend %separator | |
// Compiled Sass to CSS | |
hr, | |
.separator { | |
border-top: 1px solid black | |
} | |
// Less equivalent | |
.sep { | |
border-top: 1px solid black; | |
} | |
hr, | |
.separator { | |
.sep; | |
} | |
// Compiled Less to CSS | |
.sep { | |
border-top: 1px solid black; | |
} | |
hr, | |
.separator { | |
border-top: 1px solid black; | |
} |
This comment has been minimized.
This comment has been minimized.
@wiinci : The very point of placeholders is to define your rules on one spot and add selectors to them on several individual places without repetition. In LESS, that would mean something like this : // Defined at the top
%sep() {
border-top: 1px solid black;
}
%redborder() {
border-color: red;
}
%blueborder() {
border-color: blue;
}
// Defined somewere in the middle
hr {
%sep();
%blueborder();
}
// Defined somewhere at the end
.separator {
%sep();
%redborder();
}
// Compiled LESS to CSS
hr, .separator {
border-top: 1px solid black;
}
.separator {
border-color: red;
}
hr {
border-color: blue;
} |
This comment has been minimized.
This comment has been minimized.
You can do this:
This :extend it's a new propertie in Less 1.4.0 |
This comment has been minimized.
This comment has been minimized.
Still ugly on LESS. |
This comment has been minimized.
This comment has been minimized.
Agreed, placeholders in Sass are super powerful and really lets you separate style definitions from style declarations without mixins. |
This comment has been minimized.
This comment has been minimized.
@rkb81 your code does not work. less/less.js#1177 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
How about: