This is the 9th day of my participation in Gwen Challenge

preface

Yesterday, I talked about a simple introduction of less, the link is here, today, strike while the iron is hot, continue to write SCSS together, convenient contrast, consolidate the impression.

introduce

SCSS, like LESS, is also a CSS preprocessing language. SCSS files are compiled into CSS files through the preprocessor, providing functions, variables, inheritance, nesting and other methods. However, compared with LESS, the usage is more powerful, more flexible, and the learning cost is more difficult than less.

The installation

  1. Global installation

        npm install -g sass  // You can also install YARN Global Add sass using YARN
Copy the code

    You can then use the Sass command to manipulate the SCSS file from the command line

      sass index.scss:index.css // compile index.scss to index.css
  sass --watch index.scss:index.css // Listen to the compilation in real time
  sass --watch index.scss:index.css --style=compressed --no-source-map  // Listen to compilation in real time, and compress, without generating source-map files
Copy the code

    There are other instructions, and you can look at this picture

  2. It can be used in conjunction with Webpack

    npm install webpack-cli webpack  sass-loader sass css-loader style-loader -D   // YARN installation also works
Copy the code

    Note that Webpack and versions of Sass and Node may have incompatibilities

        // This is the version I installed, if there are compatibility issues can refer to this
    "css-loader": "^ 5.2.6." "."sass": "^ 1.34.1"."sass-loader": "8.0.2"."style-loader": "^ 2.0.0." "."webpack": "^ 5.38.1"."webpack-cli": "^ 4.7.2." "
Copy the code

    Then add rules to the module of webpack.config.js

    module.exports = () = > {
    / /... Other configurations are omitted
    module: {
      rules: [{test: /\.s[ac]ss$/i,
          use: [
            MiniCssExtractPlugin.loader,
            // Convert CSS to CommonJS modules
            "css-loader".// Compile Sass to CSS
            "sass-loader"}]}}Copy the code

    Finally, run wepback packaging or compilation

grammar

variable

SCSS also supports variables, which can be used to define repeatedly used attribute values so that they can be easily changed without having to write the values repeatedly. Unlike less, which starts with $, less with @. If you want to use this variable in the attribute name, you need #{}, less with @{}.

$width: 50px;
$left: left;
div {
 width: $width;
 color: red;
 margin- # {$left} :20px;
}
/ / the compiled
div {
  width: 50px;
  color: red;
  margin-left: 20px;
}

Copy the code

To calculate

SCSS, like LESS, can use arithmetic operators on attribute values, including addition, subtraction, and multiplication.

$baseWidth: 10px;
.div1 {
  width: $baseWidth * 2; 
  height: 50px + 50px;
  margin-left: 50px - 10px;
}
.div2 {
  width: $baseWidth * 3; 
}

/ / the compiled
.div1 {
  width: 20px;
  height: 100px;
  margin-left: 40px;
}

.div2 {
  width: 30px;
}
Copy the code

nested

SCSS also supports nesting like less. There is no need to write a parent element that repeats a large section in front of it. It is readable and similar to HTML structure

div {
  .header {
    color: blue;
  }
  .content {
    color: blue;
    .item {
      color: blue;
      &:hover {
        color: red; }}}}/ / the compiled
div .header {
  color: blue;
}
div .content {
  color: blue;
}
div .content .item {
  color: blue;
}
// Hover generated here is an item
div .content .item:hover {
  color: red;
}
Copy the code

hybrid

If you have a large section of CSS code that needs to be reused, you can declare it as mixin. In other places you can simply use the keyword @mixin, and use @include when using it

/ / define
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
}
// Define parameters with a default value of 1px
@mixin borderStyle($width: 1px) {
   border: $width solid red;
}
div {
  @include center;  
  @include borderStyle(2px);  / / the refs
}

/ / the compiled
div {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: normal;
  border: 2px solid red;
}
Copy the code

inheritance

SCSS allows one CSS selector to inherit styles from another CSS selector with the keyword @extend

.div1 {
  width: 50px;
  color: red;
}
.div2 {
  @extend .div1;
  background:blue;
}


/ / the compiled
//.div2 inherits the style of.div1
.div1..div2 {
  width: 50px;
  color: red;
}
.div2 {
  background: blue;
}
Copy the code

The introduction of

You can import SCSS files or CSS files through @import

@import 'index.scss';
Copy the code

function

Sass can write its own custom functions, defined by @function and returned by @return, which less does not have. Less only supports built-in functions

/ / define
@function px2rem($px.$base-font-size: 75px) {
  @return ($px / $base-font-size) * 1rem;
}
/ / use
div {
  width: px2rem(50px);
}

/ / the compiled
div {
  width: 0.6666666667 rem;
}
Copy the code

cycle

While less can only use when to implement loops, SCSS can use for, while, each, etc

/ / a for loop
// @for $I (loop variable I, starting with $) from start value to end value Note that traversal does not contain end value
@for $i from 1 to 3 {
  .div-# {$i} {
    width: 10px * $i; }}/ / the compiled
.div-1 {
  width: 10px;
}

.div-2 {
  width: 20px;
}
Copy the code
/ / while loop
$i: 1;
@while $i < 3 {
  .div-# {$i} {
    width: 10px * $i;
  }
  $i: $i + 1;  // Note that $I is incremented by 1
}

/ / the compiled
.div-1 {
  width: 10px;
}

.div-2 {
  width: 20px;
}
Copy the code
// each loop uses one
@each $color in blue,green, red {
  div {
   color: $color; }}/ / the compiled
div {
  color: blue;
}

div {
  color: green;
}

div {
  color: red;
}

// The object form uses two
@each $i.$color in (1:blue,2:green, 3:red) {
  .div-# {$i} {
   color: $color; }}/ / the compiled
.div-1 {
  color: blue;
}

.div-2 {
  color: green;
}

.div-3 {
  color: red;
}
Copy the code

conditional

You can use conditional judgment, so the keywords are @if, @else if and @else

div {
  @if true {
    color: red;
  }
  @else {
    color: blue; }}/ / the compiled
div {
  color: red;
}
Copy the code

conclusion

Above is my summary of SCSS simple introduction, I hope to help you. Thank you ~