Do you use a CSS pre-processor?

Which CSS pre-processor (if any) do you use?

  • No preprocessor

    Votes: 15 34.9%
  • SASS

    Votes: 23 53.5%
  • LESS

    Votes: 4 9.3%
  • Stylus

    Votes: 1 2.3%
  • Other

    Votes: 7 16.3%

  • Total voters
    43

Adam

Mr. Webwide
Administrator
Local time
04:26
Joined
Sep 24, 2019
Messages
1,257
Pronouns
he/him

Poll above.

Which do you use if any and what are your favourite features? I am enjoying variables in vanilla CSS now but I just can't get myself away from nesting that helps me organise CSS so much better than without.

I usually use Sass but the Xenforo templating system for this forum uses Less so it has been good to learn some of the (minor) differences with that.

 

Ilgıt

Member
Local time
05:26
Joined
Oct 6, 2019
Messages
5

My favorite is SASS. Less not so much but used it for a while when I was working on a Magento 2 project.

I like "Styled Components" for React though. However my personal choice is VueJS when it comes to frontend development which I use SCSS for it.

 

tobyx

🌱
Local time
05:26
Joined
Oct 6, 2019
Messages
9
Pronouns
he/him

SASS written as SCSS.

Currently reworking my own website to auto-switch between light and dark mode. I couldn't deal with all those colors without variables.

I'm also heavily enjoying sass:color to create variants of colors, since I prototype in the browser.

 

Gummibeer

Astroneer
Moderator
Local time
05:26
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

Currently reworking my own website to auto-switch between light and dark mode.
Do you have a good designer or resource to create a good dark mode? For this is the new holy grail to create a really good and working dark mode which you can view more than 5min. I love dark modes but keeping the required contrast levels everywhere is sooooo hard. 🤯

 

tobyx

🌱
Local time
05:26
Joined
Oct 6, 2019
Messages
9
Pronouns
he/him

Do you have a good designer or resource to create a good dark mode? For this is the new holy grail to create a really good and working dark mode which you can view more than 5min. I love dark modes but keeping the required contrast levels everywhere is sooooo hard. 🤯

No, not really. There are a plethora of online contrast checkers that are also valid for dark mode colors, but I like none of them. I keep my color palettes in Sip for Mac, which does have a contrast checker that is quite ok but still requires a lot of manual work.

I find the Dark Mode of macOS Mojave to be a good inspiration. It's interesting that most elements require thin borders in order to get separation and spatiality back into the design. The default go-to tool for designers has been soft drop shadows which absolutely no longer work in dark modes. I think this will require a few years until we get good dark modes all over the web.

To be back on topic, I couldn't do all this without having a dedicated area with SASS variables and sass:color to create my palettes and inverted dark modes. It requires so many iterations and testing and then just browsing the site yourself and "feeling" it.

 

m1guelpf

18-year-old maker
Local time
06:26
Joined
Oct 5, 2019
Messages
57
Pronouns
he, him

I use less for no reason really, I checked it out someday and then never used scss

 

kilian

Member
Gold Member
Local time
05:26
Joined
Oct 7, 2019
Messages
62
Pronouns
he/him

I've tried all of them at some point, and used SASS the most. Nowadays I use PostCSS using PostCSS-preset-env, which lets you use the CSS of the future. It supports everything SCSS does, with the added benefit of (theoretically) not having to compile your CSS in the future. It's really nice to write CSS in this way and if there's anything you want to do in your CSS, writing a PostCSS plugin is actually pretty simple, I wrote one that lets me write :hocus instead of :hover, :focus, because I'm lazy: postcss-hocus :D

 
Last edited:

Gummibeer

Astroneer
Moderator
Local time
05:26
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

Do you have a good tutorial on preprocessors? I never felt I needed it, but I might be wrong of course😉

The benefit is that you save tons of lines, you get the indentation you already know from PHP, JS, HTML ... and can use variables which makes life much easier because you can switch a color all over the CSS with a single change, same for margins or whatever.
Just check it out. 😉

 

ralphsmit

Member
Local time
05:26
Joined
Oct 5, 2019
Messages
16


The benefit is that you save tons of lines, you get the indentation you already know from PHP, JS, HTML ... and can use variables which makes life much easier because you can switch a color all over the CSS with a single change, same for margins or whatever.
Just check it out. 😉
Will do, thanks!

 

AndrewDavidJ

