parm530
9/8/2017 - 3:24 PM

SASS

Beginner's guide to using SASS

SASS Syntactically Awesome Stylesheets

  • Easier to write SASS than CSS
  • Compiles to CSS for browsers to interpret

Converting to SASS:

sass main.sccc main.css
  • sass command takes 2 args:
    • the input: main.scss
    • the location of where to put that output: main.css

Nesting selectors:

  • : placing selectors within the scope of another selector
  • Selectors that are nested are referred to as children
  • Selctors that contain other selectors are known as parents
.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}
// Compiles to the following CSS:
.parent {
  color: blue;
}

.parent .child {
  font-size: 12px;
}
  • You can also nest CSS PROPERTIES! using ':' before after the suffix of the property
.parent {
  font : {
    family: Roboto;
    size: 12px;
    decoration: none;
  }
}

// Which converts to the following CSS:
.parent {
  font-family: ;
  font-size: ;
  font-decoration: ;
}
  • Variables in SASS are denoted $
$trans-white = rgba(255,255,255,0.3);

Sassy Datatypes:

  • Numbers: 8.11, 12 and 10px
  • Strings of texts: "potatoe", 'tomato', span
  • Booleans: true, false
  • null: an empty value
  • Lists: can be separated by spaces or commas
1.5em Helvetica bold;
  • Maps: similar to lists but are referenced as a hash, with a key value pair
(key1: value1, key2: value2);

Using the '&' operator in nesting a pseudo-element:

.notecard {
  &:hover {
    @include transform (rotatey(-180deg));
  }
}
// Compiles into this CSS
.notecard:hover {
  transform: (rotatey(-180deg));
}