1. 什么是Sass?

Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

2.Sass简介

        Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

        Sass 是一个 CSS 预处理器。

        Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

        Sass 完全兼容所有版本的 CSS。

        Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

        Sass 生成良好格式化的 CSS 代码，易于组织和维护。

        Sass 文件后缀为 .scss。

3. 为什么使用Sass？

1. 它能够帮我们更快更高效的编写更好维护的 css；
2. Sass 引入合理的样式复用机制，可以节约很多时间来重复。

Sass的好处当然不仅于此，当你使用之后便会发现其中的妙处。

4. Sass语法

他有两种语法格式，首先是SCSS（Sassy CSS）——也是本文示例所使用的格式——这种格式仅在Css3语法的基础上进行拓展，所有Css语法在SCSS中都是通用的，同时加入Sass特色功能。.scss为拓展名

4.1 变量

变量可以存储样式信息，以便后面使用。
比如一个样式在页面的多个地方使用，就可以先将该样式的值赋给一个变量，后面直接使用变量即可。

语法： $变量名：样式值；
使用： $变量名；
注意点：

1. 以$符号开头，后跟变量名
2. 多个单词，变量名以-分割，如：$theme-color
3. 变量写在#{}中以镶嵌入字符串

示例如下：

// .scss文件  Sass后缀名为scss
$dark: #000;
$side: left;
.box {
	color: $dark;
}

.box2 {
	background: $dark;
	border-#{$side}-radius: 5px;
}

--------------------------------------

// 生成的css代码
.box1 {
  color: #000;
}

.box2 {
  background: #000;
  border-left-radius: 5px;
}

 

4.2 嵌套

1. 选择器嵌套

选择器相同放外边 选择器不同放里边

子元素在父元素样式的一对大括号{}内 如：ul { li { } }

爷爷 {
	爸爸 {
		儿子 {
			孙子 {
			
			}
		}
	}
}

body,
div,
ul,
li,
p {
    margin: 0;
    padding: 0;
}

.zt {
    width: 100%;
    margin: 0 auto;

    .one {
        img {
            width: 100%;
        }
    }
}

编译后
body,
div,
ul,
li,
p {
    margin: 0;
    padding: 0
}

.zt {
    width: 100%;
    margin: 0 auto
}

.zt .one img {
    width: 100%
}

2. 伪类嵌套

从上面我们可以看出，选择器嵌套得出的css样式相当于后代选择器一样，中间都有一个空格分隔，那如果想给一个元素添加:hover要怎么做呢?

&符就是来解决这个问题的。
语法: &:hover { }
示例如下：

<div class="box">
	<a href="javascript:;">hello</a>
</div>
// .scss文件
// 这里我们希望鼠标悬停a的文本颜色改变
.box {
	a {
		&:hover {
			color: red;
		}
	}
}


编译后
.box a:hover {
  color: red;
}

继承

如果定义一个类名专门用来存放样式，他这个类在html中没有任何意义，并没有class声明，所以这里用占位符会更好，但是如果在html中有用处也是可以去使用类名，继承元素最好不要是包含元素样式

占位符选择器%

@extend 类名 相当把继承的元素以群组选择器的方式在选择器前进行添加

.btn{                          //main .btn 包含选择器 尽量不使用 占位符选择器 %.btn

    border-radius: 20px;
}
.box-size{
    width: 200px;
    height: 100px;
}
.btn-one{
    @extend .btn;
    @extend .box-size;
    background-color: red;
    color: aqua;
    border-radius: 10px solid blue;
}
.btn-two{
    @extend .btn;
    @extend .box-size;
    background-color: red;
    color: rgb(0, 255, 102);
    border-radius: 10px solid rgb(255, 0, 242);
}
.btn-three{
    @extend .btn;
    @extend .box-size;
    background-color: rgb(236, 148, 15);
    color: rgb(162, 255, 0);
    border-radius: 10px solid rgb(0, 191, 255);
}
.btn-for{
    @extend .btn;
    @extend .box-size;
    background-color: rgb(234, 0, 255);
    color: rgb(85, 255, 0);
    border-radius: 10px solid rgb(9, 9, 41);
}

5.sass运算

数学运算符：+ - * / %；

关系运算符：> < >= <=；

逻辑运算符：or and not 或与非

数据类型

数字型、字符型、布尔型、颜色型、空值、数组型、maps型

数学运算符

运算符 加+

width:1+2; == width:3;

width:10+20px == width:30px;

width:10+20% == width:30%;

content:"aa"+bb; "aabb"

content:bb + "aa"; bbaa

运算符 减-

width:20-10 == width:10;

width:20-10px == width:10px;

width:20-10% == width:10%;

先将单位统一再进行运算，两个单位不同不能进行运算

运算符 除/

border-radius:10px/20px //当两个由单位或两个数字或一个单位一个数字用 / 拼接时 / 代表分隔符不做运算

目录

1. 什么是Sass?

2.Sass简介

3. 为什么使用Sass？

4. Sass语法

4.1 变量

4.2 嵌套

继承

5.sass运算

---