From CSS Struggles to SCSS Triumph: My Web Development Journey to Enhanced Web Styling
SCSS presents a notable enhancement over basic CSS, and its technicalities make it a must-learn skill for web developers. While learning CSS can be challenging, it is essential to unlock mastery of webpage styling. Despite its role as a fundamental web development tool, CSS isn’t without its limitations, and I began discovering them once I became proficient in the language. In the quest to find a better way of styling web pages, I came across SCSS. Chances are you have heard of SASS, so you might ask yourself how SCSS differs from it and why learning it should be so important when Bootstrap is a more popular choice. Hang on tight; I’ll explain.
What’s the Deal with SCSS and SASS?
CSS preprocessors are special languages that offer unique ways to write CSS code. The ultimate goal in programming is to write efficient code, and by using a preprocessor, you can access advanced features that make it easier to write CSS. SASS, short for Syntax Awesome Style Sheet, is a popular type of CSS preprocessor that helps designers style web pages faster and more organized, free of dreaded repetitive code. You can identify SASS files by their “.sass” suffix.
However, SASS uses an entirely different syntax from CSS, making it challenging for developers to transition from CSS to SASS. This is where SCSS comes to the rescue!
SCSS (Sassy CSS) uses a syntax similar to CSS, making learning easier for those familiar with CSS. SCSS is a subset of SASS, with the only difference being that SASS uses the indented syntax while SCSS is a superset CSS syntax. Think of SCSS as CSS with superpowers. For my anime lovers, CSS is Escanor at night, and SCSS is Escanor during the day. Cool, right? I digress.
SCSS offers more expressiveness and control when styling. Additionally, it has fewer restrictions when combined with existing CSS projects. It is no surprise that SCSS is more prevalent among developers. You can quickly identify a web page styled using SCSS by its “.scss” file extension. Now, let’s talk about the “superpowers” SCSS has in its toolbox.
SCSS? Why?
At first, CSS was a struggle for me to master. This was until I took a course by Kevin Powell — a truly excellent instructor — on scrimba.com. After gaining proficiency, CSS became my go-to tool for styling, but I started to get tired of it.
Every budding developer knows the struggles that come with writing CSS code, and I was no exception. As I started working on more complex projects that demanded intricate UI designs, I found myself writing hundreds of lines of code, which made programming a chore. In the search for a solution, I turned to my friends, who recommended CSS frameworks such as Bootstrap and Tailwind. Bootstrap’s styles were restrictive, demanding a lot of effort to customize projects to fit my preferences. A Bootstrap-styled website is easy to discern, and originality is not easy to come by — a flaw that hinders new developers from trying to stand out from a crowded field. Tailwind offered better flexibility with its style, but its heavy use of classes made my code look bulky, and I wasn’t enthusiastic about the appearance. While I still use both frameworks when necessary, I don’t prefer to use them on personal projects.
My learning experience with Bootstrap and Tailwind wasn’t all bleak clouds, however, as I discovered SCSS through my dealings with Bootstrap. While watching a Kevin Powell tutorial on Bootstrap (I know, I talk about him a lot), I stumbled across a tool he used that looked like a crossover of JavaScript and CSS — like the two frameworks had a baby. He referred to it as SCSS, and I decided to explore it further, checking out Jess Chan’s YouTube channel. Her tutorial on SCSS was insightful, and she guided me through her thought process and troubleshooting techniques throughout.
My first experience with SCSS
The first concept I came across when I started learning SCSS was variables. These bad boys allow you to store styling properties so you can refer to them later. SASS uses a “$” to denote variables, while CSS prefers a “ — .” Variables are essential for eliminating repetition and allowing for easier changes to code, as they only need to be made once to reflect throughout the rest of your codebase.
SCSS includes another helpful feature called mixins, which are similar to variables. With the “@mixin” keyword, you can encapsulate a group of styles and then use the “@include” keyword to apply those styles anywhere in your code. I specifically use mixins for my media queries.
One of the most interesting features of SCSS is nesting. It allows you to nest styles in their parent selectors, just like HTML. Additionally, you can apply styles to direct siblings using the ampersand (&) symbol, which tells SCSS to combine the parent selector with the nested child selector. SCSS also allows you to write CSS properties with the same prefix, such as “font-family” and “font-size,” as nested properties, making code cleaner and easier to read than standard CSS. Although CSS has recently introduced nesting, its application is restrained due to existing constraints within version 1. The nesting feature is my favorite feature of SCSS.
SASS’s most potent capability lies within its functions. The platform comes equipped with a diverse array of built-in functions that are readily available for use. These functions range from conditional logic (“if else” function) to lightening or darkening colors by a reasonable value. By leveraging functions, you can simplify complex operations within your code. SASS offers numerous pre-made functions for experimentation and customization.
Why some people don’t use SCSS
While SCSS offers flexibility in web page customization, many developers prefer to use CSS frameworks for their projects. Why? The answer is simple: prioritizing pace over precision. Coding with frameworks like Bootstrap is significantly quicker than SCSS due to their pre-installed group of styles that can easily be called using a class name. Their speed can be beneficial when working on projects with stringent time constraints.
In addition to its speed limitations, SCSS cannot run directly in a browser, and it must be compiled and converted into valid CSS that the browser can interpret. Although there are extensions that streamline this process, troubleshooting styling issues can be problematic.
SCSS Is the Best Thing Since Sliced Bread
As creative individuals who value control, we adore SCSS. CSS gave birth to SCSS, which has opened up infinite possibilities for us developers. SCSS has increased both work efficiency and speed since its adoption, and even if you are a Bootstrap enthusiast, SCSS is a crucial skill to add to your toolbox. Having a solid grasp of SCSS can help you tailor Bootstrap to your taste, and you should consider investing the time to learn SCSS.
