sass介绍

1、Sass简介

Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

浏览器并不支持 Sass 代码。因此，你需要使用一个 Sass 预处理器将 Sass 代码转换为 CSS 代码。

在使用 Sass 之前，你需要在项目中安装它；

1.1、npm安装步骤：

确保已经安装了Node.js和npm；

//全局安装
npm install -g sass
//查看安装版本
sass --version
//简写
sass -v

使用前需要先创建一个SCSS文件，例如common.scss；
sass文件一般保存在.scss的文件中，css则是保存在.css文件中；

其他安装介绍

2、变量

变量通常用来存储一些会重复利用的样式；例如颜色、字体；
格式：$符号作为变量的标志；
命名：变量名是不以数字开头的可包含字母、数字、下划线、横线（连接符），可使用驼峰命名法、下划线链接命名法；
写法：同css，变量名与值之间用冒号分割；
Sass map ：Sass map 是一种数据结构，允许你存储一系列的键值对，类似于 JavaScript 中的对象

sass变量可以存储的信息包含：字符串、数字、颜色值、布尔值、列表、null值；

//变量创建
$mainColor:#00b362;//颜色变量
$blackColor:#000;
$fontSize:16px; //数字变量
$fontFamily:"Helvetica Neue", Helvetica, Arial, sans-serif;//字符串变量
$color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb);//Sass map
//变量使用
body{
	font:14px $fontStack;
	color: $blackColor;
}
//你可以使用 map-get 函数来获取特定键的值
.ceshi-main{
	p{
		font-size: 28rpx;
	}
	p:nth-child(1){
		color: map-get($colorMap, color1);
	}
	p:nth-child(2){
		color: map-get($colorMap, color2);
	}
	p:nth-child(3){
		color: map-get($colorMap, color3);
	}
}

3、嵌套

Sass 允许您嵌套 CSS 选择器，嵌套方式 与 HTML 的视觉层次结构相同。请注意，过度嵌套的规则 将导致过度限定的 CSS，这些 CSS 可能很难维护，并且 通常被认为是不好的做法。

使用大括号和缩进来表示层级关系，可以多层嵌套

//.scss嵌套写法
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
  & > p {
    color: #f00;
  }
  & + p {
    color: #0ff;
  }
  &:nth-child(2) a{
    color: #ff0;
  }
}

//.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;
}
nav > p{
  color: #f00;
}
nav + p{
  color: #0ff;
}
nav:nth-child(2) a{
    color: #ff0;
}

备注：
nav > p 写法为后代选择器，只匹配直接后代；
nav + p 写法为兄弟组合器，只有与nav相邻的P标签会匹配此语法；
nav:nth-child(2) 写法为伪类选择器；

<nav>
 <p></p>
</nav>

4、混合@mixin与@include

混合器类似于函数，可以包含可重用的样式和变量，简化复杂样式定义。

@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
@include 指令可以将混入（mixin）引入到文档中。

//定义无参数的混合器
@mixin name{
	background: #fff;
    box-shadow: 0 0 1px rgba(0,0,0,.25);
    color: #222;
}

.main{
	@include name;//使用默认值
}

//定义有参数混合器，name混合器名称，$theme混合器传参，#f00参数默认值
@mixin name($theme:#f00){
	background: $theme;
    box-shadow: 0 0 1px rgba($theme, .25);
    color: #fff;
}

//使用混合器，使用@include关键字
.info{
	@include name;//使用默认值
}
.success {
	@include name($theme:#73df8a);//传参
}

//设置可变参数
@mixin box-shadow($shadows...){
   -moz-box-shadow: $shadows;
   -webkit-box-shadow: $shadows;
   box-shadow: $shadows;
}

//引用
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

//浏览器前缀使用混入
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

//使用
.myBox {
  @include transform(rotate(20deg));
}

//转换为css代码
.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

注意：Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin color-set { } 与 @mixin color_set { } 是一样的混入。

//具体实例设置，定义混合器
@mixin colorSet($bgColor:#fff4e4,$boxColor:#000d8b){
	background: $bgColor;
	box-shadow: 0 0 10px rgba($boxColor,0.5);
	-moz-box-shadow: 0 0 10px rgba($boxColor,0.5);
	-webkit-box-shadow: 0 0 10px rgba($boxColor,0.5);
	color: #000;
}
//使用混合器
.ceshi-main{
	.info{
		width: 60px;
		height: 60px;
		@include colorSet;//使用默认值
	}
	.info2{
		width: 60px;
		height: 60px;
		@include colorSet(#edfff1,#00470f);//使用默认值
		//@include colorSet($bgColor:#edfff1,$boxColor:#00470f);
	}
}

//渲染结果
.ceshi-main .info{
    width: 60px;
    height: 60px;
    background: #fff4e4;
    box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);
    -moz-box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);
    -webkit-box-shadow: 0 0 10px rgba(0, 13, 139, 0.5);
    color: #000;
}
.ceshi-main .info2{
    width: 60px;
    height: 60px;
    background: #edfff1;
    box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);
    -moz-box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);
    -webkit-box-shadow: 0 0 10px rgba(0, 71, 15, 0.5);
    color: #000;
}

混合器也支持嵌套

//定义混合器
@mixin mainText($size:14px,$color:#222,$lightColor:#999){
	color: $color;
	font-size: $size;
	p{
		color: $color;
		font-size: $size;
	}
	span{
		font-size: 24rpx;
		color: $lightColor;
	}
}
//使用混合器
.info{
	@include mainText;
}
.success{
	@include mainText(18rpx, #3bc157, #c6e7cd);
}
.error{
	@include mainText(18rpx, #e73535, #eab7b7);
}

5、sass函数

sass定义了各种类型的函数，字符串相关、数字相关、列表相关、映射相关、选择器相关、颜色相关等等；
菜鸟教程参考文档

数字函数

abs(15)//结果15
abs(-15)//结果15

ceil(15.20)  //结果: 16

comparable(15px, 10px)//结果: true
comparable(20mm, 1cm) //结果: true
comparable(35px, 2em) //结果: false

floor(15.80) //结果: 15

max(5, 7, 9, 0, -3, -7) //结果: 9

min(5, 7, 9, 0, -3, -7) //结果: -7

round(15.20) //结果: 15
round(15.80) //结果: 16

Sass Map(映射)函数

$font-sizes: ("small": 12px, "normal": 18px, "large": 24px)
map-get($font-sizes, "small") //结果: 12px

map-has-key($font-sizes, "big") //结果: false

6、sass的@import

sass与css类似，支持@import指令；@import 指令可以让我们导入其他文件等内容；

CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但，Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

注意：包含文件时不需要指定文件后缀，Sass 会自动添加后缀 .scss。

//创建index.scss文件
//导入 common.scss文件。
@import "common";

//common.scss文件
html,body,ul,li,ol,p,img,h1,span{
  margin:0;
  padding:0;
}