SASS: A Language With Style! - MultipleMedia
Read about our 20 years!

SASS: A Language With Style!

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:

SASS

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 MultipleMedia, we understand the particularities and apply this logic to each new project.

HOW TO GET A PERFECT SCORE OF 100 ON PAGESPEED INSIGHTS

Research

June 19, 2018

100 on PageSpeed Insights… or almost! PageSpeed ​​Insigths, offered by Google, is a tool that analyzes your site’s display speed. Nowadays, with the advent of mobile...

By: Jean-Philippe Georges, Marketing and Communication Manager

THE JOBS IN A DIGITAL AGENCY — PART 3: THE DEVELOPMENT.

Research

June 4, 2018

If you are not familiar with the different digital agency jobs or if it is sometimes difficult to identify who does what and why in a digital …

By: Joséphine Marty, Communication Coordinator

How to Optimize the SEO of a WordPress Site

Research

May 15, 2018

You wonder How to Optimize the SEO of a WordPress Site? Here's How We Optimized Our Own.   It's a practice, an art some would say, designed …

By: Jean-Philippe Georges, Marketing and Communication Manager and
Alexander Winter, Developer