Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
Sass

40 Articles
{
,

}
Direct link to the article Comparing Styling Methods in 2020
css modules css-in-js less postcss Sass stylus

Comparing Styling Methods in 2020

Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It’s in the context of Next.js, which is somewhat important as Next.js has some specific ways you work with these tools, is React and, thus, is a components-based …

Avatar of Chris Coyier
Chris Coyier on Oct 20, 2020
Direct link to the article When Sass and New CSS Features Collide
calc css variables custom properties filter gradients max min Sass

When Sass and New CSS Features Collide

Recently, CSS has added a lot of new cool features such as custom properties and new functions. While these things can make our lives a lot easier, they can also end up interacting with preprocessors, like Sass, in funny …

Avatar of Ana Tudor
Ana Tudor on Jun 29, 2020
Direct link to the article Making My Netlify Build Run Sass
build tool jamstack netlify Sass

Making My Netlify Build Run Sass

Let’s say you wanted to build a site with Eleventy as the generator. Popular choice these days! Eleventy doesn’t have some particularly blessed way of preprocessing your CSS, if that’s something you want to do. There are a variety of …

Avatar of Chris Coyier
Chris Coyier on Jun 9, 2020
Direct link to the article How to Tame Line Height in CSS
google fonts line-height Sass typography

How to Tame Line Height in CSS

In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design — a term, interestingly enough, that …

Avatar of Caleb Williams
Caleb Williams on Jul 9, 2020
Direct link to the article Getting JavaScript to Talk to CSS and Sass
custom properties JavaScript Sass

Getting JavaScript to Talk to CSS and Sass

JavaScript and CSS have lived beside one another for upwards of 20 years. And yet it’s been remarkably tough to share data between them. There have been large attempts, sure. But, I have something simple and intuitive in mind — …

Avatar of Marko Ilic
Marko Ilic on Aug 25, 2020
Direct link to the article Sass !default and themeable design systems
design systems Sass

Sass !default and themeable design systems

Direct Link

This is a great blog post from Brad Frost where he walks us through an interesting example. Let’s say we’re making a theme and we have some Sass like this:

.c-text-input {
  background-color: $form-background-color;
  padding: 10px
}
…
Avatar of Robin Rendle
Shared by Robin Rendle on Mar 11, 2020
Direct link to the article A Handy Sass-Powered Tool for Making Balanced Color Palettes
color Sass

A Handy Sass-Powered Tool for Making Balanced Color Palettes

For those who may not come from a design background, selecting a color palette is often based on personal preferences. Choosing colors might be done with an online color tool, sampling from an image, “borrowing” from favorite brands, or just …

Avatar of Stephanie Eckles
Stephanie Eckles on Dec 9, 2019
Direct link to the article Introducing Sass Modules
modules Sass

Introducing Sass Modules

Sass just launched a major new feature you might recognize from other languages: a module system. This is a big step forward for @import. one of the most-used Sass-features. While the current @import rule allows you to pull …

Avatar of Miriam Suzanne
Miriam Suzanne on Oct 14, 2019
Direct link to the article A Proof of Concept for Making Sass Faster
Sass

A Proof of Concept for Making Sass Faster

At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads the stylesheet for us in the browser. But, as the amount of Sass …

Avatar of Sebastian Webb
Sebastian Webb on Oct 9, 2019
Direct link to the article Creating a Maintainable Icon System with Sass
background-image icons Sass sass maps svg icons

Creating a Maintainable Icon System with Sass

One of my favorite ways of adding icons to a site is by including them as data URL background images to pseudo-elements (e.g. ::after) in my CSS. This technique offers several advantages:

  • They don’t require any additional HTTP requests
…
Avatar of Tracy Rotton
Tracy Rotton on Aug 28, 2019
Direct link to the article Staggered CSS Transitions
hover nth-child Sass transition-delay

Staggered CSS Transitions

Let’s say you wanted to move an element on :hover for a fun visual effect.

@media (hover: hover) {
  .list--item {
    transition: 0.1s;
    transform: translateY(10px);
  }
  .list--item:hover,
  .list--item:focus {
    transform: translateY(0);
  }
}

Cool cool. But what if you had …

Avatar of Chris Coyier
Chris Coyier on Aug 14, 2019
  • 1
  • 2
  • 3
  • ...
  • 4
  • Older
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top