用7個站點立足Sass樣式開發

https://sass-lang.com/guide

sass官方英文文檔進入學習模塊：
首先安裝sass，如果是node開發環境，npm不多說

npm install -g sass

安裝成功後

第一站：監聽

• 建立一個index.scss在index目錄下
  語法解析：

sass --watch input.scss output.css

效果：

生成的css即爲監聽出的css文件，map爲對原代碼進行定位的文件

watching for changes可以進行實時監聽，保存scss後，會自動進行css的輸出

通過目錄方式監聽：

sass --watch app/sass:public/stylesheets

例子如下：
目錄結構：

此方法即可滿足監聽多個scss文件編譯爲css文件

創建一個package.json

npm init -y

生成默認的package.json

{
  "name": "sass",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

可以將剛剛的腳本方法存放在start中：

這裏遇到一個問題，即使用其他的名稱會報錯，必須使用：

where <command> is one of:
    access, adduser, audit, bin, bugs, c, cache, ci, cit,
    clean-install, clean-install-test, completion, config,
    create, ddp, dedupe, deprecate, dist-tag, docs, doctor,
    edit, explore, get, help, help-search, hook, i, init,
    install, install-ci-test, install-test, it, link, list, ln,
    login, logout, ls, org, outdated, owner, pack, ping, prefix,
    profile, prune, publish, rb, rebuild, repo, restart, root,
    run, run-script, s, se, search, set, shrinkwrap, star,
    stars, start, stop, t, team, test, token, tst, un,
    uninstall, unpublish, unstar, up, update, v, version, view,
    whoami

第二站：嵌套

scss的嵌套：

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

  li { display: inline-block; }

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

↓轉化爲css

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

&也可以代表嵌套外層

xxx &形式
則內嵌套外

第三站：自定義變量

自定義primary-color

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

↓轉化爲css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

第四站：部分文件

您可以創建部分Sass文件，其中包含一些CSS片段 ，您可以將其包含在其他Sass文件中。這是模塊化CSS並幫助使事情易於維護的好方法。部分文件是一個Sass文件，名稱前帶有一個下劃線。您可以將其命名爲_partial.scss。下劃線讓Sass知道該文件只是部分文件，不應將其生成爲CSS文件。

Sass partials are used with the @use rule.
例如：@use ‘base’;

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

↓轉化爲css

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

sass中劃線和下劃線不敏感

第五站：mixin函數

mixin函數通過include引用：

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

↓轉化爲css

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

第六站：繼承extend

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

繼承可以很方便的做一個模板樣式，然後比如其他警告，通過，錯誤的按鈕都可以套用框架換一個顏色即可。

第七站 操作符

操作符不用多說了，就是操作就完事了，自動計算。

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

↓轉化爲css

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complementary"] {
  float: right;
  width: 31.25%;
}