-
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
-
CSS Tip: Using a Nested Link to Fill an Entire Div
Hyperlinks are a big part of every webpage, even if they’re not completely apparent. Typically you’d only have text or maybe wrap a <button> element with a link. Sometimes, a design called for an entire <div> (or any other sectional element) to be a clickable link. A typical example is an entire block with some...
Read More
-
Prettify Your CSS: Simple Linting Rules For Readable Code
Every web developer has come across CSS at one point or another. For most, it’s a necessary evil that’s easy to learn, but difficult to master. After some time, you start to get the hang of it and maybe even pick up something like SASS and/or flexbox. One thing you may not realize: your code...
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
-
Font Awesome Icons Not Showing: The Ultimate Reference For Fixing Your Icons
Font Awesome is a staple in modern web development. It’s a simple way to add professionally designed icons to spice up your web app. It’s free, simple to use, and actively maintained by a team of professionals. What’s not to like? The setup is simple: you add a reference to the .css or font file,...
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
