CSS preprocessor

[TonyM]

Folks,

Just visiting w3schools as I often do and see they have included a Sass Tutorial now. 

Sass is a CSS pre-processor.

Sass reduces repetition of CSS and therefore saves time.

I am not sure if this offers and opportunity for tiddlywiki to steamline its css but just put in on the table should it be of interest. I am not sure how this relates to the tiddlywiki bricks css handling.

Regards

Tony

[Thomas Elmiger]

Hi Tony,

Better late than never ... not sure if you were refering to my Bricks toolbox for CSS here: https://tid.li/tw5/test/bricks.html – but based on what I did there I would like to throw in my opinion regarding your suggestion.

1) Bricks demonstrates how to use TiddlyWiki as a CSS live processor. You can go to the Stylesheet Manager, click the ellipsis (three dots ...) and edit any part of the CSS and see the result immediately as long as the respective content is visible. In my eyes this is perfect if you want to develop styles for TW, your editor is identical to your live system.

2) Sass has a set of functions that might be of great value for developers who are used to work with Sass (I never did that, so I am only guessing here from a short look at the docs you linked). An interesting part are the color functions: I developed the Color Action plugin to cover stuff like this directly in TW. Many other functions like the handling of lists, key:value pairs, variables and much more is already in the core of TiddlyWiki.

3) Pre-processing a stylesheet instead of rendering it live every time it is used via JavaScript could be more efficient regarding computing power/energy consumption – something we all should keep an eye on, especially if we expect our solutions to scale or reach a broader audience. So this is something I suggest with my Stylesheet Generator and the Pallette Generator.

So to sum up: I would really like to see some of these concepts in future versions or editions of TiddlyWiki:

• re-usable stylesheet elements/parts
• generator(s)
• color functions
  
• pre-processed styles (in themes)

Could we profit from using Sass? I guess not, we have such a rich tool already and enjoy this already adapted development environment also for CSS.

All the best,

Thomas

[@TiddlyTweeter]

Ciao Thomas

I think your BRICKS plugin is a great work that compliments TW design very well. 

In particular it deconstructs TW CSS in a consistent logical way that makes TW CSS easier to work with.

Regarding SASS type thing for TW. I doubt it is needed. 

Barely commented on is that (likely because of Tiddler structure) TW CSS is actually very consistent, yet sophisticated.

The dynamic aspects of TW specific CSS (i.e. macro insertions) are unusual but good.

I think we lack ... a bit of documentation, especially on dynamic components

and

 

a VISUAL overview of classes for div containers to aid design.

Those comments are not about Bricks. Rather, TW CSS in general. 

My 2 cents

TT

[PMario]

Hi,

As others already said. TW _has_ a CSS preprocessor built in, which doesn't need a "build-step", which would need to be offline.

So I think there is no need to add an extra dependency, that will confuse our users even more. AND there are several CSS preprocessors available.

It will only start comments like: XXX is better than YYY, why don't you use XXX?

-mario

[TonyM]

Thanks for reviewing my comments, Can some one mark this as completed please.