This content originally appeared on Level Up Coding - Medium and was authored by Ben Yoss
As a software developer who works on the styling of an application’s Front End using CSS, there are various challenges which can appear throughout the development process. These challenges could be the duplication of similar styles or the elongated naming conventions for class or id elements to name a few.
However, these conflicts could be simply avoided if there was a way to integrate CSS with scripting language principals. That is the same question which was brought to the attention of Hampton Catlin, who developed the innovative solution, SASS.
Today I am going to be talking about the scalable utilities SASS can provide to greatly improve the CSS experience. Let’s get started.
What is SCSS/SASS?
To clarify, SCSS and SASS are not the same format type.
SASS (Syntactically Awesome Style Sheets) is a scripting language which is used as a super-set to the more standard approach, CSS (Cascading Style Sheets). The language piggy-backs off of CSS such that the code contained within the file at run-time compiles into the CSS equivalent.
SCSS (SASSY Cascading Style Sheets) is a fusion between the standard CSS format and the SASS format, allowing for both languages to exist in the same codebase.
What can be done with SASS?
SASS adds the behaviors of typical scripting language principals (i.e. Functions, Variables, Conditionals) to the style sheet, allowing for a more flexible and simplistic environment. Let’s take a look at some features that SASS can bring:
Datatypes
SASS provides several additional datatypes which can be used in the CSS environment:
Map: An immutable sequence of key-value pairs. Maps are initialized by specifying the key name separated by comma and a value inside of parenthesis.
List: An immutable sequence of values. Lists can be initialized by adding multiple values separated by a comma or space.
Booleans/Null: Just like any scripting language, SASS contains Boolean values as well as a Null values.
Variables
In a standard CSS environment there lies the tedious task of having to manually change each individual style in a list of elements despite the similarities of styles between elements.
The image above showcases a scaled down representation of repeating styles in the scope of CSS elements. Notice how the color and background-color contain the same values. However, if you were to change the value to be consistent with the rest of the elements, you would have to alter each individual style within each element.
The snippet above indicates the difference that SASS could bring to this issue. By incorporating variable declaration, all the developer has to do is tweak the values of the variables above and all of the elements are consistently tweaked as a result.
Element Nesting
CSS elements are always in their own individual scopes even when the elements contain nearly identical properties. This results in the style sheet to have a greater complexity and file size.
The snippet above shows 3 elements — .Header, .header, and .description — which all contain similar properties.
SASS introduces the ability to nest elements within each other to make a cleaner and more robust codebase.
Functions
Unlike the CSS environment, SASS allows for functions to exist within the stylesheet. Functions in SASS behave similarly to the functions in standard scripting languages except they are inside of a stylesheet. You can get very creative with the different implementations of this feature.
Mixins
Mixins define styles that can be reused throughout the stylesheet environment. This removes verbose repetition of styles and avoids non-semantic utilities.
Conditionals
When styling selectors there is the occasional encounter where the styles should vary depending on the type of element. This can result in a entirely new selector developed with the same styles except one or more styles are altered. Fortunately for SASS developers, this is not an issue. Conditionals can be created in the SASS environment and behave identically to scripting language conditionals.
For/While/Each
SASS provides an iterative solution to the stylesheet environment through the use of looping. @For rules are utilized when looping through a fixed number of times depending on the index value. @While rules continuously iterate a block of code until a specified condition is met to which it then “breaks” from it’s cycle. Finally, the @Each rule allows for a list of elements or pairs in a map to be iterated from.
Conclusion
Through the course of this blog we have covered what SASS is along with the utilities that the language can provide to enhance the stylesheet codebase. We have discussed what datatypes SASS has to offer and what variables, loops, and conditionals are. Additionally, we covered functional programming using Functions/Mixins along with the basic principles of element nesting. Hopefully you have found this blog to be useful on your journey to becoming a SASS developer!
The Fundamentals of SASS/SCSS was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Ben Yoss
Ben Yoss | Sciencx (2021-10-14T12:23:45+00:00) The Fundamentals of SASS/SCSS. Retrieved from https://www.scien.cx/2021/10/14/the-fundamentals-of-sass-scss/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.