Simplify Style Sheet Management
SASS is a cascade-style, compiled sheet generation language. Widely used by front-end developers for the last few years, it allows several important features.
Creating Reusable Variables
Variables and mixins, which are CSS rules that allow the creation of functions, streamline the code and optimize it by avoiding redundancy. To go further, the SASS facilitates the implementation of systems like BEM (Blocks, Elements and Modifiers) and OOCSS (Object Oriented CSS), which are good practices used for front end development.
Paired with compass, it makes it possible to obtain a large number of variables and mixins, predefined and reusable, as desired (in particular vendor-prefix).
Limiting Exceptions
Associated with good practices and organization, SASS makes it possible to limit the exceptions by quickly bringing coherence to the style of a project.
Organization and Logic
Organizing several style sheets according to a module / layout / pages logic makes it easier to manage and view exceptions. The nested code follows a real logic of cascading styles and SASS allows the concrete visualization
Code Compilation
SASS allows the compilation of .scss files into a single CSS file that will be the only one used in the site. In fact, SASS allows the creation of a large number of .scss files and allows the quick creation of a single style of file that regenerates each compilation. In addition, it is possible to make this file even lighter by coupling it with an automated system of minification, an automated system of simplification.
The Development Methodology
At the time of project construction, it is necessary to have organization of ramifications. From the outset, global elements and related exceptions must therefore be determined. Hence the interest for the design group to make a style guide. This will then be used first and foremost by the front end programmer to determine the global variables of the site. Thus, this overview of the rendering of its site ensures the rapid development of new modules thanks to easily reusable components.
The organization of .scss files is therefore crucial and must be considered from the beginning of each project according to the nature and complexity of it. For the most part, general style documents are produced that will be globally applicable. Then, we create exceptions for the specific pages, templates or modules for which we will overwrite the default style applied via the general style files.
Here is an explanatory table to navigate a little:
Global Content Style
Here for example, in a general folder, we will create .scss files:
- « main.scss » to declare variables and general styles where all styles will apply for h1 h2 p a
- « fonts.scss » to group all the fonts on the site
- « mixins.scss » where we will declare all our style rules with several variables.
Common Areas
Then, in a folder that we will name “layout”, we will be able to find the components common to all the templates. For example:
- a « menu.scss » file
- a « header.scss » file
- a « footer.scss » file
Modules That Can Be Found From One Page to Another
Then, we can create a folder “module” where we will apply a style adapted to a specific area, which may possibly be found in several places on the site. It is a “portable” module in a way:
- a « contact-form.scss » file
- a « calendrier.scss » file
Exceptions
Finally, we will create another folder “pages” where we can manage our exceptions per page, for example. Imagine that in a specific page we want to have all the H1 in red instead of blue which has been declared in the general styles in the “main” file. We will then create a specific file on this page in order to override the applied styles.
- a « contact.scss » file to manage all the exceptions of the contact page
- a « product.scss » file to handle exceptions on the product page
To go further, you can consult the official documentation of SASS
SASS is a powerful tool that cannot be used to its full potential without logical organization and a good understanding of its basic project. At GTI, formerly MultipleMedia, we understand the particularities and apply this logic to each new project.
