Notes

A to Z Sass in 30 minutes

Edit on GitHub

CSS & Sass
3 minutes

Ampersand &

  • & means the parent selector
  • It is good for nested code and for BEM and SUIT naming methodologies for writing modular code
  • Makes the code compact and easier to read without scrolling up and down the file
1// Example SUIT-css style component
2.MyComponent {
3  &.is-animating {}
4  &--modifier {}
5  &-part {}
6  &-anotherPart {}
7}

1// Example link states
2a {
3  color: gray;
4  
5  &:hover,
6  &:active {
7    color: black;
8  }
9}

 1// Example 'reverse' parent selector
 2.btn {
 3  background: #666;
 4  color: #fff;
 5  
 6  .theme-dark & {
 7    background: #333;
 8  }
 9  
10  .theme-light & {
11    background: #ccc;
12    color: #333;
13  }
14}

1// Sibling selectors
2
3.button {
4  & + & {
5    // styles for .button + .button
6    margin-left: 1em;
7  }
8}
  • Sibling selectors are handy when you want to add styles to an element only if it is adjacent to another element. Consider a ul that contains buttons. You often end up removing padding for left for the first item li:first-child and padding from the right for the last item li:last-child. With sibling selectors, you can only add padding to one side between adjacent elements

BEM and Other naming conventions

  • BEM stands for Block, Element, Modifier
  • The naming convention follows this pattern
1.block {}
2.block__element {}
3.block--modifier {}
  • There are a few downsides with using & with BEM though. The code becomes less searchable, and parent selector isn’t always visible when you have lots of code. To make the code more searchable, you can add comments, which can then be searched for
  • Components are things like buttons, registration forms, items in a grid, pagination, social icons etc.

Color Functions

  • Each function takes a base color and then modifies it by a certain amount
 1// function( $color, $amount )
 2lighten($color, 10%)
 3darken($color, 10%)
 4saturate($color, 10%)
 5desaturate($color, 10%)
 6invert($color)
 7grayscale($color)
 8complement($color) // opposite color on color wheel
 9transparentize($color, 0.5)
10opacify($color, 0.5) // amount is in decimal numbers

  • Gradients, borders and drop shadows are good use cases

  • You can perform multiple color functions by putting them inside of one another

1lighten( saturate(), 10% )
2transparentize( desaturate(), 20% )

Comments// and /* */

  • // Comments are SCSS only, won’t compile into CSS
  • /* */ are regular old CSS comments that will compile into source
  • You can use either based on your needs. I prefer // for all comments that are supposed to be for my eyes only
1
2// This is a Sass only comment
3
4/*
5This is a (public) CSS comment
6*/
Browse all topics