Sass学习笔记

一、介绍

1. 是一款强化 CSS 的辅助工具,令 CSS 更加强大与优雅;
2. 是一个CSS预处理器,通过添加标记到样式表中，帮助我们更轻松惬意的书写CSS。

二、特点

1. 完全兼容 CSS；
2. 在CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能。

三、怎么用

1.将sass文件编译成css文件后放入项目

2.angular里可以直接使用sass

四、如何编译

方式1 node-sass

1.安装node-sass:

npm install node-sass

2.在文件目录运行node-sass sass文件 css文件

相关命令(用node-sass)：

参考node-sass 生成sourcemap/监听文件

方式2 ruby

参考：安装ruby

相关命令(用ruby)：
1.监听单个Sass文件,每次修改并保存时自动编译

sass --watch sass文件:css文件

2.监听整个Sass文件夹

sass --watch sass文件夹:css文件夹

五、Sass主要功能/语法

1.使用变量

1.声明变量(类似css属性的声明)

$color: #F90;

2.引用变量
凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用

//1
$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//2
$highlight-color: #F90;
.selected {
  border: 1px solid $highlight-color;
}

//3
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

2.嵌套CSS规则

1.普通嵌套

//css:
.content article h1 { color: #333 }
.content article p { margin-bottom: 1.4em }
.content aside { background-color: #EEE }

//sass:
.content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

2.父选择器的标识符&

//sass
a {
	color: blue;
  :hover { color: red }
}

a {
	color: blue;
  &:hover { color: red }
}

a {
	color: blue;
  div &:hover { color: red }
}

3.群组选择器的嵌套

//1
//css
.container h1, .container h2, .container h3 { margin-bottom: .8em }
//sass
.container {
  h1, h2, h3 {margin-bottom: .8em}
}
//2
//css
nav a, aside a {color: blue}
//sass
nav, aside {
  a {color: blue}
}

4.嵌套属性

//1
//css
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}
//sass
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
//2
//css
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}
//sass
nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

3.混合器

• @mixin和@include
• 实现大段样式的重用

//sass
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
//css
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

1.给混合器传参

//sass
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

//css
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

4.选择器继承

• @extend
• 一个选择器可以继承为另一个选择器定义的所有样式

//.seriousError将会继承样式表中任何位置处为.error定义的所有样式
//1
//sass
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.error a{
  color: red;
  font-weight: 100;
}
h1.error { 
  font-size: 1.2rem;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//css
.error, .seriousError {
  border: 1px solid red;
  background-color: #fdd;
}

.error a, .seriousError a {
  color: red;
  font-weight: 100;
}

h1.error, h1.seriousError {
  font-size: 1.2rem;
}

.seriousError {
  border-width: 3px;
}

5.导入SASS文件

@import规则在生成css文件时把相关文件导入进来

1.导入sass局部文件
不需要单独编译出来的文件以下滑线开头，这样就不会单独编译出来
2.嵌套导入
@import规则写在css内

//blue-theme.scss
aside {
  background: blue;
  color: white;
}
//index.scss
.blue-theme {
	@import "blue-theme"
}
//
.blue-theme {
	aside {
      background: blue;
      color: white;
    }
}

3.导入原生css

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址,比如http://www.sass.hk/css/css.css ；
• 被导入文件的名字是CSS的url()值,比如url(“http://www.sass.hk/css/css.css”)；

6.注释

1.//

编译后不显示
2./**/

编译后显示

六、.sass和.scss的区别

Sass的两种语法格式
之前以为sass就是.scss，不知道有.sass，还瞎告诉别人0.o，贴个自己以前的不靠谱回答
sass 花括号和分号必须不写吗？怎么我看网上可以写呢

参考：

在线编译工具SassMeister
Sass中文文档