HomeToolsAbout a20k

SCSS

What is it

Stylesheet lang that is compiled to CSS.

  • Allows use of variables, nested rules, mixins, functions, and etc.

SCSS vs SASS

Difference

  • SCSS (Sassy CSS)
  • SASS (Syntactically Awesome Stylesheets)

Primary difference between the two are in the syntax.

Same thing under the hood

SCSS is just a different syntax for using SASS

SCSS is often referred to as the "Sass 3" syntax because it was introduced with Sass version 3

SCSS is now a more widely used syntax

Variables

You can assign a value to a name that beging with $, and then you can refer to that name instead of the value itself.

$var: value

This is useful because you can reduce repetition, complex math, configure libraries, and etc. with variables.

Example

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

Selector

& (Parent Selector)

Used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways

SCSS

.alert {
  // The parent selector can be used to add pseudo-classes to the outer
  // selector.
  &:hover {
    font-weight: bold;
  }

  // It can also be used to style the outer selector in a certain context, such
  // as a body set to use a right-to-left language.
  [dir=rtl] & {
    margin-left: 0;
    margin-right: 10px;
  }

  // You can even use it as an argument to pseudo-class selectors.
  :not(&) {
    opacity: 0.8;
  }
}

CSS

.alert:hover {
  font-weight: bold;
}
[dir=rtl] .alert {
  margin-left: 0;
  margin-right: 10px;
}
:not(.alert) {
  opacity: 0.8;
}

[] (Attribute Selector)

Part of CSS.

[att]

Match when the element sets the att attribute, whatever the value of the attribute

For example, the following attribute selector matches all H1 elements that specify the "title" attribute, whatever its value:

h1[title] { color: blue; }

[att=val]

Match when the element's att attribute value is exactly val

In the following example, the selector matches all SPAN elements whose "class" attribute has exactly the value "example":

span[class=example] { color: blue; }

Nesting

Sass will automatically combine the outer rule’s selector with the inner rule’s

Basic Example

HTML

<nav>
  <ul>
    <li>
      list item 1
    </li>
    <div>
      <li>
        list item 2
      </li>
    </div>
  </ul>
</nav>

SCSS

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

  li { display: inline-block; }
}

CSS Equivalent (to SCSS)

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

In above example, regardless of their level of nesting, nav li will be applied to all li elements within the nav element

Nesting Rule

Descendent Combinator

Below example selects all ul elements that are nested within a nav

nav ul { ... }

Collision handling

If there is a collision between styles applied to the same element through both ancestor and descendant selectors, the more specific selector will take precedence

// Less specific
nav {
  background-color: #333;
}

// More specific
header nav {
  background-color: #555;
}

Combinators

+ (Next Sibling Combinator)

The next-sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

> (Child combinator)

The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.

/* li (list items) that are children of the "my-things" list */
ul.my-things > li {
  margin: 2em;
}

Example: > * + *

Targets any element that is a direct child (>) of its parent, and that is immediately preceded (+) by another element

Breakdown

  • > Direct child combinator. It selects only the element that is a direct child of the specified element.
  • * Universal selector. It matches any element.
  • + Adjacent sibling combinator. It selects the element that is immediately preceded by the specified element.
  • > * + * is saying "select any element that is a direct child of its parent and is immediately preceded by another element"

HTML

<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <span>Span 1</span>
  <p>Paragraph 3</p>
</div>

Applied to above HTML

> * + * would select the <p> element with the text "Paragraph 3" because it is a direct child of its parent (<div>) and is immediately preceded by another element (<span>).

Advanced

Selector List

Each complex selector (the ones between the commas) is nested separately, and then they’re combined back into a selector list.

SCSS

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

CSS (Equivalent to SCSS)

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}
© VincentVanKoh