Learn SCSS (Sass) Part 2

Extend/Inheritance

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


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


.message
@extend %message-shared


.success
@extend %message-shared
border-color: green


.error
@extend %message-shared
border-color: red


.warning
@extend %message-shared
border-color: yellow

Operators

.container {
width: 100%;
}

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

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

Conclusion

--

--

--

Software Developer — Game Creator — Let’s work together! Reach out on LinkedIn or Twitter @thedrewprint

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Top 10 Popular PHP Framework in 2019

Map Editor of 2D games- Game Dev Series 98

2-Tier and 3-Tier Database Architecture

Overview of .NET Core

How Java works

Creating A Modular Powerup System

Ruby’s include and prepend

Continuous Infrastructure (CI) Pipeline Using Terraform

Basic Steps involved in the DevOps Process

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
Andrew Richards

Andrew Richards

Software Developer — Game Creator — Let’s work together! Reach out on LinkedIn or Twitter @thedrewprint

More from Medium

Express vs. Hapi vs. Koa: Which is the better backend framework?

Observational Blog #3: Observations and Reflections at Musée de l’Homme

Understanding Recursion With Examples