.jpeg)
1. Brief History of CSS
CSS is a programming language invented in 1994 and adopted as a web standard in 96.
Yes, I know that a lot of people don’t consider and laugh at me when I say CSS is a programming language, but we’ll get there in a minute.
Since its beginning, CSS was not been entirely accepted by all web browsers and it suffered a lot of changes, for example, only in the year 2000 a browser achieved full support of all CSS 1 features. Amazingly, it was Internet Explorer (for Mac) with around 99% CSS 1 feature support.
Throughout the years CSS has been growing from its first basic version, designed to change colors, fonts, alignments, and spacings to its latest version with more than 200 properties (accordingly to W3Schools) but can easily be extended to more than 550 if we take in consideration all the selectors, at-rules, and other stuff (based on MDN).
That being said and before moving forward, let me explain why I consider CSS a programming language.
As with any other programming language like Java or C, CSS has rules, syntax, best practices, naming conventions, and an engine that “runs” it (browsers). I know that it fails in some Turing Complete validations to the extent that on its own, it is not capable of solving problems but besides that, when I am writing CSS I am “programming” in a “language” and thus, I like to think that CSS is a programming language.
But let's focus less on controversial issues for humanity, and focus on the more obvious limitations of CSS such as its syntax and its inability to create functions and cycles.
2. CSS Preprocessors
As said before, CSS is fun but there are a lot of limitations regarding its syntax and the difficulty of maintaining multiple CSS files and structuring the code.
To overcome these problems, CSS preprocessor script languages were invented, allowing the extension of the capabilities of CSS, improving the structure of the files, and the maintenance of the code and thus allowing the writing of "classic" CSS in a "modern" way.
By using advanced features like variables, functions, nested rules, and others, preprocessors allow a more flexible way of writing code.
The way a preprocessor works is very basic. The developer writes code by mixing CSS properties and CSS preprocessor capabilities like loops or if statements and the preprocessor then compile the code into standard CSS, which web browsers can interpret.
There are a handful of CSS preprocessors you can explore to find the one you like the most is the most known ones SASS, LESS, Stylus, and PostCSS.
For this article, I want to focus on SASS but most of the other preprocessor languages follow the same features some more complex and some more basic.
3. SASS Preprocessor
SASS is a preprocessor capable of interpreting a syntax and converting it to plain CSS that all browsers can read.
It has two syntaxes that can be used: SASS and SCSS, both providing the same advanced features and functionality. The choice between them will depend on personal preference or project requirements.
SASS Syntax
Sass uses a syntax that is a little different from CSS and is designed to be more efficient.
It doesn’t use semi-commas to separate rules or braces to denote blocks of code. However, some developers may find the syntax confusing.
Examples of SASS syntax:
SCSS Syntax
SCSS, on the other hand, uses a syntax that is almost identical to CSS making it easier for developers who are already familiar with CSS, as they can write CSS code more familiarly.
Examples of SCSS syntax:
4. How to install SASS
Since SASS is a compiler, you need to install it in order to be able to compile your code.
There are mainly two ways to install SASS:
The first one is by installing an application that will set up everything for you and you simply need to tell the app the folder you are working on, you can try Scout-App for free. This is recommended for more junior developers who are starting with this type of technology and have less knowledge of how to work with the command line.
The second way is to use the command line to install Sass on Windows, Mac, or Linux by downloading the required package. You have 3 different package managers that you can use to install SASS:
Using Node.js
One way is to use npm from Node.js (it will work on Win, Mac, and Linux). Simply run the following command:
Using Chocolatey
If you are on Windows, you can use the Chocolatey package manager by running the following command:
Using Homebrew
If you are on Mac or Linux, you can use the Homebrew package manager by running the following command:
choco install sass
5. Compiling Code
After installing SASS, no matter what the package manager chose, you can start coding and compiling your code.
You have two ways of compiling your code: manually compiling a .scss file into a .css file or listening for changes in a single file or a directory and automatically compiling code.
- If you choose to manually compile a single file named “input.scss” into a css file called “output.css”, run the following command:
- If you choose to listen and automatically compile a single file named “input.scss” into a css file called “output.css”, run the following command:
- If you listen to an entire folder named “app/sass” and compile the code into a CSS file in a folder named “public/stylesheets”, run the following command:
6. Basic SASS Commands and Features
Variables
Use variables to store values that can be reused/read in multiple places in our code.
CSS has variables too but the difference between them and SASS variables is that CSS variables, when their value changes, all elements using it will be affected while in SASS if the value of a variable changes, the earlier use will stay the same.
Nesting
Nest CSS selectors is a way that follows the same visual hierarchy of HTML. It allows developers to organize the code better making it more maintainable and readable.
In this example, we are nesting 2 different classes without repeating the “.anb-wizard-item” class name.
If Statements
The If statement works mostly like any other If statement in other languages. The expression returns True/False and we add code for the True branch and for the False branch.
In this example, we have a mixin called “avatar” that receives 2 parameters, “$size” and “$circle”, then in the code we are returning the same size to CSS properties “width” and “height” and IF the “$circle” variable is TRUE, we are also returning a “border-radius” attribute. Finally, we are calling the mixing inside the “.avatar” class.
The final result is the one that follows.
Loop Cycles
It allows you to create loops and thus avoid repeating code.
Or in a more complex example, if we need to define some properties to a set of font sizes, we can use an array with the classes we want and then cycle through the array and apply some styles.
In this example, we have an array of values called “$typography-sizes-values” and we are cycling that array in a “for each” loop and creating a class for each value of the array applying to each a CSS variable.
Partials and Modules
Another great feature that allows us to organise code is the possibility to separate code in different files called partials (identified with prefix “_”) and use them as modules in another file.
All variables, mixins and functions in a module can be used when a module is loaded in another file without the need to redefine them.
In this example, we have a “_base.scss” file (partial) that we are including inside another file called “styles.scss”. By doing that, we can reuse the variable “$white-color” in the “styles.scss”.
Mixins
A mixin is a group of CSS declarations that can be reused throughout our code.
They behave like functions and thus they can even receive arguments to make them more flexible.
A mixing is a great way to avoid repeating code and to keep code cleaner.
In the above scenario, we have a mixing function called “theme” that receives a parameter “$theme” and we are calling it later on the code in the class “.alert”. We could use the parameter in an IF statement to apply a slightly different style depending on the value of the input parameter.
7. Conclusion
CSS is fun and is increasingly allowing us to do amazing things using less native Javascript or external JS libraries. Still, it is not a significantly evolved language in terms of syntax, reusability, or maintainability.
This is where preprocessors come in handy. It’s quite easy to learn the base syntax of any CSS preprocessor language and the gains we could extract from learning it are huge.
Projects are getting bigger and more complex to manage the UI and having a tool capable of organizing code by keeping it clean and reusable is a mandatory requirement.
.png){kind=small}
.png){kind=small}
