Switching to scss

[skjnldsv]

This is becoming more and more needed. The more we wait, the harder it will gets for us to make the switch later.

Sooooooo let's do this!

Why

1. Nesting and code readability. This is an insane advantage to have. Right now the code have a basic structure, but it's still very hard to find whatever you're searching.
2. Size. Scss files are significantly lighter than css. if correctly implemented, the generated css file should still be lighter than what we currently have.
3. Redundancy. Actually we have a lot of similar stuff that would be great to merge (inputs.css for example)
4. Variables. Will definitely improve the overall design guidelines for this project and allows pretty much anyone to quickly edit a global var for customisation.

Goals

• Only increase the entry barrier with the scss language. No sass lib needed, no core compilation...
• Use caching for freshly compiled css
• Do not compress output if debug enabled (for devs)
• Rewrite all css into scss with proper nesting
• Convert and regroup similar used colours into variables

Numbers

• First commit with a basic css to scss conversion and compression enabled saves 10.965KB

Roadmap

• Use on-the-fly scss compiler so no one has to install anything
• Cache system
• Detect and change url on compiled files
• Convert css to scss
  • apps.css
  • fixes.css
  • fonts.css
  • global.css
  • header.css
  • icons.css
  • inputs.css
  • jquery-ui-fixes.css
  • jquery.ocdialog.css
  • mobile.css
  • multiselect.css
  • share.css
  • styles.css
  • systemtags.css
  • tooltip.css
  • update.css
• Switch to AppData
• Tests
• Finish guest.css file
• Cleanup scss files
  • Fix copyrights
• List and regroup variables into variables.scss
• Regroup and merge keyframes into animations.scss

Optionnal

• Compress css on compiling (if no debug mode)
• Added original SCSS line numbers for better frontend debugging (if debug mode)

@Henni @MorrisJobke @BernhardPosselt @jancborchardt

[LukasReschke]

Use on-the-fly scss compiler so no one has to install anything

If that is possible: 👍

Otherwise that would be kinda of a bummer to tell people to do "just these 10 steps to change CSS files" ;)

[jancborchardt]

Yup, as talked about if we have an on-the-fly SCSS compiler it’s good. :) If not it’s a very annoying barrier.

[skjnldsv]

Yep! This is mandatory!

[raghunayyar]

well, this can be integrated with the task runners we use for the applications at-least. So, no additional steps for the app standpoint.
I am super happy for us to move to sass, it has been long pending.

[skjnldsv]

@raghunayyar you mean cron? How will we handle the compiling if the user load nextcloud but the cron hasn't started?

[jancborchardt]

@raghunayyar having a task runner for core development is exactly what we want to avoid ;) it’s about on-the fly CSS generation.

[raghunayyar]

@skjnldsv I meant something like grunt / gulp / webpack. But @jancborchardt seems legit about avoiding that hastle in core. It can be taken in account for apps though.

[MorrisJobke]

@skjnldsv I meant something like grunt / gulp / webpack.

No way. We will not introduce such stuff - it only confused people - new ones in the same way as existing contributors.