Themeing, Stylus vs SCSS
-
Whats the reasoning behind using stylus vs SCSS? I’m curious.
If I decide to use SCSS (with which i am much more familiar) in .vue files, can I still Import color variables to a component from the original stylus theme?
The docs say that one can simply add a webpack Module but I doubt it’s that simple.
-
Hi oliver,
I felt like you in the beginning, but I must say stylus is fantastic and quite easy to pick up.
Adding support for scss is really just a matter of adding the correct loader in webpack, and it’s as easy as it gets with Webpack (i.e. we’re talking cut’n’paste of about 3 lines of code and there’s only ONE gazillion details that can go wrong). So yeah, it’s easy… on the webpack scale.
Anyway, give Stylus a chance, you won’t regret it. Razvan didn’t make this choice lightly and I feel it’s really paying off. -
Yeah I should really dive deeper into Stylus to get the full picture. I already adapted but I can imagine that this is one of the points on people’s list when they evaluate the framework.
I’m one of the guys moving towards VueJS and it’s UI frameworks because I think Angular(2,3,4…) and therefore also Ionic is going into a direction that I can no longer handle with a good conscience. I also don’t like being pushed into (in Angular’s case, very) opinionated structures, so by that logic, I simply am interested in the reasoning behind such decisions on a rational level.
I got more done and it was more fun to work with VueJS/Quasar in the past couple of days to build a simple app and customize components than trying to do the same thing with Ionic3+. Didn’t spend a minute on tooling issues but instead was able to focus on learning both Quasar and VueJS, not how to get around it’s limitations. It feels like regaining a bit of gravity after floating in Angular space.
-
Razvan will be happy to hear this, and I’m sure one of these days he’ll give us more insight on his choice of Stylus.
I for one appreciate Stylus’ ability to interpret vanilla CSS as is, and even mixed with the more modern and powerful Stylus syntax./ping /wink @rstoenescu
-
@oliver Btw I’m one of the guys who came back to JS dev after years of something else, and when I started diving into angular and react… I felt like I was bouncing back. The more I learned, the more confused I got. The more powerful the framework, the more restrictions it comes with… and the longer it took for a simple app to get live. Until I discovered Vue and then Quasar. Swimming with a smile on my face now. Code and logic are in harmony with the framework’s intentions, there’s ample freedom with little boilerplate, it’s easy to learn, resulting code is highly readable, docs and support are clean, clear and reactive. I can’t believe we’re still such a small community, I imagine our demographics will explode when we get to v1.0.0, because I cannot see any other obstacle to huge adoption in the JS/hybrid community.
-
@spectrolite yeah tell me a about it… the more i tried to get into Angular2, the less secure I felt and the more jargon and glorious concept I had to learn for the same simple thing. I liked Angular up to 1.5, and ionic was my go to to get things done quickly for prototypes but now it’s just exploding with complexity and situations where I am simply cringing in agony. if that’s what enterprise customers want, so be it. Reminds me a little of how drupal became an enterprise thing. Luckily, there’s always something there to fill the gap. Yay!
-
@oliver - Welcome to the world of Vue and Quasar!
You wrote:
I got more done and it was more fun to work with VueJS/Quasar in the past couple of days to build a simple app and customize components than trying to do the same thing with Ionic3+.
That sounds almost like a nice tweet or post in Facebook.
We need support getting the word out about Quasar.As for the decision to run with Stylus. You’ll notice, as you work with Quasar, that Razvan always tries to get the most pragmatic solution out there. Stylus follows the “simple yet powerful” pragmatism Quasar (and Vue) follows. As spectrolite mentioned, give Stylus a shot. You’ll probably also become fond of it too.
Scott
-
Sure, I would do that. But I left the social media circus a few months ago, so you see the “connectivity” issue there. I’ll certainly bring it up in discussions though. And I’ll probably write a few blog posts in the next months.
I greatly appreciate the work you guys put into this and I’ll sign up for a patreon donation as soon as I have a stable income again.
Talking about PR, I believe that one defining variable responsible for the surge of angular and ionic in particular is the availability of learning materials and tutorials. And especially in Ionic’s case, there’s a few Cloud services bundled with the framework. Ionic is the product of a VC funded company though.
Churning out tutorials for common use cases would certainly make it more accessible for newcomers. That generates some noise. And since learning material producers push their content, they push the framework at the same time.
Worth thinking about. Maybe.
-
To expand this a bit:
If you’re sneaky though, you can look at the places where Ionic is being discussed and get people with simpler app propositions who are struggling with Angular 2 to take a look at quasar.
Another way to show the seriousness of the project is to offer people using it commercially a place to prominently showcase where they used it and for what. Like show&tell here but more polished.
All of these things combined are probably necessary to create more traction and adoption. This is comparable to a positive feedback loop.
Or maybe you can offer a patreon backer something substantial that the drive-by consumer doesn’t have access to. Fostering the community is a large part of the whole patreon thing and I see the chicken and egg problem present in a situation like that.
This is subjective though and I have no idea what the plan is you guys have but at the end of the day, it’s really sweet to see the progress here.
-
There’s a lot of excellent ideas in your posts @oliver
I really think @rstoenescu should take a look at this topic when he’s back from holiday and make some of them a reality.
In the meantime, if anyone has connections with tutorial writers, it’d be a great idea to give them a taste of Quasar asap, so that as soon as it’s out of beta the tutorials can start rolling in… -
Or maybe you can offer a patreon backer something substantial that the drive-by consumer doesn’t have access to.
Razvan will attack bugs from Patreon donors at a higher priority. I am not sure it is a standard policy, but I know he does this. It’s sort of common sense thing to do, but maybe making it a clear objective/ expectation of being a supporter through Patreon could be a good thing?
Scott
-
@s.molinari said in Themeing, Stylus vs SCSS:
Or maybe you can offer a patreon backer something substantial that the drive-by consumer doesn’t have access to.
Razvan will attack bugs from Patreon donors at a higher priority. I am not sure it is a standard policy, but I know he does this. It’s sort of common sense thing to do, but maybe making it a clear objective/ expectation of being a supporter through Patreon could be a good thing?
This sounds like a win-win to me for everyone involved. However, it also creates obligations. And I’m not sure if that’s what he wants while not being able to work on it full time. It comes down to simple economics (at least from my very remote perspective).
It’s a tightrope walk. More buzz would be great, more patreon backers too. But the growth and obligations to fulfill people’s wishes that come with it would inevitably pose a scaling issue at some point, without considering turning it into a business case, like Ionic did. And reaching this point, things get exponentially more complicated.
I’m honestly in awe when I see how much time and effort Razvan already invested. That’s what makes me stick around here in the first place!
On the other hand, there’s the critical perspective: If I’d consider using it for a large project for a client, every piece of information that makes me feel more relaxed about all the possible issues (support, roadmap, LTS, etc) would certainly be positive. Will this still be maintained a year from now? And how will the ever increasing complexity of feature requests affect the project?
I personally love the idea of a crowd funded framework that doesn’t involve one large company dictating how we should do things. But taking into account that even VueJS on patreon didn’t crack the 10k mark yet with hundreds of thousands of downloads and even Weex/Alibaba being involved, Im not sure you can solely rely on goodwill. But the discussion about “free is not exactly free” is a long and opinionated one.
I wish the best for it and I already signed up for a patreon donation.
-
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?
-
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-stylusIt 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
- 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).
- 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.
