Skip to main content

SASS and SCSS (Sassy CSS)

  • SASS -> Systematically Awesome Style Sheets
  • SCSS -> Sassy Cascading Style Sheets

Nested Properties​

  $full-width: 100%;

  .mobile-nav__items {
    width: 90%;
    height: $full-width;
    display: flex;
    flex: {
      direction: column;
      wrap: nowrap;
    }
  }

Lists & Maps​

  $border-size: 1.5px;

  // map
  $color: (green-dark: #0e4f1f, red-bright: #ff1b68);

  // List
  $border-default: $border-size solid map-get($color, green-dark);


  .button {
    background: map-get($color, red-bright);
    color: white;
    font: inherit;
    border: $border-default;
    padding: .5rem;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
  }

Built-in functions​

$dark-green: #0e4f1f;

.background {
  background: lighten($dark-green, 72%);
}

Arithmetic operations in SASS/SCSS​

$border-size: 1rem;

.maths {
  border-radius: $border-size * 3;
}

Media query in SASS/SCSS​

.container {
  display: flex;
  flex-direction: row;
  font-size: 15px;

  @media (min-width: 40rem) {
    flex-direction: column;
    font-size: 10px;
  }
}

Inheritance in SCSS/SASS​

$color: (green-dark: #0e4f1f, red-bright: #ff1b68);
$border-size: 1.5px;

.sass-section {
  font-family: 'Montserrat', sans-serif;
  border: $border-size solid map-get($color, green-dark);
  width: 50px;
}

.box1 {
  @extend .sass-section;
  height: 60px;
}

.box2 {
  @extend .sass-section;
  height: 70px;
}

Mixins​

$dark-green: #0e4f1f;

// mixin without arguments
@mixin display-flex() {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.container {
  @include display-flex();
  flex-direction: column;
}
$dark-green: #0e4f1f;

// mixin with arguments
@mixin media-min-width($width) {
  @media (min-width: $width) {
    border: 2px solid green;
    @content;
  }
}

body {
  background: $dark-green;
  font-size: 15px;

  @include media-min-width(40rem) {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
  }
}
  1. CSS @import Rule
  2. Using SASS partials
  3. Sass @import and Partials