SCss Coding Style

本篇介紹比較偏 coding style 的東西，

如果個人比較沒差，但如果是團隊開發，那最好是產出的相同檔案當然還是盡量保持相同的 style，除了同伴在閱讀程式碼時方便，也方便 GIT 區別差異。
但就是偏偏大家用的 compiler 預設 style 都不同 ....


SCSS 可輸出四種 CSS 格式，分別是以下四種

• Nested
• Compact
• Expanded
• Compressed

以 vs code + glup-sass compiler 為例，

GIT 範例檔案 https://github.com/LeoYeh/gulp-sass.git
會有以下的區別

SCSS 內容

$padding: 10px;

nav {
  ul {
    margin: 0;
    padding: $padding;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: $padding 12px;
    text-decoration: none;
  }
}

Nasted 

nav ul {
  margin: 0;
  padding: 10px;
  list-style: none; }

nav li {
  display: inline-block; }

nav a {
  display: block;
  padding: 10px 12px;
  text-decoration: none; } 

Compact 

nav ul { margin: 0; padding: 10px; list-style: none; }

nav li { display: inline-block; }

nav a { display: block; padding: 10px 12px; text-decoration: none; }



Expanded 

nav ul {
  margin: 0;
  padding: 10px;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
}

Compressed

nav ul{margin:0;padding:10px;list-style:none}nav li{display:inline-block}nav a{display:block;padding:10px 12px;text-decoration:none}

reference:
vscode sass
https://web-design-weekly.com/2014/06/15/different-sass-output-styles/

PS: 如果不想搞一堆設定，才能SCSS轉CSS 那可以考慮一下用 prepros 一樣可以有 outputstyle 可以選。