Skip to content

Latest commit

 

History

History
288 lines (217 loc) · 5.28 KB

Sass-SCSS.md

File metadata and controls

288 lines (217 loc) · 5.28 KB
Raw
description last_modified
A short introduction to Sass and SCSS
2020-05-30 15:54:15 +0200

Sass/SCSS

Contents

Basic idea

  • "Syntactically Awesome Style Sheets"
  • Sass is a style sheet preprocessor that transpiles files in the Sass/SCSS language into regular CSS that can be understood by browsers
  • Two syntaxes available:
    • SCSS (Sassy CSS): This is an extension of the CSS syntax, meaning that every valid CSS file is also a valid SCSS file with the same meaning
    • Sass syntax (also known as indented syntax): Older syntax that uses indentation instead of brackets to indicate nesting and uses newlines instead of semicolons to separate different properties

Some features

(examples taken from the Sass website)

Variables

Example SCSS:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Resulting CSS:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Nesting

Allows you to nest your CSS selectors in a way that's similar to how your HTML elements are nested

Example SCSS:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Resulting CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Mixins

Mixin = a group of CSS declarations that you can reuse together, potentially parameterized

Helps to keep your SCSS DRY

Typical use case: vendor prefixes

Example SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

Resulting CSS:

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

Inheritance

Inheritance lets you share properties between selectors

Helps to keep both your SCSS and CSS DRY

Example SCSS:

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.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;
}

Resulting CSS:

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

In the above example, %message-shared is a placeholder class which will not be included as such into the resulting CSS

Note: inheritance and mixins are very similar, but can have different effects. See SASS and Bootstrap - mixins vs. @extend. One important difference is that inheritance also avoids duplication in the resulting CSS (see above), which is not the case when using mixins. The way inheritance avoids duplication in the resulting CSS can sometimes have confusing consequences caused by the order in which rules are loaded (example below, see alo Inheritance, the cascade and specificity).

Same example but using mixins

SCSS for same example but with mixins:

@mixin message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @include message-shared;
}

.success {
  @include message-shared;
  border-color: green;
}

.error {
  @include message-shared;
  border-color: red;
}

.warning {
  @include message-shared;
  border-color: yellow;
}

Resulting CSS:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: green;
}

.error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: red;
}

.warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
  border-color: yellow;
}

Example where inheritance can be confusing

Example element: <div class='row highlight-row'></div>

Example SCSS (at first sight, this seems to make the element red):

.red-text {
    color: red;
}

.row {
    color: green;
}

.highlight-row {
    @extend .red-text;
}

Resulting CSS (actually makes the element green):

.red-text, .highlight-row {
    color: red;
}

.row {
    color: green;
}

Resources