sass

What is Vitejs? An Overview of the New Front-end Build Tool

Need a simpler way to set up a front-end dev environment? With Vite, you can be up and running with Vue, React and even vanilla JS in just a few clicks.

How to Use PostCSS as a Configurable Alternative to Sass

Sass is handy, but can't do everything. Learn how to use PostCSS to create a custom CSS preprocessor that compiles Sass syntax but also adds extra features.

Style React Components: 7 Ways Compared

Understand the best ways to style React components. We compare regular CSS with preprocessors like Sass and CSS-in-JS libraries like styled-components.

How to Redesign Unsplash Using Styled Components

Akshay Kadam introduces Styled Components, a JS-based means of adding styles to your React project, and then shows how to use them in practice by imitating the Unsplash interface.

Develop WordPress Themes Faster with Gulp

WordPress theme developers need little more than a text editor and graphics package. But modern tools like Gulp can revolutionize your development workflow.

How to Use Gulp.js to Automate Your CSS Tasks

Craig Buckler demonstrates how use Gulp.js to automate CSS tasks, such as optimizing images, compiling Sass files, handling and inlining assets, automatically appending vendor prefixes, removing unused CSS selectors, minifying CSS, reporting file sizes, outputting sourcemaps and more.

Bootstrap Sass Installation and Customization

Reggie Dawson lays out and explains various tips and tricks for setting up, configuring and customizing a Bootstrap Sass-based project.

How to Write Beautiful Sass

Clean, beautiful code should be a goal in every project. If other developers need to make a change, they should be able to understand it.

How to Use Warnings and Errors in Sass Effectively

Now we’re going to look at warnings and errors. Both form a one-way communication system between the program (in this case, Sass) and the developer (you).

Converting Your Typographic Units with Sass

Byron shows us a neat Sass function to convert typographic units in CSS. Learn how to convert pixels into em and percentage units with the magic of Sass.

Sass Functions to Kick-Start Your Style Sheets

Byron shows us some of Sass functions built into the language and shows how you can use them to kick-start your style sheets.

What’s the Difference Between Sass and SCSS?

Hugo Giraudel explains clearly the differences between Sass and SCSS and offers an overview of the two syntaxes, a bit of history, and his recommendations.

Getting Started with Sass

Darren Wood offers an overview of Sass (Syntactically Awesome Style Sheets), where you'll learn why you need it and how to get started with it right now.

Sass, Susy, Unit Testing, and Finding Your Voice, with Miriam Suzanne

In this episode, Tim and David are joined by Miriam Suzanne, best known for Susy, a responsive layout toolkit for Sass.

How to Choose the Right CSS Toolkits and Frameworks

Miriam is a co-founder of OddBird, author of Jump Start Sass and creator of the Susy framework. Last week, she joined us for a chat about Susy and toolkits.

7 PostCSS Plugins to Ease You into PostCSS

Are you confused by PostCSS? Are you worried about complicating your build process? Don't be - Craig reveals how and why you should use it.

Jump Start Sass: Architecture in Sass

A Tale of CSS and Sass Precision

Hugo covers the options available for web developers in handling CSS precision with percentage values, including using Sass and the native calc function.

Data Types in Sass

An overview of the various data types available to developers in Sass, including numbers, booleans, strings, maps, lists and more.

Introducing Our Newest Book: Jump Start Sass

The best way to learn Sass, from Miriam Suzanne and Hugo Giraudel, two of the top experts on the popular CSS preprocessor. 

Hocus-Pocus: Building a Design-Free Sass Framework

Bartłomiej Kozal discusses the process of building his own Sass Framework, Hocus-Pocus, and the design decisions behind its features.

The Benefits of Inheritance via @extend in Sass

How web developers can use Sass' @extend feature to make their CSS cleaner, well-structured, and easier to maintain.

Watch: Compiling Sass using grunt-contrib-watch

Learn how to use Grunt’s Sass, watch, and connect plug-ins to create a build system that opens a browser, and updates any change in html, or Sass code.

Using @error responsibly in Sass

Hugo shows us how we can responsibly use the @error directive in Sass

Video: Sass vs SCSS

In this video I'll explain the differences between CSS and SCSS in Sass.

Centering With Sass

Hugo takes some of the well known centering techniques in CSS and shows us how to wrap them in Sass mixins.

Sass Maps vs. Nested Lists

What's best to use in this head-to-head James shows us the strengths and weaknesses of Sass Maps vs. Nested Lists

Structuring CSS Class Selectors with Sass

Hugo Giraudel discusses the various popular ways in CSS that we name and use class selectors and how Sass can help in structuring them.

Atomic OOBEMITSCSS

Una shares with us various CSS methodologies in creating Atomic OOBEMITSCSS

Video: Sass Color Palettes

In this video I will show you how to develop a complimentary colour palette using Sass and where it does all the thinking.