Learn SCSS (Sass) Part 2


Sass has a few ways of making it so we don’t have to repeat ourselves with our code. One of the ways of doing this is to create a placeholder that can be extended.

/* This CSS will print because %message-shared is extended. */
border: 1px solid #ccc
padding: 10px
color: #333

// This CSS won't print because %equal-heights is never extended.
display: flex
flex-wrap: wrap

@extend %message-shared

@extend %message-shared
border-color: green

@extend %message-shared
border-color: red

@extend %message-shared
border-color: yellow


Prior to Sass, you couldn’t perform any math in a CSS file. Operators in Sass change this by giving you the ability to do math with your attributes.

.container {
width: 100%;

article[role="main"] {
float: left;
width: 600px / 960px * 100%;

aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;


And that’s really it. Stay out of trouble my friends.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store