Sass #

Source file extensions: .(scss|sass)

.(scss|sass) files are processed with Sass.

foo.scss will generate a foo.css file in output.

Import in Javascript/Typescript #

.scss are imported like .css.

See css for more details

@import in Sass #

Import from the current component:

style.scss

/* will resolve ./_foo.scss or ./foo.scss */
@import 'foo';
/* ... */

Import from npm:

style.scss

@import '~bootstrap/scss/bootstrap.scss';
/* ... */

Import from http:

style.scss

@import 'http://some.url/style.scss';
/* ... */

Import from another component in the design system:

style.scss

@import '~/component-b/bar.style';
/* ... */

References #

• Sass-lang

Quick example #

style.scss

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

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