Sass vs Less - Placeholders

gistfile1.sass

// 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;
}

How about:

// LESS equivalent
.sep() {
  border-top: 1px solid black;
}

hr,
.separator {
  .sep();
}

// Compiled LESS to CSS
hr,
.separator {
  border-top: 1px solid black;
}

@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;
}

You can do 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 {
  &:extend(.sep all, .blueborder);
}


// Defined somewhere at the end
.separator {
  &:extend(.sep all, .redborder);
}

This :extend it's a new propertie in Less 1.4.0

Still ugly on LESS.

Agreed, placeholders in Sass are super powerful and really lets you separate style definitions from style declarations without mixins.

@rkb81 your code does not work. less/less.js#1177