1. What is Sass

Sass is a pre-processing language based on CSS. It abstracts and simplifies the code on the basis of CSS, and achieves more function extensions, such as defining variables, nesting, condition judgment, etc. The main purpose is to reduce the repeatability and redundancy of CSS code, and make maintenance more convenient and more readable.

Sass has two syntax types: Scss and Sass. Sass is the old syntax, also known as indentation syntax, it doesn’t use braces and semicolons, it uses indentation, it uses the extension.sass

h1
  color:#000
  background:#fff
Copy the code

The latest syntax is Scss, enhanced support for CSS3 syntax, can be fully compatible with CSS3, the extension name is. Scss

Here are some of the Scss syntax commonly used in programming.

2. The variable

// Global variables
// Can be placed in a separate file
$main-set-ff: Arial;
.box: {
  font-family:$main-set-ff
 };
// Local variables
.box {
  $width: 666px;
  width: $width;
}
Copy the code

3. Import files

// Use SCSS's @import rule without specifying the full name of the file being imported.
// You can omit the.sass or.scss file suffix
@import 'varibles'
Copy the code

Note: @import in SCSS is not the same thing as @import in CSS.

The @import rule of CSS allows you to import other CSS files from one CSS file. However, only when @import is executed will the browser download its CSS file, blocking rendering and hurting performance.

The @import rule of SCSS imports related CSS files as soon as they are generated, and all related styles are summarized into the same CSS file without making additional download requests.

In addition, the @import of Scss can be placed anywhere in the stylesheet, whereas the @import of CSS can only be placed at the top of the code

4. Nesting

It is best not to have more than four layers of nesting, otherwise performance will be affected

// Selector nesting
.main-set{
  font-size:12px;
  .head-line{
    color:# 333; }}// Attribute nesting
 .head-line{
   font:{
     family:Arial;
     size:16px; }}// Pseudo-class nesting (&)
 .head-title{
   color:# 333;
   &:hover{
    background-color:#eee; }}Copy the code

5. @ the extend inheritance

.error {
  color:#f00;
 }
.serious-error {
  @extend .color;
  border:1px solid #f00;
 }
 // Compile to CSS as follows,serious-error also has the error style
 .error..serious-error {
   color:#f00;
 }
 .serious-error{
   border:1px solid #f00
  }
Copy the code

Placeholder inheritance: Not intended for use by an element, only by @extend. By adding %, placeholder inherited selectors do not appear in compiled CSS

%div0{
  width:100px;
 }
.div1{
  @extend %div0;
 }
 / / the compiled
 .div1{
   width:100px;
 } 
Copy the code

Note: @extend cannot inherit a selector sequence

6. Mixed @ mixins

@mixin col-6{
  width:50%;
  float:left
 }
.demo-sec{
  @include col-6()} // Can also take arguments, specifying default values@mixin col($width:50%.$color:#f00) {width:$width;
   color:$color;
 }
 .demo{
   @include col(40%.# 333);
 }
Copy the code

7.@debug, @warm, @error

Used for debugging, when the compilation error output you set the prompt message

8.@media

@media in SASS can be embedded in CSS rules, and when CSS is generated, @media is raised to the highest level of style

@mixin col-sm($width:50%) {@media (min-width:768px) {width:$width;
    float:left; }}.webdemo-sec{
  @includeCol-sm ()} // Compile to CSS@media (min-width:768px) {.webdemo-sec{
    width:50%;
    float:left; }}Copy the code

9.@at-root

Browsers parse CSS selectors from right to left, and nested layers make style rendering inefficient. Using the @at-root directive, you can make nested content jump out of the root element. This not only ensures the nesting structure, looks clean, but also improves rendering performance.

.main-set{
  font-size:12px;
  @at-root{
   .main-set-headline{
     color:#f00; }}/ / the compiled
.main-set{
  font-size:12px;
}
.main-set-headline{
  color:#f00;
}
Copy the code

@if @else

@mixin col-sm($width:50%) {@if type-of($width)! ==number{@error "$width must be a numeric type! #{$width}";
  }
  
  @if not unitless($width) {/ / not take back
   / / a unit
    @if unit($width)! = ="%" {
      @error "$width should be a hundred points! #{$width}"; }}@else {
    / / no units
    @warn "$width should be a hundred points! #{$width}"
    $width:(percentage($width/100))}}Copy the code

11. Basic operations (addition, subtraction, multiplication and division)

Addition and subtraction

Values can have units, but the units must be the same. If they are different, an error will be reported and the compilation fails

$sidebar-width:220px;
$content-width:720px;
.container {
  width: ($sidebar-width + $content-width)
  margin: 0 auto;
}
// The compiled CSS code is:
.container {
   width:940px;
   margin:0 auto;
}
Copy the code

Note: When subtracting “variable” instead of “value”, make sure there is a space before and after the minus sign “-“.

2. The multiplication

When you multiply, you can have only one number with a unit and only one number without a unit. If both are numbers with units, Sass will report an error and the compilation will fail.

3. The division

The slash (/) is already used as a symbol in the CSS, for example, font:Arial 12px/1.5em. Therefore, if we use “/” as the division sign in Sass, it will not work, so we need to add a “()” outside the division. Such as width ($width / 2)

If you use “variable” instead of “number” in the division operation, the “/” is automatically recognized as the division, no parentheses need to be added.

Note: In real development, it is recommended to add and subtract, or multiply and divide. This way of writing can make the code at a glance, but also easy to maintain.

11. The annotation

// Single-line comments: do not display after compilation
/* Multi-line comments: compiled to display, compressed does not display */
/ *! Mandatory comments: compiled to display, compressed also display */
Copy the code

12. Set character encoding and support Chinese annotations

@charset "UTF-8";