Skip to content

Switching to scss #1786

Description

@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

Activity

  1. added this to the Nextcloud 11.0 milestone on Oct 18, 2016
  2. LukasReschke commented on Oct 18, 2016

    @LukasReschke
    Member

    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" ;)

  3. jancborchardt commented on Oct 18, 2016

    @jancborchardt
    Member

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

  4. skjnldsv commented on Oct 18, 2016

    @skjnldsv
    MemberAuthor

    Yep! This is mandatory!

  5. raghunayyar commented on Oct 20, 2016

    @raghunayyar
    Member

    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.

  6. skjnldsv commented on Oct 20, 2016

    @skjnldsv
    MemberAuthor

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

  7. jancborchardt commented on Oct 20, 2016

    @jancborchardt
    Member

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

  8. raghunayyar commented on Nov 1, 2016

    @raghunayyar
    Member

    @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.

  9. MorrisJobke commented on Nov 2, 2016

    @MorrisJobke
    Member

    @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.

  10. self-assigned this
    on Nov 8, 2016
  11. Espina2 commented on Nov 8, 2016

    @Espina2
    Contributor

    Really nice that you guys switch. I agree 200% with @raghunayyar we should have a task runner to.

    @MorrisJobke I don't think you can confuse people if you only to run one command to run the taskrunner. Grunt serve, or Gulp serve its very easy and remove complexity. It bring not only the sass compiler but the server, the minify tools (for image and code) and all other stuff you have to manually. But since this are PHP based maybe compass are more "nice".

  12. 1 remaining item

  13. Espina2 commented on Nov 8, 2016

    @Espina2
    Contributor

    As you guys want, its a step forward anyway. Just thinking in what is more easy. I just think its more easy to new guys have the project if you have taskrunner that install all the depencies. But it can be only me.

  14. Henni commented on Nov 8, 2016

    @Henni
    Member

    @Espina2 @skjnldsv is working on a way to integrate scss without any development dependencies at all. Instead nextcloud will compile scss to css on the fly.

  15. Espina2 commented on Nov 8, 2016

    @Espina2
    Contributor

    @Henni

    I know what it is. This are introduced in nextcloud website, but removed after some time. I don't think this are a good practice have a script that compiles the code. It will load all the page with only html and after some time it compile the code. If you are in a slow network this will hurt a lot.

    So if this script is only for develpment I think its okay, if are for production I don't think so...

  16. skjnldsv commented on Nov 8, 2016

    @skjnldsv
    MemberAuthor

    As far as I can tell, my server isn't having any trouble. And it's a one-time compilation. Lambda user won't have any issue.

  17. BernhardPosselt commented on Nov 8, 2016

    @BernhardPosselt
    Member

    @Espina2 afaik its compiled using PHP, not the JavaScript compiler

  18. Espina2 commented on Nov 8, 2016

    @Espina2
    Contributor

    @BernhardPosselt @skjnldsv
    I'm not sure, but i guess that work's in the same way. It always have to check if the file have differences, so How its possible to compile one single time?

  19. skjnldsv commented on Nov 8, 2016

    @skjnldsv
    MemberAuthor

    Well, on a non-dev user installation, the scss won't change except maybe after an update. So only a single compilation will ensue.

  20. Espina2 commented on Nov 8, 2016

    @Espina2
    Contributor

    So what you are saying is when this are released you only have the css compiled in the folder, and further "tweaks" should be done in that css file?

  21. BernhardPosselt commented on Nov 8, 2016

    @BernhardPosselt
    Member

    I suppose the first web request will compile it

  22. MorrisJobke commented on Apr 6, 2017

    @MorrisJobke
    Member

    @skjnldsv I think this one is done :) We could refine based on the current state step by step if needed. Thanks for this awesome contribution :)

  23. skjnldsv commented on Apr 18, 2017

    @skjnldsv
    MemberAuthor
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions