A to Z Sass in 30 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
// Example SUIT-css style component
.MyComponent {
&.is-animating {}
&--modifier {}
&-part {}
&-anotherPart {}
}
// Example link states
a {
color: gray;
&:hover,
&:active {
color: black;
}
}
// Example 'reverse' parent selector
.btn {
background: #666;
color: #fff;
.theme-dark & {
background: #333;
}
.theme-light & {
background: #ccc;
color: #333;
}
}
// Sibling selectors
.button {
& + & {
// styles for .button + .button
margin-left: 1em;
}
}
- 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 itemli:first-child
and padding from the right for the last itemli: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
.block {}
.block__element {}
.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
// function( $color, $amount )
lighten($color, 10%)
darken($color, 10%)
saturate($color, 10%)
desaturate($color, 10%)
invert($color)
grayscale($color)
complement($color) // opposite color on color wheel
transparentize($color, 0.5)
opacify($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
lighten( saturate(), 10% )
transparentize( 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
// This is a Sass only comment
/*
This is a (public) CSS comment
*/