16.2    From Sass/SCSS to CSS

Of course, for styling purposes, the web browser can’t do anything with the SCSS file shown on the left in Table 16.2. A file with the SCSS syntax has the extension *.scss (for the Sass syntax, it’s *.sass). For this purpose, the CSS preprocessor must first convert (compile) the SCSS file into a CSS file, which you then also use for the web browser. On the right-hand side in Table 16.2, you can see the result of the SCSS file after the CSS preprocessor run as a CSS file.

SCSS File (style.scss)

CSS File (style.css)

$but-size: 100%;
$color1: #fcfcfc;

.button-form {
  width: 100%;

$color2: #fafafa;
$spacing-p: 1em;
$spacing-m: 0.5em;

.button-form {
  width: $but-size;
  padding: $spacing-p;
  margin: $spacing-m;
  background-color: $color1;
  &:hover {
  background-color: $color2;
  color: $color1;
  }
}

  padding: 1em;
  margin: 0.5em;
  background-color: #fcfcfc;
}

.button-form:hover {
  background-color: #fafafa;
  color: #fcfcfc;
}

Table 16.2     From an SCSS File to a CSS File after the CSS Preprocessor Run