Four flexible styles of compilation and output of SCSS

Time:2020-2-22

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
  • Expanded output mode
  • Compact output mode compact
  • Compressed output mode

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

1、nested

Nested is the nested output style, where the left curly bracket is aligned with the CSS class name (first line). The curly bracket on the right is aligned with the last line and does not wrap.

This style is generally used less, because the normal way to write CSS is not many people, the style is more awkward.

The compile command is:


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

Generate results:


.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 a way to expand the output, and it is also a common style for front-end developers to write CSS directly. The left curly bracket is in line with the first line and does not wrap. The curly braces on the right wrap at the end and start a new line.

The compile command is:


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

Generate results:


.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 mode, which is also another way to write CSS directly in front-end development. The left and right curly braces do not wrap. CSS property values in curly braces do not wrap, one after the other.

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

The compile command is:


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

Generate results:


.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 of its contents are not wrapped, and all comments and spaces are removed. Press all the code together.

Generally, it is used when it is online or when it is not necessary to read and modify CSS files at all. The file will be smaller.

The compile command is:


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

Generate results:


.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 whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.

Recommended Today

[Redis5 source code learning] analysis of the randomkey part of redis command

baiyan Command syntax Command meaning: randomly return a key from the currently selected databaseCommand format: RANDOMKEY Command actual combat: 127.0.0.1:6379> keys * 1) “kkk” 2) “key1” 127.0.0.1:6379> randomkey “key1” 127.0.0.1:6379> randomkey “kkk” Return value: random key; nil if database is empty Source code analysis Main process The processing function corresponding to the keys command is […]