用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%;
}