4 flexible Scss compilation output styles

Many people have been told how to compile from the moment they use Scss. Therefore, there is basically only one command compilation method. In fact, Scss provides 4 styles of CSS output to meet the needs of more people. The different output modes are as follows:

• Nested output mode nested
• Expanded output mode
• Compact output mode
• Compressed output mode compressed

Then, you can use parameters at will to generate your favorite CSS style.

1. nested

nested is a nested output style, that is, the left curly brace and the CSS class name (the first line) are aligned. The right curly brace is aligned with the last line, without wrapping.

This style is generally used less frequently because not many people normally write CSS in this way and the style is rather awkward.

The compilation command is:

sass abc.scss:abc.css --style nested

Generates the following result:

.header {
  background: #f00;
  color: #000;
  font-size: 20px; }
.sidebar {
  float: left;
  width: 300px;
  height: 500px; }
.main {
  float: right;
  width: 800px;
  padding: 20px;
  min-height: 500px; }

2. expanded

Expanded is the expanded output mode, which is also a style commonly used by front-end developers to write CSS directly. The left curly brace is aligned with the first line and does not wrap. The right curly brace ends on a new line.

The compilation command is:

sass abc.scss:abc.css --style expanded

Generates the following result:

.header {
  background: #f00;
  color: #000;
  font-size: 20px;
}
.sidebar {
  float: left;
  width: 300px;
  height: 500px;
}
.main {
  float: right;
  width: 800px;
  padding: 20px;
  min-height: 500px;
}

3.compact

Compact is a compact output method, and is another method that is often used by front-end developers to write CSS directly. The left and right curly braces do not wrap. The CSS property values ​​within the curly braces are not wrapped and are written one after another.

It is very friendly to friends who prefer to write single-line CSS.

The compilation command is:

sass abc.scss:abc.css --style compact

Generates the following result:

.header { background: #f00; color: #000; font-size: 20px; }
.sidebar { float: left; width: 300px; height: 500px; }
.main { float: right; width: 800px; padding: 20px; min-height: 500px; }

4. compressed

compressed is the compressed output mode. All its contents are not wrapped, and all comments and whitespace are removed. Crush all the code into one ball.

It is usually used in online situations, or when there is no need to read or modify CSS files at all. The file will be smaller.

The compilation command is:

sass abc.scss:abc.css --style compressed

Generates the following result:

.header{background:#f00;color:#000;font-size:20px}.sidebar{float:left;width:300px;height:500px}.main{float:right;width:800px;padding:20px;min-height:500px}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.