“This is the 29th day of my participation in the Gwen Challenge in November. See details of the event: The Last Gwen Challenge in 2021”

1. Scss

Sass (Syntactically Awesome Stylesheets) is a dynamic style language with an indent syntax that makes it easier to read with more features than CSS (variables, nesting, operations, Mixin, inheritance, color manipulation, functions, etc).

The indentation syntax of Sass is not intuitive for Web developers who are used to writing front-end CSS, and CSS code cannot be added to Sass. So the Sass syntax was modified, and Sass3 became Scss(Sassy CSS). SCSS(Sassy CSS) is an extension of the CSS syntax. This means that every valid CSS is also a valid SCSS statement, compatible with the original syntax, but with {} instead of the original indentation.

Portal: Sass Chinese

2. The variable

Sass variables use the $sign;

Sass variables can store the following information: string, number, color value, Boolean value, list, null value;

<style lang="scss">
$sysColor: red;
$sysFontSize: 20px;
$side : left;

.wrap{
  color: $sysColor;
  font-size: $sysFontSize; // If a variable needs to be embedded in a string, it must be inside #{}border-#{$side}: 1px solid pink;
}
</style>
Copy the code

scope

The scope of a variable has effects only at the current level.

The contanier2 style is its internally defined green, as shown below, and the Contanier1 label is red.

<style lang="scss">
$sysColor: red;

.contanier1{
  color: $sysColor;
}
.contanier2{ $sysColor: green; // only available in contanier2, local scopecolor: $sysColor;
}
</style>
Copy the code

! global

We can use it in Scss! The global keyword sets variables to be global.

Note: We usually define all global variables in the same file, such as _globals.scss, and then we use @include to include that file.

<style lang="scss">
$sysColor: red;

.contanier2{ $sysColor: green ! global;color: $sysColor;
}
.contanier1{
  color: $sysColor;
}
</style>
Copy the code

Computing functions

Supports addition, subtraction, multiplication, division, and rounding operations (+, -, *, /, %), and converts values between different units if necessary.

<style lang="scss">
$sysWidth: 100px;

.contanier1{
  margin: (14px / 2);
  width: $sysWidth * 2;
  height: 100px + 50px;
}
</style>
Copy the code

Division operation (/)

In CSS, the/is usually used to separate numbers, and SassScript is an extension of the CSS language that supports this function, as well as the/division function. That is, if/separates the two numbers in SassScript, it does the same in the compiled CSS file.

/ will be regarded as a division symbol if:

  • If a value or part of a value is the return value of a variable or function;
  • If the value is wrapped in parentheses;
  • If the value is part of an arithmetic expression;
p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}
Copy the code

Compiled into

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}
Copy the code

If you need to use variables, and you want to make sure that/does not do division and is compiled completely into your CSS file, just wrap the variables with #{} interpolation statements.

p{$font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
Copy the code

Compiled into

p {
  font: 12px/30px; 
}
Copy the code

3. The nested

Scss allows one set of CSS styles to be nested within another, with the inner style having its outer selector as its parent selector.

<style lang="scss">
$sysWidth: 100px;

.wrap{
  .contanier1{
    width: $sysWidth * 2;
    height: 100px + 50px;
  }
}
</style>
Copy the code

Many CSS properties have the same prefix, such as: font-family, font-size and font-weight, text-align, text-transform and text-overflow.

In Scss, they can be written using nested properties:

Note: font and border must be followed by a colon.

.contanier1{
  font: {
    size: 25px;
    weight: bold;
  }
  border: {
    width: 1px;
    style: solid;
    color: red;
  };   
}
Copy the code

Within a nested code block, you can use & to reference the parent element.

.contanier1{
  font: {
    size: 25px;
    weight: bold;
  }
  &:hover{
    color: green; }}Copy the code

4. Comment

There are two annotation styles in Scss.

Standard CSS comments/* comment */Is saved to the compiled file. Single-line comment // comment is only retained in the SCSS source file and omitted after compilation. in/* Add an exclamation mark to indicate that this is an "important note". This line of comment is retained even when compiled in compressed mode and can often be used to declare copyright information. / *! Important note! * /
Copy the code