From website

Compile sass

There are many ways to compile sASS, Such as command line compilation mode, Sublime plug-in Sass-build, compilation software Koala, front-end automation software CodeKit, Grunt to create front-end automation workflow Grunt – SASS, Gulp to create front-end automation workflow gulp-Ruby-Sass, etc.

Command line compilation;

CSS // Sass --watch input. SCSS :output. CSS // If you have a lot of sass files in the directory, you can also tell sass to listen for the whole directory:  sass --watch app/sass:public/stylesheetsCopy the code

Command-line compilation configuration options; You can run the sass -v command to view configuration options, such as layout of the CSS after compiling, generation of debug maps, and enabling debugging information. We usually use two –style –sourcemap.

Sass --watch input. SCSS :output. CSS --style compact SCSS :output. CSS --style expanded --sourcemap // Enable debugging information sass --watch Input.scss :output.css --debug-info --style specifies the layout format of the parsed CSS; There are four built-in compilation formats in SASS: expanded, Compact, and compressed. Sourcemap Enables sourcemAP debugging. When sourcemap debugging is enabled, a file with the suffix.css.map is generated.Copy the code

Live Sass compiler

VSCode extension to compile/convert SASS/SCSS files to CSS files in real time.

Usage/shortcut

  1. Watch Sass clicks from the status bar to turn on live compilation, and then Stop Watching Sass clicks from the status bar to turn on live compilation.

  2. Press F1 or CTRL + Shift +P to type Live Sass: Watch Sass to start Live compilation, or Live Sass: Stop Watching Sass to Stop Live compilation.

  3. Press F1 or CTRL + Shift +P to type Live Sass once: Compile Sass – Without Watch Mode to Compile Sass or Scss.

Characteristics of the

  • Real-time SASS and SCSS compilation.
  • Export the customizable file location of the CSS.
  • Customized exported CSS styles (expanded, Compact, compressed, nested).
  • Customizable extension (.css or.min.css).
  • Quick status bar control.
  • Exclude specific folders by setting.
  • Real-time reload (depending on the Live Server extension).
  • Automatic prefix support
  • More parameter Settings github.com/ritwickdey/…

The installation

Open the VSCode editor, then press CTRL +P and type ext install live-sass

parameter

"LiveSassCompile. Settings. Formats:" [/ / extension {" format ": "Compact ",// Expanded, compact, compressed, nested "extensionName": ".min. CSS ",// compiler suffix "savePath": Null / / compile save path}], "liveSassCompile. Settings. ExcludeList" : ["/node_modules / * * * * ", "vscode / * *"].Copy the code