How To Organize SASS Files
The bigger a projects gets, the more difficult it is to properly organize your huge CSS files so that they maintain a certain logic in order and distribution. You can easily get lost in this sea of code and think that ctrl + F is your best friend. Is there anyone out there to rescue me? Well, yes, the CSS preprocessors.
A CSS preprocessor is a language quite similar to CSS but with the advantage of having access to functionalities that CSS does not have. After processing, a valid CSS file will be generated and it will be linked to the HTML file as previously done. LESS, SASS and Stylus are the more familiar ones, differing in their syntax but as for what the architecture does, they work in a very similar way.
Their strong point? It is not the language but the fact that you can divide your SASS code in as many files as you may want. These separate files should be organized with a proper structure of folders to keep them easily traceable. Then, you can use the @import directive to include the source of your individual files into one master stylesheet without affecting the computing performance as it would do the @import in CSS.
SASS allows the use features that do not exist in CSS yet like variables, mixins, functions, nesting, inheritance etc.
Below are some examples:
1. Variables
They are used in a similar way to those in JavaScript, but preceded with the $ symbol and assigned with :. Variables should be defined at the beginning of the process of creating the styles and then used in all the SASS files. The advantage is that, if some value needs to be changed, you just have to do so in place.
```$colorLink: blue;```
And then it could be used like this:
```.cover__button — info {
color: $color_link;
}```
2. Nesting
One advantage of SASS is that you can reference elements to the mother’s selector with the & symbol.
```a {
color: red;
&:hover
{
color: blue;
}
.footer
& {
color: orange;
&:hover
{
color: green;
}
}
}```
Giving as a result the CSS file:
```a {color: red;}
a:hover {color: blue;}
.footer a {color: orange;}
.footer
a:hover {color: green;}```
Remember, when changing a style, the up-and-down constant travel to check and change a selector both in the first declaration of the selector and then down in all their mediaqueries? Forget it. With SASS you can include all the responsives declarations nested in the general selector. That way, keeping track of a certain element styles is much easier.
```.wrapper {
margin: 0 25px;
@media
all and (min-width:768px) {
margin: 0 40px;
}
@media
all and (min-width:1280px) {
margin: 0 auto;
max-widh: 1200px;
}
}```
Result:
```.wrapper {
margin: 0 25px;
}
@media all and
(min-width:768px) {
.wrapper
{
margin: 0 40px;
}
}
@media all and
(min-width:1280px) {
.wrapper
{
margin: 0 auto;
max-width:
1200px;
}
}```
Once it becomes clear where each part of the styles should be, the fewer the possibilities of losing parts of code. A CSS architecture is needed, both for small and large projects. Which one bests suits me? It depends on the project. Usually, people find an organizational structure for the scss folders that they like and continue to working with it, but making some specific arrangements for the current project they are working on.
Below is a proposal:
```scss
|-
main.scss
|-
core
|
|- _functions.scss
|
|- _mixins.scss
|
`- _variables.scss
|
|-
layout
|
|- _header.scss
|
|- _footer.scss
|
|- _grid.scss
|-
components
|
|- _buttons.scss
|
|- _forms.scss
|
|- _hero.scss
|
|- _newsletter.scss
|
`- _typography.scss
|
|-
pages
|
|- _about-us.scss
|
|- _contact.scss
| `- _home.scss```
Usual modifications of the proposed structure include a folder for the vendor files, frameworks, themes, abstracts or sections.
The key point for these files is the main.scss where all the other style files are to be imported. This way, you can modularize your CSS and keep things easy to maintain. The order in which the files are imported is crucial for the cascading sheets and we proposed the one shown in the folder structure going from the general to the specific.
Why will SASS only generate one CSS file? Because you would have noticed all the other files except for main. Scss are named with a leading underscore. That is called a partial and it is the way you give SASS an instruction not to generate a CSS file with it.
Writing by Laura Navarro and Gala Calero.
