Thank you for your feedback.
Form temporarily unavailable. Please try again or contact docfeedback@servicenow.com to submit your comments.
Versions
  • London
  • Kingston
  • Jakarta
  • Istanbul
  • Helsinki
  • Geneva
  • Store
Close

SCSS nesting

SCSS lets you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
The ul, li, and a selectors are nested inside the nav selector, which is a great way to organize your CSS and make it more readable. When the widget is rendered, the generated CSS looks something like the following code block:
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

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

For more information on Sass, see the Sass/SCSS reference.