Using the Sass Command (with examples)

1: Convert a SCSS or Sass file to CSS and print out the result

sass inputfile.scss|inputfile.sass

Motivation: This use case is useful for quickly converting a SCSS or Sass file to CSS and seeing the result in the terminal without saving it to a file. It can be helpful for testing and debugging purposes.

Explanation:

• sass: The command to invoke the Dart Sass compiler.
• inputfile.scss|inputfile.sass: The path to the SCSS or Sass file that you want to convert. This can be either a .scss or .sass file extension.
  • inputfile.scss: The name of the input SCSS file.
  • inputfile.sass: The name of the input Sass file.

Example output:

body {
  color: #333;
}

2: Convert a SCSS or Sass file to CSS and save the result to a file

sass inputfile.scss|inputfile.sass outputfile.css

Motivation: This use case is useful when you want to convert a SCSS or Sass file to CSS and save the result to a file. It allows for easier usage of the generated CSS in web development projects.

Explanation:

• sass: The command to invoke the Dart Sass compiler.
• inputfile.scss|inputfile.sass: The path to the SCSS or Sass file that you want to convert. This can be either a .scss or .sass file extension.
  • inputfile.scss: The name of the input SCSS file.
  • inputfile.sass: The name of the input Sass file.
• outputfile.css: The path to the output CSS file that you want to create or update.

Example output: The contents of the outputfile.css will be the converted CSS from the input SCSS or Sass file.

3: Watch a SCSS or Sass file for changes and output or update the CSS file with the same filename

sass --watch inputfile.scss|inputfile.sass

Motivation: This use case is useful when you are actively working on a SCSS or Sass file and want to automatically convert it to CSS whenever changes are made. It allows for a more efficient workflow in development.

Explanation:

• sass: The command to invoke the Dart Sass compiler.
• --watch: The option to enable the watch mode, which continuously monitors the input SCSS or Sass file for changes.
• inputfile.scss|inputfile.sass: The path to the SCSS or Sass file that you want to watch. This can be either a .scss or .sass file extension.
  • inputfile.scss: The name of the input SCSS file.
  • inputfile.sass: The name of the input Sass file.

Example output: Whenever changes are made to the input SCSS or Sass file, the compiler will automatically convert it to CSS and output the result in the terminal.

4: Watch a SCSS or Sass file for changes and output or update the CSS file with the given filename

sass --watch inputfile.scss|inputfile.sass:outputfile.css

Motivation: This use case is useful when you want to watch a SCSS or Sass file for changes and automatically convert it to CSS, but also specify a custom filename for the output CSS file. It provides flexibility in naming the generated CSS file.

Explanation:

• sass: The command to invoke the Dart Sass compiler.
• --watch: The option to enable the watch mode, which continuously monitors the input SCSS or Sass file for changes.
• inputfile.scss|inputfile.sass: The path to the SCSS or Sass file that you want to watch. This can be either a .scss or .sass file extension.
  • inputfile.scss: The name of the input SCSS file.
  • inputfile.sass: The name of the input Sass file.
• outputfile.css: The path to the output CSS file that you want to create or update.

Example output: Whenever changes are made to the input SCSS or Sass file, the compiler will automatically convert it to CSS and save the result as outputfile.css.