This is the 9th day of my participation in the August More Text Challenge

SASS

• SASS website

• The most mature, stable, and powerful professional CSS extension language in the world!

• Sass is a CSS precompilation tool

• The ability to write CSS more elegantly

• Sass writes stuff that browsers don’t know

• Convert to CSS to run in the browser

• That’s when we need a tool to do it for us

Install the SASS environment

• Previous Sass needed to rely on a Ruby environment

• Sass now relies on a Python environment

• But as our Node becomes more powerful, we can just rely on the Node environment

• We need to use NPM to install a global SASS environment

  #Install the global SASS environment
  $ npm install -g sass
  Copy the code

Compile sass

• Once you have the global SASS environment

• We are ready to compile the sass file

• Sass files have two suffixes, one is.sass and the other is.scss

• The difference between them is that there are {} and;

• The SCSS document

  h1 {
      width: 100px;
      height: 200px;
  }
  Copy the code

• The sass files

  h1
  	width: 100px
  	height: 200px
  Copy the code

• We use.scss files more often

• Let’s ignore the contents of the.scss or.sass file

• We’re going to use instructions to turn these two files into CSS files

  #Compile index.scss and output it as index.css
  $ sass index.scss index.css
  Copy the code

• So we can get a CSS file, and we can also introduce a CSS file in the page

Real-time compilation

• The way we just compiled can only compile once

• When you modify the file, you must execute the command again

• Real-time compilation is automatically translated from new files to CSS files as you modify them

• It’s also done using instructions

  #Monitor the index. SCSS file in real time, compile it automatically as soon as it changes and put it in the index. CSS file
  $ sass --watch index.scss:index.css
  Copy the code

• Then you just modify the contents of the index.scss file and the contents of the index.css file will be updated automatically

Real-time monitoring directory

• Previous real-time monitoring could only monitor one file

• But we may have to write a lot of documents

• So we’re going to have a folder that’s going to be filled with sASS files

• Compile every file in the CSS folder in real time

• It’s still done in the form of instructions

  #Real-time monitoring of the sass directory, as long as there is a change, will be real-time response in the CSS folder
  $ sass --watch sass:css
  Copy the code

• This way, whenever you modify the contents of the Sass folder, they will be displayed in the CSS folder in real time

• When you add a new file, it responds in real time

• But when you delete a file, the CSS folder will not be automatically deleted, we need to manually delete