Themeing, Stylus vs SCSS



  • Good points Oliver. In the end, I am certain Razvan will make the best decisions. We just need to support him as best we can too. 😄

    Scott



  • Maybe a good time to revisit this topic… @rstoenescu

    There are still two mixins I haven’t been able to create with Stylus.
    (The second of which: ‘Dynamic Theme CSS generator for multiple theme variables’ will be key to be able to create multiple themes to make them user-selectable. Another thing which might be interesting to add to Quasar.)

    Maybe integrating SCSS as default is something more realistic now with 0.15 out?


  • Admin

    We’ve talked on Discord about this… Quasar themes !== some mixin that you want.



  • Exactly! It’s not Quasar themes is something completely different I understand now.

    For users who want to Dynamically change the default Quasar colors etc. You can do so with a special Stylus mixin!

    The creation of the mixin and the usage both explained towards the end of this thread:
    http://forum.quasar-framework.org/topic/1756/transform-scss-mixins-to-stylus

    It works great!



  • Hello,

    TL;DR
    we have a couple of running websites, the front-end is maintained by gulp/sass/jquery/materialize-css, the core is .NET based. Atm, i want to pass as much view jobs from jQuery to Vue. By doing this i think about replacing the UI-framework with Quasar. I choose Vue because of its components and iam excited to get additional advantage if the UI-framework makes as well use of them.
    Unfortunately after a some hours of testing, i realize that we cant use Quasar because the embeding process might be too time consuming.

    You are using the exotic css-preprocessor stylus, why this?!? I wasnt able to figure out any advantages by using this instead of SASS and migrating all our SASS universe might not be an option. We got booted because of this decision 🙂



  • @celtic said in Themeing, Stylus vs SCSS:

    You are using the exotic css-preprocessor stylus, why this?!? I wasnt able to figure out any advantages by using this instead of SASS and migrating all our SASS universe might not be an option. We got booted because of this decision 🙂

    1. Nothing stops you from using Sass on your Quasar projects (see docs). The only con is that you won’t have access to Quasar internal variables (if you’re reusing your views, you probably won’t need them).
    2. Stylus is not exotic at all: it’s the most popular preprocessor after Sass and Less, and arguably more flexible and expressive than first two. Another advantage is that Stylus is written in Node, while Sass is written in Ruby (therefore requiring an additional dependence). So, when Quasar started, years ago, Stylus was probably the boldest choice – now, that it isn’t in active maintenance anymore, it’s not such a future-proof choice.


  • Hey thanks for replay 🙂
    Of course i can use SASS and Quasar - no doubt, but iam looking for a GUI Framework for existing Projects written with SASS and now i have to make a descision. I can replace SASS with Stylus in my projects or replace Stylus in Quasar with SASS - i dont like both options 😞
    I understand your decision as you explained it.
    Didnt ever heard of Stylus nowadays it doesent seem to be a thread. If its the smarter preprocessor, maybe it failed because of the inappropriate website it has.



  • You could also use SCSS/SASS alongside with the Quasar Stylus theme. At the end it is all transpiled to vanilla CSS.
    Only thing you currently can’t to is to use the Stylus variables in SCSS/SASS. But I guess one could find a workaround for that.

    Stylus, albeit not as popular as SASS and LESS is one of the largest CSS preprocessors out there.
    It is know and loved for its very flexible syntax. But in the end I think you shouldn’t depend your choice of framework on the CSS preprocessor used.
    I see a lot of new projects not using a traditional preprocessor at all but switching to PostCSS and this seems to work out well.



  • @celtic Stylus sure did not “fail”. Stylus was one of the reasons I chose Quasar. Vue CLI 3 has a building option for it: https://github.com/vuejs/vue-cli/blob/dev/docs/css.md#pre-processors



  • I figured out that the css preprocessor is not really a thread.
    I was using this great tool: https://www.npmjs.com/package/s2sconvert
    Now my build can handle both SASS and Stylus 🙂

    Unfortunately Quasar wont be our choice as it turned out that it is a kind of fullstack spa, and i need a very specific own made build, vue-cli is not an option for us.
    But you did a great work, I wish you much success!