When used effectively, Sass helps build scalable CSS and DRY. However, when used incorrectly, using Sass can increase file size and add unnecessary or duplicate code.
Here are a bunch of suggestions and tips to help you make the most of Sass.
Sass directory structure
Local files are created using underscores and cannot be exported as separate CSS files. Each section should be imported using the main Sass file (global.scss) in the root of the Sass folder.
For example, here is a sample folder structure:
1 2 3 4 5 6 7 8 9 10 | base/ | |-- _variables.scss |-- _mixins.scss components/ layouts/ pages/ |-- _index.scss global.scss |
This directory structure makes it easy to find and add. For example, new modules can easily be added to the modules directory and then added to global.scss using @import .
Use Sass variables more effectively
Variables are one of the simple features of Sass but are still sometimes used incorrectly. Creating naming conventions throughout the page is essential when working with Variables. Without rules, they would be difficult to understand and reuse.
Here are some tips for creating useful variables:
- Do not arbitrarily name variables
- Follow the naming convention (Modules, BEM, etc.)
- Ensure proper use of variables. Here are some examples:
1 2 3 4 5 6 7 8 9 10 11 | // ====================================================== // Base :: Colors // ====================================================== $black: #000; $blackLight: #333; $colorPrimary: #f77e62; $colorSecondary: #d9583a; $colorThird: #f4f4f2; |
Use functions to calculate
Functions used to perform calculations. The Sass function does not output any CSS. Instead, it returns a value that can be used in CSS. This is useful for calculations that will be performed throughout the site.
For example, functions are useful for calculating the percentage width of a given element:
1 2 3 4 5 6 7 8 9 10 11 12 | @function calculate-width ($col-span) { @return 100% / $col-span } .span-two { width: calculate-width(2); // spans 2 columns, width = 50% } .span-three { width: calculate-width(3); // spans 3 columns, width = 33.3% } |
Limit multi-level cages
Overuse of nested rules in Sass can cause problems, from complex code to over-specificity and over-reliance on the HTML structure of a page. These can cause subsequent problems and potentially increase the need to include! Important, often avoided.
Here are some golden rules for nesting:
- Do not go deeper than 3 levels.
- Ensure clean and reusable CSS output.
- Use nested when it makes sense, not a default option.
Arrange your work order
Put all mixins, functions, extend and variables in their local related file. Keeping the code blocks together will ensure they are easy to edit and reuse in the future.
Elements throughout the site should be kept together in a base directory. The base directory should contain global variables such as fonts and palettes:
$ font-primary: ‘Roboto’, sans-serif; $ font-secondary: Arial, Helvetica, sans-serif;
or
$ color-primary: $ orange; $ color-secondary: $ blue;
The specific mixins, functions and variables of a module must be stored in the local file of that module: $ tab-radius: 5px; $ tab-color: $ gray;
Use mixin with parameters instead of extend
Using extend can be a problem as it will cause your selectors to override styles by automatically compiled SASS selectors, which will significantly increase the size of your .css file.
Keep things simple
Finally, keep things as simple as possible. Sass’s purpose is to write more manageable CSS. Before creating any new mixins, variables, or functions, make sure they are easy to grow and don’t do too many tasks. All of Sass’s features are useful when used in precise and moderate situations.