amnu3387

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

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

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 :smiley:

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:
https://github.com/olafura/ex_css

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 :smiley:

derek-zhou

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.

Where Next?

Popular in Announcing Top

danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29603 241
New
tmbb
PhoenixWS - Websockets over Phoenix Channels Source code on Github here: GitHub - tmbb/phoenix_ws: Websockets implemented over Phoenix Ch...
New
oltarasenko
Dear Elixir community, After a year of development, bug fixes, and improvements, we are proudly ready to share the release of Crawly 0.1...
New
kip
ex_cldr provides localisation and internationalisation support based upon the data from the Unicode CLDR project. Unicode released CLDR ...
407 13014 120
New
RobertDober
Earmark is a pure-Elixir Markdown converter. It is intended to be used as a library (just call Earmark.as_html), but can also be used as...
239 12645 134
New
michalmuskala
Hello everybody. I have just released Jason - a new JSON library. You might be wondering, why do we need a new library? The primary foc...
New
zachdaniel
Ash Framework What is Ash? Ash Framework is a declarative, resource-oriented application development framework for Elixir. A resource can...
New
woylie
I released Doggo, a collection of unstyled Phoenix components. https://github.com/woylie/doggo Features Unstyled Phoenix components....
New
scohen
Lexical Lexical is a next-generation language server for the Elixir programming language. Features Context aware code completion As-you...
New
zoltanszogyenyi
Hey everyone :waving_hand: Excited to join this forum - I am one of the founders and current project maintainers of a popular and open-s...
New

Other popular topics Top

malloryerik
Hi, this is for people who, like me, have had some friction using .html.heex templates in VSCode. The solution seems to be, in a hyphena...
New
marius95
Hello everyone, I try to use an Javascript Event Handler in my root.html.leex file. Therefore I created a function in the app.js file: ...
New
Darmani72
If I have a post route which an argument: post /my_post_route/:my_param1, MyController.my_post_handler How would get the post params ...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
jerry
Good day to you all. I have been struggling to get a query involving like and ilike to work. Can anyone assist me on this, please? pro...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
Emily
I have VueJS GUIs with the project generated using Webpack. I have Elixir modules that will need to be used by the VueJS GUIs. I forese...
New
Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 127089 1222
New
AstonJ
Seen any cool LiveView demos, sample apps or examples? Please post them here! :003:
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement