LESS version

[zeroxme]

can we have a LESS version of this awesome grid system ?

[nathansmith]

Unfortunately, the way I'm doing the @import from within the @media queries isn't possible to replicate (not 1:1 anyway), due to how the LESS compiler works.

https://github.com/nathansmith/unsemantic/blob/master/assets/sass/partials/_unsemantic-grid-responsive.sass

More on that Sass approach here…

http://nicolasgallagher.com/mobile-first-css-sass-and-ie/

It requires some jumping through hoops to replicate the same result…

https://gist.github.com/peterwilsoncc/1407227

---

Also, to my knowledge, LESS does not yet have the equivalent of Sass %silent-class placeholders…

https://speakerdeck.com/anotheruiguy/sass-32-silent-classes

You can see that in use here (look for everything that starts with %).

https://github.com/nathansmith/unsemantic/blob/master/assets/sass/partials/_unsemantic-vars.sass

Those can be used to let people build their own customized approach, using class names of their choosing…

Unsemantic consumes those placeholders via @extend…

https://github.com/nathansmith/unsemantic/blob/master/assets/sass/partials/_unsemantic-grid-desktop.sass

So, while Unsemantic itself makes use of all its own placeholders, when using Sass to build a version with with one's own class names, anything that wasn't used via @extend won't be emitted to the final compiled CSS file.

More on that at here, under the "Roll Your Own" heading…

http://unsemantic.com/sass-documentation

---

Anyway, without belaboring the point, I don't know of a comparable way to build Unsemantic in LESS, without going through a lot of work-arounds.

I've used LESS on a few projects, where I've been thrown into the mix and just had to use what's there.

Given the choice though, for my own projects I greatly prefer to use Sass and Compass.

[zeroxme]

thanks a lot for this great reply

[nicooprat]

Hi,

Some things may have changed since this issue was opened....

---

LESS seems to allows @import inside a media query since ~6 months :

https://github.com/less/less.js/issues/122

---

If you're looking for a way to use a mixin without outputting it, you can do it this way :

You can also use parametric mixins which don’t take parameters. This is useful if you want to hide the ruleset from the CSS output, but want to include its properties in other rulesets

— http://lesscss.org/#-parametric-mixins

.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

---

I may have misunderstood some points but I'd love to see unsemantic written in LESS. For now I've tweaked it a bit but I'm still forced to use the CSS version. If I have enough time I'll take a look at the SASS code but I'm not an expert...!

Thanks for you work.

[nathansmith]

You're certainly welcome to make a LESS version.

But, my situation is the opposite:

Whereas you're not familiar with Sass, I don't know enough about LESS to do a port of Unsemantic.

I'm not opposed to the notion. It just don't have the time to do a full rewrite in another preprocessor.

[nicooprat]

I took some time to take a first try to port Unsemantic to LESS :

https://gist.github.com/nicooprat/7200266

Hope it helps, use at your own risks ;)