Quasar: Quasar in Sass/SCSS form

[TheJaredWilcurt]

Depending on the survey you find, somewhere between 75-95% of the industry uses Sass/SCSS. And the satisfaction rating for it is typically 90+%.

• https://2019.stateofcss.com/technologies

Sass also has better support for modern CSS.

There is a history of large projects that use Less/Stylus being switched over to Sass/SCSS.

• Bootstrap
  
  
  
  • v1 - Creator was friends with the creator of Less who asked him to use it on the project. Users immediately create an unofficial Sass port.
  
  
  • v2 - Seeing that the community wanted Sass over Less, both versions were maintained officially in version 2. This was cited as being a painful process
  
  
  • v3+ - Officially only supporting Sass
  
  
• Inkline
  
  
  
  • v1 - Initial release is praised for it's polish, but community asks to switch from Stylus to Sass
  
  
  • v1 - Creator quickly switches to Sass, dropping Stylus support.
  
  

The main lessons to learn from these case studies are:

• Sass is popular and desired, due to it's ecosystem, tooling, and integration with existing code.
• Switching becomes more painful as codebases and usage increase, for both the maintainer, and the users.

[rstoenescu]

Hi,

It so happens that we already started doing work for this! No breaking changes will occur.

Using Sass/SCSS is possible even today, just that you won't be able to use Quasar variables like with Stylus. This is going to change.

What we are currently working on:

• Support for a src/css/quasar.variables{.sass|.scss} file in @quasar/app. When that file exists in a project folder, it will enable you to use Quasar style variables in your <style lang="scss"> or <style lang="sass"> too.
• Replacing current src/css/quasar.variables.styl with a src/css/quasar.variables{.sass|.scss} will be supported. Quasar style itself will also compile using the new file instead.
• Offer Quasar's style source in the form of Sass (can be used seamlessly with SCSS too).
• Quasar app cli will support Stylus and Sass/SCSS out of the box (no additional packages will need to be installed for Sass/SCSS like it is required now).
• The starter kit will ask what is your "main" preprocessor of choice (Stylus or Sass/SCSS).
• No breaking changes necessary in your project folders.

Will keep everyone updated here as we make progress.

[M6stafa]

Do you want to drop stylus support in future?

[rstoenescu]

In Quasar v2 (so long into the future), Stylus will also be available. And work with the src/css/quasar.variables.styl file. The only difference will be that src/css/quasar.variables{.scss|.sass} will be required, because that's with what Quasar's CSS will be built with (only). So minimal impact over one's project folder. Functionality will be maintained. Let me know if I need to put this into better words.

[rstoenescu]

A few of the new possibilities (notice Quasar variables file can be even left out -- increased build speed):

[rstoenescu]

[rstoenescu]

[rstoenescu]

Closing as this is entering final internal beta stage.
Will be available with quasar/app 1.1.0 and next Quasar version.

[rstoenescu]

Available through "@quasar/app" v1.1.0 and "quasar" v1.1.2. Both released today.

[dariodepaolis]

is there any chance to have this update also through Vue CLI?

[rstoenescu]

@dariodepaolis
It will get updated eventually. But our current focus is Quasar CLI.