Foundation 6: Switch to cssnext

[Globegitter]

cssnext is a great new project giving us CSS4+ syntax, which are the most of the features sass supports but more importantly it does not give you any new syntax, but everything you learn here is and will be useful to write css.

Also it is faster than libsass, seems pretty active and the community around it growing with it already having grunt, gulp and broccoli support.

[Macxim]

I highly doubt they'd do the switch but I think it would be an excellent idea. 👍

[MoOx]

Boostrap already think about postcss and I think if you want to ditch less/sass cssnext is the better to do that for some future-proof code easily.

[benfrain]

While I'm a big fan of cssnext (I especially like using the W3C syntax for colour manipulations) large frameworks like Foundation should consider the potential fragility of W3C specs.
Although it uses abstractions, Sass defines a specification for achieving a goal and then supports it (and supports it very well). What happens when W3C change the syntax for a module that is not Candidate Release status? Does cssnext support all prior documented versions of the syntax? Do authors need to go back and rewrite their code to match the latest spec version?
@MoOx do you have docs for how you handle these situations in cssnext? If so, linking them in here will be good for discussion.

[MoOx]

For huge changes, I plan to provide simple scripts to allow people to upgrade their code.
But using cssnext is like using babel for js, the danger is always around.
FYI, I plan to have different stage like babel, see MoOx/postcss-cssnext#100

[benfrain]

@MoOx I like the stages idea a lot. Something Stage 2 and above is usually fairly stable. 👍

[mgenev]

I'm definitely very interested in trying out cssnext with foundation 👍

[drejohnson]

👍

[xtianus79]

why? to do what exactly? What can be done with CSS next that can't be done with CSS right now? Give me the top 5 things? This is just a post-processor for the future css syntax / capabilities? But more importantly can preprocessing SASS/SCSS still be used with cssnext to achieve both benefits.

See that's the point... I don't know if it is on purpose but it seems as if this posprocessor is supposed to replace preproccesors but that is not what it is supposed to do at all I think.

Shouldn't they work together?

[kmh3785]

@xtianus79 they absolutely can work together, but don't necessarily need to. In my mind, the benefit of PostCSS is how modular it is. You essentially build your own processor to fit your own needs, using plugins to add on the functionality your project calls for. The end result is more lightweight code, since you're eliminating many advanced features you don't need.

For example, in my case - all I really need are mixins, nested CSS, and variables (which I implemented using cssnext as opposed to SASS).

Admittedly, I'm still learning PostCSS, but as an exercise I'm building out a starter kit that completely leaves out SASS, without losing any of the above benefits that I would personally need, while leaving out all the extra overhead that I don't.

[Macxim]

Sorry to be that guy but it's cssnext, not CSSNext. Lowercase. Thanks! 😼

[kmh3785]

Aaand updated ;)

[rafibomb]

It would be good for a later version. Foundation 6 will be SCSS but we'll revisit it for Foundation for Sites 7.

In the meantime we have this topic thread open: #6196