Member
Local time
23:26
Joined
Oct 7, 2019
Messages
21
Pronouns
He/Him

Yeah, switched to SASS last year and I am very glad that I did.

I was pretty stubborn about switching from pure CSS to a pre-processor for a long time simply because it meant adding more steps to my workflow (setting up, compiling, etc) and I didn't fully understand what the benefits were.

I don't think I can ever go back now.

 

Adam

Mr. Webwide
Administrator
Local time
04:26
Joined
Sep 24, 2019
Messages
1,257
Pronouns
he/him

Yeah, switched to SASS last year and I am very glad that I did.

I was pretty stubborn about switching from pure CSS to a pre-processor for a long time simply because it meant adding more steps to my workflow (setting up, compiling, etc) and I didn't fully understand what the benefits were.

I don't think I can ever go back now.

I was the same way! I finally saw the light a couple of years ago. If I'm just setting up something really simple like a static site (not generated) I'll use this set-up as a bare minimum.

package.json

JSON:
{
  "name": "mysite",
  "version": "1.0.0",
  "description": "My Sample Site",
  "scripts": {
    "scss": "node-sass --watch assets/scss/style.scss -o assets/css/"
  },
  "author": "Adam Greenogh",
  "dependencies": {
    "node-sass": "^4.11.0"
  }
}

Then run npm install, screen then npm run scss and off it goes running on the background watching and updating changes on whatever development machine I'm working on.

PS. @ralphsmit this might be good way for you to get started with it. :)

 
Last edited:

kognise

Member
Local time
23:26
Joined
Oct 5, 2019
Messages
44
Pronouns
He/him/his

I used to use a CSS preprocessor - but the main reason was variable support. Now that CSS variables (custom properties) is widespread, I don't use a preprocessor much anymore. The closest I get is CSS-in-JS solution, and only sometimes.

 

UnitPrice.org

Member
Local time
23:26
Joined
Oct 7, 2019
Messages
39

I used to, but I realized that it was slowing down my development time (due to my unfamiliarity). Prior to launch, sometimes it’s better to hack things together, even if my natural tendency is to get everything “perfect”...

 

VickiLanger

Asks "why?" too much
Gold Member
Local time
23:26
Joined
Oct 7, 2019
Messages
189
Pronouns
she/her

I started playing with sass but decided it was too complex. I’ve learned a lot since then. I think if I went back to it, I’d use it. I don’t do too much with css right now though.

 

ralphsmit

Member
Local time
05:26
Joined
Oct 5, 2019
Messages
16

I was the same way! I finally saw the light a couple of years ago. If I'm just setting up something really simple like a static site (not generated) I'll use this set-up as a bare minimum.

package.json

JSON:
{
  "name": "mysite",
  "version": "1.0.0",
  "description": "My Sample Site",
  "scripts": {
    "scss": "node-sass --watch assets/scss/style.scss -o assets/css/"
  },
  "author": "Adam Greenogh",
  "dependencies": {
    "node-sass": "^4.11.0"
  }
}

Then run npm install, screen then npm run scss and off it goes running on the background watching and updating changes on whatever development machine I'm working on.

PS. @ralphsmit this might be good way for you to get started with it. :)


Thanks for the advice! What do I need to install for this (Mac)? And whats the best way to set this up with a text editor (I use Atom)? I think a preprocessor might be very valuable, regarding all the positive replies here 🙂

 

Gummibeer

Astroneer
Moderator
Local time
05:26
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

Thanks for the advice! What do I need to install for this (Mac)? And whats the best way to set this up with a text editor (I use Atom)? I think a preprocessor might be very valuable, regarding all the positive replies here 🙂
You would need: brew to install npm/yarn and that's it.


After this copy the package.json from Adam. Run yarn and after this yarn scss and it will compile your SCSS. But I recommend to read a bit about node, npm/yarn, package.json and the used compiler to know what happens. Otherwise I will send you sudo rm -rf / as a solution for your Unix Server. 😉😅

 

ralphsmit

Member
Local time
05:26
Joined
Oct 5, 2019
Messages
16

You would need: brew to install npm/yarn and that's it.


After this copy the package.json from Adam. Run yarn and after this yarn scss and it will compile your SCSS. But I recommend to read a bit about node, npm/yarn, package.json and the used compiler to know what happens. Otherwise I will send you sudo rm -rf / as a solution for your Unix Server. 😉😅

Ok thanks!😉

 
Top