SCSS

SCSS and CSS

Sass helps us to write CSS in a more organised and efficient way.

Sass lets you nest CSS selectors in the same way as HTML.

Notice that in Sass, the ul, li, and a selectors are nested inside the nav selector.

While in CSS, the rules are defined one by one (not nested).

Because we can nest properties in Sass, it is cleaner and easier to read than standard CSS.

Look at an example of some Sass code for a site's navigation.

null

We use SCSS to generate our CSS Files which can then be consumed by squads to style their HTML.

CSS variables are included in the compiled CSS which provide themes for our Lit Web components.

The generated CSS also includes utility classes which can be used to create layouts and interfaces.

Structure

The directory structure that we use for our Sass files is:


                                                        
                                                        
                                                            /base
                                                        /components
                                                        /abstracts
                                                          _functions.scss
                                                          _mixins.scss
                                                          _helpers.scss
                                                          _variables.scss
                                                         /layout
                                                        
                                                        // Output
                                                        main.scss
                                                        
                                                            
  • Base - contains all of the visual styles that are not layout or are specific to a component/module/block - this includes font-face and default element styles
  • Abstracts - contains all of the non-printing styles such as functions, mixins, helpers and variables
  • Components - a file for each component/module/block. The name of the file is the same as the name of the block
  • Layout - contains styles that are used to lay blocks out on the page
  • Main.scss - This will centralise all of the other SCSS partials and be used as the source to compile the final CSS output

Code Standards

  • Classes should follow the BEM struture and guidelines
  • Classes should be written mobile first
  • Each property and its value should be separated by a space, ie. margin-top: 10px;
  • Adding a space after a comma, or a semicolon, is a general rule in all types of writing
  • Any style you apply :hover also apply  :focus so that keyboard users get the same visual cues
  • We follow the Sass communities "Inception Rule" that advises that you should not nest your SCSS more than four levels deep.
  • Nesting selectors more than three levels deep, while tempting, causes verbose and unwieldy CSS to be constructed on compile.
  • Ideally you should aim for no more than two levels of nesting which gives enough flexibility for selectors and their accompanying pseudo-states (i.e :hover).

Naming Conventions

  • Use Kebab case for CSS class names.

                                                        
                                                        
                                                            // Do This
                                                        .red-box {  border: 1px solid red;}
                                                        
                                                        // Do Not Do This
                                                        .redBox {  border: 1px solid red;}
                                                        
                                                            
  • File names should use a "-" to indicate a space e.g. "layout-grids.scss"