Stylus CSS vs. less vs. sass

packages
1

Is it safe to say that the Stylus CSS language seems very similar to jade and coffescript syntax. I have just looked at Stylus for the first time, and I am curious to know if anyone enjoys using the framework.

If anyone uses stylus and would like to chime in please do.

1 Like
2

Be sure to also take a look at JSS.

1 Like
3

I have only started to look into these myself so I am interested in hearing what people have to offer…

Personally I am not really too comfortable moving too far away from vanilla CSS.
I have only ventured so far as trying out LESS and I really do like the simple additions it adds.
It’s going to be standard in all my projects :smile:

4

The main issue for me with alternatives is if you stray too far you are likely to be on your own and unable to get help.

1 Like
5

I am not a very active developer who would use CSS but I always go with Less. I was hoping that Less will finally take over and it will become THE language we all use. But now I hear that Bootstrap 4 is switching to Scss. Really. I don’t get it.

6 Likes
6

I have used them all. I like Less but the lack of conditionals and looping makes it Less powerful than Sass. In the end Scss (even LibSass), is very similar to Less, just as easy to learn, but more powerful. Seriously, if you know Less, it takes about 30 minutes to migrate to Scss. With important libraries and frameworks like Ionic, Marerialize, and Bootstrap (among others) using Sass, I don’t see many projects using Less anymore. At one point Less and Scss seemed equally popular, but I think Scss has taken the lead.

7

@chrismbeckett Have you used JSS?

8

I have not please give me the details and benefits.

9

@rwatts Here’s the details and benefits of JSS: https://github.com/jsstyles/jss

10

I work a lot with SCSS at work and I work a lot with LESS in my freelance projects. My question is I’ve heard a lot about stylus and now I’m here now JSS is definitely the way to go what are your thoughts

11

And why not Stylus? :wink: It is elastic, powerful and its javascript API is great.
Stylus is the best for Meteor imho.

Look at all these packages: https://atmospherejs.com/?q=stylus …with autoprefixer, nib, rupture, grid systems and more.

Why bother with Scss and Less? :wink:

12

Stylus + nib can’t be beat and this is coming from a guy who hates coffeescript. LESS & SASS seemed to make CSS more complicated. Then I took a course on stylus (http://webdesign.tutsplus.com/courses/become-a-css-superhero-with-stylus) & it seemed so darn simple. Stylus is to CSS what Meteor is to Node.

1 Like
13

A lot of people are mentioning JSS @mattkrick have you worked ever with it.

14

Not for more than a day so my opinion isn’t really valid, it could pick up
more steam when the web animations API gets closer to done since that’s
very similar, we’ll see.

15

I have began the journey of learning JSS . However I can’t seem to get things working properly. I would gladly take examples from anyone willing to provide them. Below are the steps I took to integrate JSS in my meteor app.

  • Installed meteorhacks:npm
  • Loaded the current jss npm package.
  • Required the package on the server side var test = Meteor.npmRequire('jss');
  • Created a basic stylesheet and used the attach() method.

After following these steps I do not see updates on the client, to the specific div I targeted in my style.

16

@rwatts The steps you listed seem just fine, as far as getting it into Meteor goes. Can you post code samples?

17

Thank you @joe
Here is the code sample I tried that doesn’t work it’s giving me the following error.

Code

var jss = Meteor.npmRequire('jss');

var sheet = jss.createStyleSheet({
	'.test' : {
		background: 'blue'
	}
} , {name:false}).attach()

Error

Your app is crashing. Here's the latest log.


C:\Users\rwatts\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\dev_bundle\server-lib\node_modules\fibers\future.js:245
						throw(ex);
						      ^
TypeError: Cannot set property 'innerHTML' of null
    at StyleSheet.deploy (C:\Users\rwatts\Documents\sites\jss-example\.meteor\local\isopacks\npm-container\npm\node_modules\jss\lib\StyleSheet.js:100:28)
    at StyleSheet.attach (C:\Users\rwatts\Documents\sites\jss-example\.meteor\local\isopacks\npm-container\npm\node_modules\jss\lib\StyleSheet.js:61:14)
    at app\server\stylesheet.js:7:19
    at app\server\stylesheet.js:9:3
    at C:\Users\rwatts\Documents\sites\jss-example\.meteor\local\build\programs\server\boot.js:222:10
    at Array.forEach (native)
    at Function._.each._.forEach (C:\Users\rwatts\AppData\Local\.meteor\packages\meteor-tool\1.1.3\mt-os.windows.x86_32\dev_bundle\server-lib\node_modules\underscore\underscore.js:79:11)
    at C:\Users\rwatts\Documents\sites\jss-example\.meteor\local\build\programs\server\boot.js:117:5
Exited with code: 8
Your application is crashing. Waiting for file change.
18

I like using either LESS or SCSS. There are a few benefits to SCSS like prefixing right out of the box whereas you have to do some extra work in LESS atm. Although, you can’t setup variables for file locations in SCSS, but you can in LESS. There are tradeoffs for each.

But, there are newer ones that are out now like CSS Next which is allowing you to use newer CSS features way before they are released (Like Babel for ES6). Not that much similar to LESS or SCSS.

19

@rgoomar speaking of ES6 how do I use ES6 in my project and what are the recommended packages ?

20

$0.02

Having used them all, I’d say less, sass, and stylus are all pretty similar, and roughly equal.

The best feature (imho) they provide is nested classes, which allow people to take css classes out of global scope and pseudo-scope them to a specific component/template. The most painful feature (again, imho) are variable mixins, since they require static linking/importing of files, which goes against the Meteor bundler paradigm. The grove:less package addresses that shortcoming; but even with it, the issue is still sort of there in the background.

I’d second the opinion of looking into JSS. I think it, or something like it, is the way of the future.

Edit: Be sure to take a look at JSS: The Important Parts for an example of how one would go about using JSS with Blaze; and keep in mind that the toString() method will allow one to write to a DOM element’s style attribute for dynamic layout & positioning.

1 Like