amnu3387
Ex CSS (sass simile in pure elixir)
Hi,
As part of maybe starting a project for a CMS + static site generator I decided to create a library that allows similar CSS pre-processing as Sass/SCSS. It’s not yet finished but it already works for most part (it’s missing the ability to create ad-hoce functions) and similar in many aspects to Sass, with the exception that it allows using EEx code blocks and arbitrary Elixir terms as assigns (on top of normal string based “variables”).
It also has a basic watcher that pre-processes your CSSEx files automatically and it’s made in a way to accommodate the needs I imagined for the possible CMS+SSG (programatically pass variables & assigns while generating css, etc).
You can check it at GitHub repo
Along with some basic examples.
As it is still lacking what is described in the roadmap I haven’t put it on hex yet, nor done proper benchmarks with more than small toy sized sass/cssex files, but in those cases I did it was fairly faster.
If you give it a try or have suggestions, bug reports, or want to contribute open an issue on the repo!
If you would like to see it in Erlang help me solve the issue of the EEx blocks and how to pass assigns into them - having that solved would allow to write it almost as is in Erlang (I also have no idea if anyone writing erlang needs a css preprocessor to be honest…)
(forgot to put on the readme but it also supports of course the “&” nested notation of sass)
Most Liked
Sebb
Great! I don’t want to put you to any bother, but could you please in the next step replace webpack and npm?
olafura
Parsing CSS is really annoying because test suits assume that you want have the same experience as you do with browsers which is that you can throw a lot of crap at it and it still works 
But if you want to have a fairly standard compliant parser then I have one. It’s based of the CSS spec, it’s I believe only failing because I have to match test suits:
It doesn’t not yet support the nesting tricks that postcss and sass use.
My intent was and is still to have something akin on styled components available for Elixir. It’s just sometimes hard to find time
derek-zhou
I actually wrote my own html DSL: html_writer
but for CSS if there are more people interested we could do something more advanced, think something like Ecto.
amnu3387
Yeap, closed with “wont-fix”. Which is funny given it’s a draft for a spec extension.
I sometimes don’t understand how this works. It’s not like there’s no prior art. Sass is from 2006, less is from 2009, they’re the most widely used pre-processors and introduced this idea.
Along comes the opportunity a new spec and instead of using the ideas that prompted the spec, they change them to the point they’re incompatible with what people already showed they preferred, while still introducing complexity (or more) and worse readability.
derek-zhou
Great idea. If you are introducing elixir grammar into CSS, I’d like to see something that is completely elixir; ie a full set of elixir macros and functions to write CSS in 100% elixir grammar, sort of like what ecto does for SQL.
The current landscape of various CSS techs is sad. The only thing that has momentum is tailwind, and it is incredibly slow to compile. Also the new version has the brilliant idea of changing whitespace-no-wrap to whitespace-nowrap for no apparent reason.
Popular in Libraries
Other popular topics
Latest on Elixir Forum
Sponsor Spotlight
Producing high quality Elixir screencasts since 2017.
Categories:
Sub Categories:
Forums
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
Courses that'll move you from confusion to "Aha, now I get it!"