Running example from: https://sass-lang.com/guide

Sass example

//Running example from: https://sass-lang.com/guide

// ========================
// Variables
// ========================
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

// ========================
// Nesting
// ========================
nav
  ul
    margin: 0
    padding: 0
    list-style: none

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none
    
// ========================
// Mixins (like a 'function')
// ========================
=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
  
.box
  +transform(rotate(30deg))
  
// ================================================
// 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%