scss

As a css preprocessor, scss provides variables, nesting, mixing, inheritance and other features, which can make css writing more interesting and procedural.

Common features of scss

variable

Variables can be used to store information that needs to be reused in css, such as color, font, and font size. Maintain global style uniformity.

scss writing

<!-- Storage variable table -->
$primary-color: #ddd;
$border-color: #d3d3d3;
$light-gray-color: #f3f3f3;
$gray-colir: #333;
$medium-font: 16px;
<!-- Actual use -->
body {
  font-size: $medium-font;
  color: $primary-color:
}

css effect

<!-- Actual use -->
body {
  font-size: 16px;
  color: #ddd;
}

nesting

Handle the problem of style hierarchy (over nesting is not recommended, which makes css difficult to maintain) for writing css with higher readability.
scss writing

<style lang="scss" scoped>
.nav {
  color: #ddd;
  p {
      font-size: 14px;
  }
  span {
      font-size: 12px;
  }
  a {
    text-decoration: none;
  }
}
</style>

css effect

.nav {
  color: #ddd;
}
.nav p {
  font-size: 14px;
}
.nav span {
  font-size: 12px;
}
.nav a {
  text-decoration: none;
}

import

Compared with @ import of css, the imported fragments will be merged and no new http requests will be generated.

// _public.scss
html, body, ul, ol {
  margin: 0;
  padding: 0;
}
// index.scss
@import 'public';
body {
  background-color: #f3f3f3;
}

css effect

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  background-color: #f3f3f3;
}

Mix (mixin)

Mixing can be used to deal with browser compatibility problems and avoid code replication

@mixin border-radius($radius) {
  border-radius: $radius;
  -ms-border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

css effect

<!-- The final compilation result is box have@mixin border-radius(10px) All properties in -->
.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

Inheritance (extend)

scss

// This code will not be output to the final generated CSS file because it is not inherited by any code.
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// The following code will normally output to the generated CSS file because it is inherited by its subsequent code.
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend %message-common;
  border-color: green;
}

.warning {
  @extend %message-common;
  border-color: yellow;
}

css effect

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

.success {
  border-color: green;
}

.warning {
  border-color: yellow;
}

Operators (+ | - | * | /)

For example, the simple calculation of width is replaced by percentage, which is convenient to avoid calculation during writing and modification.

scss

.container { width: 100%; }
.aside {
  float: right;
  width: 300px / 960px * 100%;
}

css effect

.container { width: 100%; }
.aside {
  float: right;
  width: 31.25%;
}

Pseudo class selector:&

SCSS uses the "&" keyword to refer to the parent selector in CSS rules. Regardless of the nesting depth of CSS rules, the keyword "&" will use the parent selector cascade to replace all its positions. It can also be connected with a custom suffix (not as a prefix). When the parent selector does not exist, SCSS will report an error.

scss usage

#main {
  color: #000;
  &-sidebar {
    border: 1px solid;
  }
  a {
    font-weight: bold;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    body.firefox & { font-weight: normal; }
  }
}

css effect

#main {
  color: #000;
}
#main-sidebar {
  border: 1px solid;
}
#main a {
  font-weight: bold;
  text-decoration: none;
}
#main a:hover {
  text-decoration: underline;
}
body.firefox a {
  font-weight: normal;
}

Nested attributes:

.demo {
  // The command space is followed by a colon:
  font: {
    size: 30px;
    weight: bold;
  }
}

css effect

.demo {
  font-size: 30px;
  font-weight: bold;
}

Advanced use

This place only pastes relevant links because it doesn't really write relevant code

Topic switching

1. Create different scss files locally and declare different variables respectively
   Similar to a multilingual implementation, different theme styles are created locally
   Elegantly realize the skin changing function of Vue project

2. Use the listening attribute of scss mixer to listen
   How to use sass to realize skin changing (theme changing) function in Vue

Realization of main body skin changing function based on vue+sass