Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

为什么学习 SASS

其实它就是 css ，只是里面有很多方法，工具提升我们的开发速度，还有就是一大串 css 看着很烦的

这遍文章是 Sass 的案例，因为我在使用 less 或 Sass 的时候，忘了很多方法，往往就只有 嵌套 和 & ，其他它们有更多的功能，帮助我们进行 css 开发。（个人觉得 CSS 是最难的，因为您如果不是设计师的话，您是写不出好的页面呢）

sasss

记得以前跟人讨论的时候，我说 scss 他说 sass，我相信大家在安装 sass(scss) 问题很多，我也遇到过，是的您得不停设置 node 版本，还有 sass，不知道你们当时环境设置了多少遍，其实装个 nvm 就好了，安装配置不能着急，一步一步慢慢来。

sass其实跟scss 是两种语法格式：

scss

@mixin button-base() {
  @include typography(button);
  @include ripple-surface;
  @include ripple-radius-bounded;

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover { cursor: pointer; }

  &:disabled {
    color: $mdc-button-disabled-ink-color;
    cursor: default;
    pointer-events: none;
  }
}

sass

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

  &:disabled
    color: $mdc-button-disabled-ink-color
    cursor: default
    pointer-events: none

安装

安装需要 ruby 环境，提起 ruby 就想起 Ruby on Rails,我也想学习这门语言 ，but

但是目前 JS 的发展 跨平台，node.js 先把单线程事件队列哪些磨合一下吧，慢慢发展，不过 Ruby 我是会选择它当我的第一个后端语言的。

sass文档

水一篇文章

• Import(引入)
• Variables(变量)
  我们可以定义一些变量，然后使用这些变量，作为属性的值。
  当我们想改变样式属性值的时候，就只需要改变变量就可以了，就避免了我们查找 css

$primary-color:#ccc;
div.box{background-color:primary-color}

• Nesting(嵌套)
  针对重复出现的样式，

.nav{
  height:100px;
}
.nav ul{
 margin:0;
}
.nav ul li{
float:left;
list-style:none;
padding:5px;
}

比如说导航栏有一部是重复出现的，scss提供了更简单的方式来实现这种选择器，使用嵌套的方式.

.nav{
  height:100px;
  ul{
  margin:0;
   li{
   float:left;
list-style:none;
padding:5px;
   }
  }
}

嵌套时调用父选择器

.nav{
  height:100px;
  ul{
  margin:0;
   li{
   float:left;
list-style:none;
padding:5px;
  &:hover{
  background-color:#ccc;
  }
   }
  }
  & &-text{
  font-size:15px
  }
  // .nav .nav-text{
  font-size:15px
  }
}

嵌套属性

.nav{
   border:1px solid #000;
   border-left:0;
   border-right:0;
}

   border:1px solid #000;
   left:0;
   right:0;
}

混合 - Mixins

@mixin alert{
  color:#a6d3d;
  background-color:#fcf8e3;
  a{
  background-color:#cad;
  color:#ccc
  }
}
.alert-waring{
 @include alert
}

混合 - Mixins(参数)

@mixin alert($text-color,$background){
  color:$text-color;
  background-color:$background;
  a{
  background-color:darken($text-color,10%);
  
  }
}
.alert-waring{
 @include alert(#8a6d3b,#fcf8e3)
}
.alert-info{
 @include alert($background:#d9edf7,$text-color:#fcf8e3)
}

• Extend（继承）

.alert{
padding:15px;
}
.alert a {
font-weight:bold
}
.alert-info{
@extend .alert;
background-color:#d9edf7;
}

@import

不知道咋演示

注释

/* 多行注释
* 会包含没有压缩之后的 css 里面 */

// 单行注释 不会