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.

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

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

Una shares with us various CSS methodologies in creating Atomic OOBEMITSCSS

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

Variables allow you to use data over and over again throughout your CSS files. In this video I'll teach you about how to use variables in your projects.

Hugo shows us how we can get started with SCSS-Lint to help write better Sass and CSS.

Today, we're launching a new reference on Sass, right here on SitePoint.

Hugo shows us how we can use Sassy Tester and gulp to help us when testing a Sass library.

Read On Our Radar: Search, CSS Sliders, Reusable Code, and Responsive Sites and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.

David Khourshid shows us how to use True when your creating tests for your Sass framework.

Hugo shows us how we can got about testing a Sass function in 5 minutes or so using Sass.

This week, we discovered a fun drinking game for web devs. 1. think of a noun. 2. google "noun.js". 3. if it exists, drink.

Hugo shows us the bare essentials of what we could include in making a Gulp workflow for Sass.

James shows us how we can save a little time by using Sass to help create the CSS for Style Tiles

Hugo shows us how to use recursion in creating an awesome Sass mixin for media queries and media merging.

Hugo Giraudel shows us four ways of theming with Sass discussing the code required, the output and the pros and cons of each option.

Nate goes through what's needed to support older versions of IE and how Sass can help fix them easily.

Reggie shows us how we can use @import, @extend, @media and @at-root in Sass.

In this short video, I'll show you how to get started with Sass from the very beginning: by installing and verifying Sass.

James shows us how we can generate nice typography for our responsive sites with Sass maps and functions

Adam Onishi shows us how he's recently been creating a configuration file for theming with Sass.

Craig describes how to implement the preprocessing functionality you require using significantly faster, modular code.

Reggie continues our Sass Basics articles showing the basics of the control directives available.

George, shows us 8 different features available with the Compass framework that shows it's more than a mixin library for vendor prefixes.

Dennis shows us how we can use Sass to make theming form elements to match visuals.

Una shows some simple things we can use Sass maps for to keep our code readable and organized.

WordPress sticky headers run into a problem when the admin bar is visible. In this article, James Steinbach shows us how to use CSS (and Sass) to fix this.

George shows us how we can use the power of Foundation and keep our HTML lean and semantic.

Continuing our articles on Sass basics, Reggie shows us how we can use nesting in Sass.

Hugo Giraudel talks us through units in Sass and best practices around using them.

Alexander looks at some solutions for dealing with selector specificity when working with a CSS preprocessor.

Una Kravets discusses the benefits of creating a community around open source software like Sass.

Hugo shows us how we can extend a Sass media query mixin to allow for global layout changes and specific component changes.

Dennis, shows us a nice way to use Sass maps and the zip() function to make CSS shorthand nice and simple.

Hugo discusses why he's slowly moved away from Compass and favored other tools for speed and ease.

Hugo introduces us to the latest installment of SassDoc, minor updates, breaking changes, and some extras.

Tim shows us how we can great vector graphics in CSS using advanced techniques available in Sass.

Reggie shows us the basics of Sass' @function directive and how we can use it.

In this week's round-up of the biggest web news, James looks at predictions for the year ahead, the current state of JavaScript and what's new in Ruby 2.2.

M. David Green shows us how to get Bourbon up and running in your Sinatra projects.

A video screencast teaser for Joe Hewitson's Learnable course that shows you how to build a website project using Sass and the Foundation front-end framework.

Hugo shows us a new tool he and other have been working on to see if we can move our codebase from one Sass engine to another.

Hugo shows us a great way that we can build a functional wrapper with functions and mixins.

M. David Green shows how using the Sass'y Bourbon Refills can provide drop-in design and functionality for your site.

James shows us how to combine Susy with Breakpoint to make a responsive grid system.

George Martsoukos shows us some of the basic functionality that's built into Compass to help make CSS sprites that much easier and quicker.

Hugo shows us how to make a robust linear gradient Sass mixin.

Zell shows us how to add the Susy grid framework to a UI or prototyping library like Bootstrap

Paul Wilkins takes a look at the best links of the week, sharing articles about styleguides, UI, and intuitive animations.

In this article Hugo Giraudel discusses where we should be using multiple arguments, a list or an arglist when writing functions or mixins in Sass.

Charlie shares how to migrate your team from CSS to Sass with this in-depth guide

James gives us some options when handing over files to client who needs to edit your Sass, when they don't have Sass.

In this article Reggie looks over the improvements made in the recent release of Compass, the Framework for Sass.

James takes a practical look at inconsistencies between Sass 3.4 and the newly released LibSass 3.0

Jacob Gube shows us the most popular options for CSS preprocessors, along with some more obscure options you may not have considered before.

James Steinbach takes a look at the Breakpoint Compass extension from the Sass-y at-import team for media queries in responsive web design.

In this article Hugo Giraudel shows us three options for creating and dealing with constants in Sass

James Steinbach discusses how, in Sass, he's moved from using Bourbon's Neat grid system to at-import's Susy grid framework.

Hugo Giraudel explains how we can create a mixin in Sass to assist in debugging Sass maps and generating the CSS to check through.

James Steinbach walk us through a complex Sass mixin that will generate CSS that scales across media query breakpoints to ease development.

M. David Green tells us how using Bitters along with Bourbon helps speed up Sass development with simple, unopinionated pre-defined HTML elements.

James Steinbach takes a look at using Sass Maps and functions to help with managing CSS color values, with a demo you can try out.

Hugo Giraudel with a detailed tutorial on creating a step wizard, commonly found in e-commerce, using BEM and Sass techniques.

Hugo considers different use cases for selector nesting in Sass while also looking at ways it shouldn't be used and the problems it brings.

In this article we cover the many benefits of Sass for WordPress developers. Sass allows us to write maintainable, scalable code with logic and variables.

Hugo shows us how he's built a better function to validate length values in Sass, taking a number of different circumstances into consideration.

Reginald Dawson has some go-to mixins that he's uncovered in Bootstrap's Sass port. Here he describes 5 of them and how they can be used in your Bootstrap projects.

David Green looks at the features of Neat, a lightweight semantic grid system for Sass, from the creators of Bourbon.

Zell Liew looks at the grid system in Bootstrap and describes what he thinks is a superior grid framework: Susy.

From our friends at Learnable, here's a quick video explaining how to prototype with Sass in Foundation, part of a great new course on the framework.