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

Quasar in Sass/SCSS form #5049

Closed
TheJaredWilcurt opened this issue Sep 8, 2019 · 7 comments

Comments

@TheJaredWilcurt
Copy link

commented Sep 8, 2019

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+%.

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

This comment has been minimized.

Copy link
Member

commented Sep 9, 2019

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.

@rstoenescu rstoenescu pinned this issue Sep 9, 2019

@rstoenescu rstoenescu changed the title Switch to Sass or SCSS Quasar in Sass or SCSS form Sep 9, 2019

@rstoenescu rstoenescu changed the title Quasar in Sass or SCSS form Quasar in Sass/SCSS form Sep 9, 2019

@M6stafa

This comment has been minimized.

Copy link

commented Sep 10, 2019

Do you want to drop stylus support in future?

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Sep 10, 2019

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 added a commit that referenced this issue Sep 10, 2019
rstoenescu added a commit that referenced this issue Sep 10, 2019
feat(app): Sass/SCSS support #5049
* /src/css/quasar.variables.scss support
* /src/css/quasar.variables.sass support
* Quasar variables available even if app-space override file is missing
* Supply node-sass and sass-loader out of the box
rstoenescu added a commit that referenced this issue Sep 10, 2019

@rstoenescu rstoenescu reopened this Sep 11, 2019

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

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

unknown

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

variables

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

cli-question

@rstoenescu

This comment has been minimized.

Copy link
Member

commented Sep 11, 2019

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

@rstoenescu rstoenescu closed this Sep 11, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.