Tag: sass

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.

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.

Understand the best ways to style React components. We compare regular CSS with preprocessors like Sass and CSS-in-JS libraries like 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.

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

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.

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

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.

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).

Ashley Nolan introduces the features of stylelint, a flexible and well-supported CSS linting tool that can improve your team's code style and maintenance.

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.

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

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.

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.

Kushagra Gour introduces Web Maker, a browser extension for front-end developers needing a blazing-fast, offline web playground.

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

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.

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.

Read Jump Start Sass: Architecture in Sass and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.

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

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

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

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

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

Thomas Greco provides a run-through of the different features available in Compass to allow you to easily work with flexbox in CSS.

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.

James looks at three Sass directives that assist developers in debugging their SCSS code and can also help when working on Sass projects on a team.

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

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

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