声明混合宏

@mixin 混合宏名称[(参数)]{}

在选择器按钮中调用混合宏

button{@include 混合宏名称;}

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

在一个按钮中要调用定义好的混合宏“border-radius”，可以这样使用：

button {    @include border-radius;}

这个时候编译出来的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

样式重复，用混合宏。

混合宏@mixin 混合宏名称（参数）{}

混合宏分为带参数和不带参数混合宏。

混合宏里可写逻辑关系。

[Sass]嵌套-伪类嵌套

其实伪类嵌套和属性嵌套非常类似，只不过他需要借助`&`符号一起配合使用。我们就拿经典的“clearfix”为例吧：

.clearfix{ &:before, &:after {     content:"";     display: table;   } &:after {     clear:both;     overflow: hidden;   } }

编译出来的 CSS：

clearfix:before, .clearfix:after {   content: "";   display: table; } .clearfix:after {   clear: both;   overflow: hidden; }

避免选择器嵌套：

• 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。

• 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。

[Sass]嵌套-属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：

.box {     border-top: 1px solid red;     border-bottom: 1px solid green; }

在 Sass 中我们可以这样写：

.box {   border: {    top: 1px solid red;    bottom: 1px solid green;   } }

• 选择器嵌套

• 属性嵌套

• 伪类嵌套

1、选择器嵌套

假设我们有一段这样的结构：

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：

nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中，就可以使用选择器的嵌套来实现：

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

全局变量的影子

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

//SCSS
$color: orange !default;//定义全局变量.block {
  color: $color;//调用全局变量
}
em {  $color: red;//定义局部变量（全局变量 $color 的影子）
  a {
    color: $color;//调用局部变量
  }
}

什么时候声明变量？

只有满足所有下述标准时方可创建新变量：

1. 该值至少重复出现了两次；

2. 该值至少可能会被更新一次；

3. 该值所有的表现都与变量有关（非巧合）。

便利在线编辑器网址:

http://sassmeister.com/

混合宏，编译后不会改变格式，代码冗余，但是可以传参数

继承：调用后改变代码格式，代码精简，不可传参

占位符：调用后改变代码格式，代码精简,合并代码，不可传参，但是，不调用不会产生多余代码占位符定义的代码不会编译进去。

比如在定义了变量

$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color: #fff !default;$btn-primary-bg : $brand-primary !default;$btn-primary-border : darken($btn-primary-bg, 5%) !default;

在按钮 button 中调用，可以按下面的方式调用

.btn-primary {
   background-color: $btn-primary-bg;
   color: $btn-primary-color;
   border: 1px solid $btn-primary-border;
}

普通变量：

body{
    font-size:$fontSize;
}

默认变量：

body{
    line-height: $baseLineHeight; 
}

在默认变量之前重新声明变量以根据需求覆盖默认变量：

body{
    line-height: $baseLineHeight; 
}

默认变量的价值在进行组件化开发的时候会非常有用。

在编译的时候带上参数“ --style compressed”:

sass --watch test.scss:test.css --style compressed

压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格。也就是压缩好的 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}

在编译的时候带上参数“ --style expanded”:

sass --watch test.scss:test.css --style expanded

这个输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行，同样上面的代码，编译出来：

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

在编译的时候带上参数“ --style compact”:

sass --watch test.scss:test.css --style compact

该方式适合那些喜欢单行 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; }

在编译的时候带上参数“ --style nested”:

sass --watch test.scss:test.css --style nested

Sass 提供了一种嵌套显示 CSS 文件的方式。例如

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

//1.单文件编译：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

//2.多文件编译：

sass sass/:css/

//表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。

//3.上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令。

//4.编译 Sass 时，开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

//5.使用 sass 命令编译时，可以带很多的参数

//6.watch举例：

sass --watch sass/bootstrap.scss:css/bootstrap.css

//7.一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令终端就能监测，并重新编译出文件：

>>>Change detected to: sass/pages/_views.scss

    write css/bootstrap.css

    write css/bootstrap.css.map

1.link引用.css

2.sass是预处理工具，提前做，需要才有功效。

3.sass开发后，web页面能调用sass写好的东西，就得有sass的编译过程。

4.sass编译过程：

    4.1.命令编译

    4.2.GUI工具编译

    4.3.自动化编译