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.
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"