-
![[Demo] Defining Reusable Column Extends with SCSS](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E)
[Demo] Defining Reusable Column Extends with SCSS
Using SCSS, creating flexible layouts that are reusable across projects is a breeze. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases You can think of them like pre-defined Bootstrap columns. To...
Read More
-
Let’s Learn SASS & SCSS: Diving Deeper into Mixins & Extends(Part 5)
Mixins and extends are cool, right? In our last article, we dived into the basics of both and have a good idea of what they are. In short: extends and mixins are great for reusing blocks of styles. Mixins can even perform calculations before returning the value. The problem is, you might not know how...
Read More
-
Let’s Learn SASS & SCSS: Extending your knowledge with @extends and @mixins (Part 4)
Now that we’ve covered all of the SASS basics, it’s time to dive into the more advanced features! There are two main features we will cover in this article: extends and mixins. Both of these allow you to reuse similar blocks of styles. If you’ve done any kind of extensive CSS development, you know how...
Read More
-
Let’s Learn SASS & SCSS: Variables and Nesting (Part 3)
Now that we’re starting to learn SASS, it’s natural to dive into the functionality that’s easiest to implement out of the gate. Don’t be fooled by its simplicity, these features are incredibly useful for your development workflow right off the bat. Not only that, they are fundamental features that more advanced features build off of....
Read More
-
Let’s Learn SASS & SCSS: Setting Up The Build (Part 2)
If you’re here, you’ve probably already gone through part 1 of the series. In that post, we covered why SASS is so great and the basics of what it does. This post will be all about getting set up with a basic build process so we can actually start using it on projects. Unfortunately, SCSS...
Read More
-
Let’s Learn SASS & SCSS: Getting Up And Running (Part 1)
If you’ve been in web development long enough, you’ve probably heard of SASS/SCSS. That’s no surprise, considering it has been around for so long(over 10 years), and it’s included in many popular build systems. Webpack builds such as create-react-app and Vue CLI templates come with easy SASS support. If you’re using your own build system,...
Read More
-
Getting Sassy: 3 Useful Ways To Use SASS Mixins
For years now, SASS has given CSS the functionalities that native CSS wish it could. These includes variables, selector nesting, mixins, extends, and much more. One simple but very powerful thing SASS gives you is the ability to outsource a similar set of style rules into a reusable “function”. This lets you centralize style logic...
Read More
-
Make Your CSS Life Easier, Learn To Abstract Media Queries With SASS Mixins
Digging into the trenches of responsive design can be surprisingly daunting, especially if you’re new to this kind of thing. The amount of shiny front-end build tools seems overwhelming at first, but they are ultimately here to help you. In this post, we’re looking at a shiny build tool called SASS. It’s actually not that shiny,...
Read More
![[Demo] Defining Reusable Column Extends with SCSS](https://bparkerproductions.com/wp-content/uploads/2023/09/demo-defining-reusable-column-extends.png)
