Placeholder Selectors (%)

[emagnier]

Hi,

The Placeholder Selectors (Sass 3.2) seems to be not implemented yet. I'm a big fan of this feature (used for all of my CSS patterns & helpers). Do you have an idea when you will start to implement it? In the meantime, I will continue to use the slow Ruby compiler on my Windows machine.

Thanks! Etienne.

(sorry for my english, it's not my native language)

[benschwarz]

I think this is one of the more under appreciated features of SASS — I use it exclusively. Should I add a test on hcatlin/sassc?

[martin-spil-reurings]

@benschwarz If you can, that'd be a major :+1: ! I have almost 0 affinity with C so I'd be quite lost there :)

[benschwarz]

@martin-spil-reurings, the test suite is implemented via sassc, I've raised a pull-request to try to figure out whats going on there. (sassc/#19)

[akhleung]

Not a trivial addition ... I'll try to get in by end of April. (I'll also comment on the test suite in the appropriate thread.)

[emagnier]

Great, thanks!

[benschwarz]

@akhleung I'll keep on trying to push the test suite along too. I'll ping you when there is a test available

[bestander]

:+1:

[emagnier]

I'm using inuit.css (a great OOCSS framework) on my latest projects, but because there are Placeholder Selectors inside the library, it doesn't compile with Libsass.

The placeholder selectors are more and more used on the latest CSS libraries & frameworks, and are a great way to write reusable and scalable code as well as CSS patterns.

[jkarsrud]

:+1: It would be great to get this feature in to libsass soon :)

[akhleung]

I'll be working on this soon -- just need to refactor some stuff first!

[lmartins]

Would be nice to have this.

[damln]

+1 for this feature. Thanks for your hardwork on libsass.

[Nabellaleen]

Is possible to give a simple example of use of a placeholder, with the result on vanilla sass ? Thanks !

[benschwarz]

%button {
  background: red;
}

.button, button { @extend %button; } 

Should yield:

.button, button { background: red; } 

[lmartins]

@benschwarz already described what id does. The main benefit of the also called "silent selectors" is that they don't output anything, unless they are called somewhere in the code. This makes them the perfect solution to abstract code as modules that you can use in several parts of your code.

[phamann]

:+1: for this feature! This is the only thing stopping us from using this great tool.

[akhleung]

I'm working on it! This (and an bunch of other things) will be ready in a week!

[masterbee]

@akhleung, thanks for the work on this placeholder issue. Just wondering if this was implements and committed to the build? since as @phamann states would allow us to really leverage this great tool.

[trevc]

Thanks to everyone involved in making this happen. I also use placeholders extensively in every project. Any updates?

[ebryn]

ping - any update?

[akhleung]

Working on it -- hope to have it working by mid-week.

[ebryn]

@akhleung thanks!

[akhleung]

Okay, preliminary support for placeholders should be in. Please note that this is a first attempt, so there may be some discrepancies in the output compared to Ruby Sass. Also, my implementation of @extend doesn't handle the really subtle or advanced cases, so watch out for that as well.

[lmartins]

Thanks again @akhleung I've just tested it but it seems to choke with a simple "silent class":

%btn  {
   ...
}

This will result in the following error in the console:

Warning: css-src/system.scss:12: error: invalid top-level expression
 Use --force to continue.

[akhleung]

This case works for me -- how are you running LibSass? If it's part of another tool, they may need to update to the latest version.

[toolmantim]

:heart: you @akhleung

[benschwarz]

@akhleung Over the weekend I'll try run the latest against a few big sass projects I have — will log anything that falls out.

[benschwarz]

ps. you're awesome.

[lmartins]

I guess that's related to nodesass then. Gonna check with the devs from that tool. Thanks.

[benschwarz]

I just build sassc from HEAD (along with libsass) — I'm proud to report that it was able to successfully build gallery-css, which uses a variety of sass features.

This is a huge step for SASS, congratulations @akhleung && @hcatlin !

[nc]

+1

[emagnier]

Since the placeholder selectors feature is now implemented, I will close this issue. A great thanks @akhleung!

[lmartins]

@emagnier It was implemented but it isn't outputting correct code. I've reported the issue in https://github.com/hcatlin/libsass/issues/146

[emagnier]

You are right, the bug you mention is a bit blocking, so the placeholder is not totaly implemented. But should I keep this issue open if we have another one specificaly for this bug?

[akhleung]

Hmm, since there's another issue that specifically addresses this bug, let's just close this one.