Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
@wiinci

This comment has been minimized.

wiinci commented Mar 10, 2013

How about:

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

hr,
.separator {
  .sep();
}

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

This comment has been minimized.

jslegers commented Jul 26, 2013

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

This comment has been minimized.

rickbenetti commented Mar 16, 2014

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

@jmcbee

This comment has been minimized.

jmcbee commented Oct 27, 2014

Still ugly on LESS.

@miphe

This comment has been minimized.

miphe commented Jan 30, 2015

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

@stevenvachon

This comment has been minimized.

stevenvachon commented Mar 2, 2016

@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