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.
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.
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.
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. 🤯
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.
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
Will do, thanks!
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
{
"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"
}
}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. :)
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.
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”...
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.
Me! I'm doing ok, I think!
You would need: brew to install npm/yarn and that's it.
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. 😉😅
You would need: brew to install npm/yarn and that's it.
After this copy the package.json from Adam. Runyarnand after thisyarn scssand 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 yousudo rm -rf /as a solution for your Unix Server. 😉😅