Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement scss refactoring #3328

merged 12 commits into from May 23, 2019


Copy link

commented May 10, 2019


This PR is an SCSS-refactoring addition to PR: #3307 (comment)

This enhances code-quality of scss code by

  • including tool-tasks like sass-lint-fix (autodetects scss lint warnings and fix them if possible)
  • adding jsbeautifyrc, that can be used by IDE extensions to unify scss code automatically
  • deleting old css files for IE7, that will no longer be in use today (almost 13 years old browser)
  • rethinking of old "custom.css"-style-file. (it's not beneficial to generate own custom css file anymore. The less css, the less server requests. Rather now any CSS code can be included inside custom.scss file and will be compiled at bottom of cloudstack3.css by compiler.
  • adding z-index variables to better organize treacherous interdependently z-index values.

Types of changes

  • Breaking change (fix or feature that would cause existing functionality to change)
  • New feature (non-breaking change which adds functionality)
  • Bug fix (non-breaking change which fixes an issue)
  • Enhancement (improves an existing feature and functionality)
  • Cleanup (Code refactoring and cleanup, that may add test cases)

Screenshots (if appropriate):

How Has This Been Tested?

By running compilers and check build css code and by visiting the page with new css file.
(This changes modify and unify the structure of css code only and deleting old unused code)
All we have to check yet, is if cloudstack3.css includes any effective changes.

It's very useful to reduce the diff to non whitespace changes here again:
Screenshot 2019-04-26 at 16 23 44

Copy link

left a comment

Successfully built, deployed and tested

@svenvogel svenvogel self-requested a review May 14, 2019

@svenvogel svenvogel requested a review from PaulAngus May 14, 2019


This comment has been minimized.

Copy link
Contributor Author

commented May 14, 2019

this PR may seem confusing in first moment.
The most interesting file of those 86 is "cloudstack3.css"
All other files are just the source to compile this final 13000 lines css-file now and may be ignored in this PR.
Later we can use those new smaller scss-files to adjust styles more safety and faster.


@svenvogel svenvogel added this to the milestone May 14, 2019

@svenvogel svenvogel requested a review from DaanHoogland May 15, 2019


This comment has been minimized.

Copy link

commented May 16, 2019

I'm all for this but fear a similar situation like the latest jquery update. Not that we should back down but I'm wondering if there is a reliable way to check all changes here. a visual review of cloudstack3.ccs seems fine. /me not trusting my eyes.


This comment has been minimized.

Copy link
Contributor Author

commented May 16, 2019

Hey Daan,
thanks for your feedback.
This is not compareable to jquery update, because it's not an upgrade of any Framework Version. New compiled CSS remains CSS. It's an refactoring of old technology. I didn't changed the code at all here but I generated a way to better work with it.

The CSS script is full of redundant and outdated rules. We need to fix that anytime in future and we should begin right now.

There will be no warranty, that no issues and mistakes were done by me here, but it wont be that complicated to fix small issues and I am pretty experienced by what I'm doing.


@webermaximilian92 webermaximilian92 changed the title Enhancement scss refactoring WIP - do not merge - Enhancement scss refactoring May 16, 2019

@webermaximilian92 webermaximilian92 changed the title WIP - do not merge - Enhancement scss refactoring Enhancement scss refactoring May 16, 2019

@DaanHoogland DaanHoogland merged commit a5da389 into apache:master May 23, 2019

1 of 2 checks passed

continuous-integration/travis-ci/pr The Travis CI build could not complete due to an error
Jenkins This pull request looks good

gmueller-ewerk added a commit to gmueller-ewerk/cloudstack that referenced this pull request May 28, 2019

Enhancement scss refactoring (apache#3328)
* Introduce jsbeautifyrc and sass linter for automated unified scss code syntax

* Introduce new z-index scss file to manage different z-index correctly

* Use beautify tool for scss files and sass lint fix all scss files

* Add vscode folder to gitignore

* Add more new files to global gitignore

* Refactor scss files and rework custom styles implementation strategy

* Remove outdated ie7 styles

* Fix typo of facebook input token include

* Fix apache licences for new lint files

* Splitt massive cloudstack.scss into many modular and smaller files

* Refactor scss language files

* Change and move apache licence css file name
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.