前端基础学习之Sass
一、概念
1.Sass是什么？
- Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言
- Sass 是一个 CSS 预处理器
- Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
- Sass 完全兼容所有版本的 CSS
- Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性
- Sass 生成良好格式化的 CSS 代码，易于组织和维护
- Sass 文件后缀为 .scss
2.Sass的特点
-
兼容CSS：Sass完全兼容所有版本的CSS，可以无缝地使用任何可用的CSS库
-
特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性
-
成熟：Sass已经经过其核心团队超过13年的精心打造
-
行业认可：一次又一次地，行业把Sass作为首选CSS扩展语言
-
社区庞大：数家科技企业和成百上千名开发者为Sass提供支持
-
框架：有无数的框架使用Sass构建 比如Compass、Bourbon 和 Susy
3.为什么使用Sass
- css本身语法不够强大 重复编码导致代码量大 无法实现复用 也不方便维护
- Sass引入了合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性
二、Sass语法格式
1.SCSS（Sassy CSS）:
- 仅在 CSS3 语法的基础上进行拓展，所有CSS3 语法在 SCSS 中通用，同时加入 Sass 的特色功能
- 支持大多数 CSS hacks 写法及浏览器前缀写法 (vendor-specific syntax)和早期的 IE 滤镜写法
- 以
.scss作为拓展名
2. Sass（Indented Sass）：
- 是最早的 Sass 语法格式 被称为缩进格式 通常简称 "Sass" 是一种简化格式
- 使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性
- 也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式
- 以
.sass作为拓展名
三、Sass变量
1.变量声明：
- 可把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值
- 使用 $ 符号来标识变量
- 以$开头，字母 数字 下划线 - 组成 但不能以数字开头
- 变量使用前必须声明
- 变量可以存储：字符串、数字、颜色值、布尔值、列表、null 值
语法：
$variablename:value;实例：
/* 定义变量 */
$bgc1: yellow;
$color1: #123456;
/* 使用变量 */
.box2 {
width: 200px;
height: 200px;
background-color: $bgc1;
color:$color1
}
2.作用域:
- 全局变量：没有被包含在任意的选择器{}中的变量称为全局变量 任意地方可使用
- 局部变量：有被包含在任意的选择器{}中的变量称为局部变量 当前{}里面去使用
- 内层可以使用外层 外层不能使用内层的变量
- 局部变量变为全局变量：变量值后 ;前 加 !global
3.!global:
- 使用 !global 关键词来设置变量是全局的
- 所有全局变量一般定义在同一个文件 如：_globals.scss 然后使用 @include 来包含该文件
4.变量引用：
- 凡是css属性的标准值可存在的地方，变量就可以使用
- css生成时，变量会被它们的值所替代，之后如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变
- 在声明变量时，变量值也可以引用其他变量
- 一般情况下，你反复声明一个变量，只有最后一处声明有效且它会覆盖前边的值
5.- 与 _
- 中划线命名的内容和下划线命名的内容是互通的无区别，包括 变量、混合器 和 Sass函数 的命名
- 但是在sass中纯css部分不互通，比如类名、ID或属性名
四、Sass嵌套规则与属性
1.嵌套规则：
- 将 子级选择器 放在 父级选择器 内部
2.父选择器&：
- 若想要在嵌套的选择器里面使用一个类似 :hover 的伪类用 &
- 当包含父选择器标识符的嵌套规则被打开时，它不会像后代选择器那样进行拼接，而是&被父选择器直接替换
3.嵌套属性：
- 有同样前缀的属性名
- 把属性名从中划线-的地方断开，在根属性后边添加一个冒号: 紧跟一个
{ }块，把子属性部分写在这个{ }块中
实例：
.parent {
width: 300px;
height: 300px;
background-color: red;
// 父元素选择器
&:hover {
background-color: yellow;
a {
color: #fff;
}
}
.fa {
$color: yellow;
width: 260px;
height: 260px;
background-color: blue;
.sn {
width: 100px;
height: 100px;
background-color: green;
}
a {
text-decoration: none;
color: $color;
// font-size: 100px;
// font-weight: bold;
// font-style: italic;
// font-family: Georgia, 'Times New Roman', Times, serif;
// 属性嵌套
font: {
size: 100px;
weight: bold;
style: italic;
family: Georgia, 'Times New Roman', Times, serif;
}
}
}
}五、@import
css的@import规则：
- 允许在一个css文件中导入其他css文件
- 但只有执行到
@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢
sass的@import规则：
- 在生成css文件时就把相关文件导入进来
- 这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求
- 所有在被导入文件中定义的变量和混合器均可在导入文件中使用
- 不需要指明被导入文件的全名 可以省略 .sass 或 .scss 文件后缀
语法：
@import "filename";六、@mixin 与 @include
1.概念：
通过sass的混合器实现大段类似样式的重用
-
@mixin 指令允许定义一个可以在整个样式表中重复使用的样式
-
@include 指令可以将混入（mixin）引入到文档中
-
混入也还可以包含选择器、属性嵌套，以及父选择器
-
一个mixin可以被多个地方使用
2.向混入传递变量：
（1）混入可以接收参数 可以向混入传递变量(也可直接使用外部变量)
实例：
@mixin box($color1) {
color: $color1;
}
.test_color {
/* 在使用的时候传入实际的值 */
@include box(pink);
}（2）混入的参数可以定义默认值
实例：
/* 没有传值将使用默认值 */
@mixin box($color1: blue) {
color: $color1;
}
.test_color {
/* 传值则为红色 */
@include box(red);
}
.test_color {
/* 未传值使用默认值为蓝色 */
@include box();
}（3）设置可变参数：不能确定一个混入（mixin）或函数（function）使用多少个参数，使用 ...
实例：
@mixin box-shadow($shadows...) {
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
.shadows1 {
@include box-shadow(2px 6px 10px #999);
}七、extend 与 继承
- 选择器继承是指一个选择器可以继承另一个选择器定义的所有样式
- 通过 @extend 语法实现
- 目的是减少重复量 复用代码
实例：
.fa {
width: 300px;
height: 300px;
background-color: red;
img {
width: 100px;
height: 100px;
}
div {
display: flex;
justify-content: center;
align-items: center;
.left {
flex-shrink: 2;
}
}
&:hover {
background-color: red;
}
}
section.fa {
color: green;
}
.sn {
@extend .fa;
// 任何跟.fa有关的组合选择器样式也会被.sn以组合选择器的形式继承
}八、条件判断语句
1. @if
语法：
@if 条件表达式 { 条件判断成功这里的代码就执行 不成功就不执行 }实例：
$temp: 100;
// temp > 100 ：500px temp < 100 ：300px temp = 100 ：400px
header {
@if $temp > 100 {
// 代码是否执行 条件是否成功 条件判断成功 里面的代码才会被使用
width: 500px;
}
@if $temp < 100 {
width: 300px;
}
@if $temp = 100 {
width: 400px;
}
}
2. @else if 单分支
语法：
@if 条件1 {
条件1判断成功就执行的代码
}
@else {
条件1判断不成功就执行的代码
}实例：
// temp > 100：500px temp<=100：300px
section {
@if $temp > 100 {
// 条件判断成功 就执行
height: 500px;
}
@else {
// 条件判断不成功 就执行
height: 300px;
}
}
3. @ else 多分支
语法：
@if 条件1 {
条件1判断成功就执行的代码
}
@else if 条件2 {
条件1判断不就继续判断条件2 条件2 判断成功就执行的代码
}
@else if 条件3 {
条件1 和 条件2判断不就继续判断条件3 条件3 判断成功就执行的代码
}
.....
@else {
以上所有条件判断不成功就执行的代码
} 实例：
// temp > 100 ：500px ； temp < 100 ：300px ； temp = 100 ：400px
footer {
@if $temp > 100 {
// $temp > 100判断成功就执行
line-height: 500px;
}
@else if $temp < 100 {
// $temp > 100判断不成功就继续判断$temp < 100
line-height: 300px;
}
@else {
// $temp > 100 和 $temp < 100都判断不成功就执行
line-height: 400px;
}
}九、总结
1. 后缀.sass格式
-
Sass 是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格
-
因不使用花括号和分号 不被广为接受
-
Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅
-
使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目
2. 后缀.scss格式
-
SCSS是一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能
-
任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件
-
SCSS 需要使用分号和花括号而不是换行和缩进
-
SCSS 对空白符号不敏感，其实就和css3语法一样
3. CSS预处理
-
css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用
-
使用css预处理语言的好处：使css更简洁、方便修改、可读性强、适应性强、易于代码的维护
4. CSS和scss的关系
-
SCSS 和 CSS 写法无差别
-
把现有的“.css”文件直接修改成“.scss”即可使用
5. .sass和.scss的关系
-
sass和scss其实是一样的css预处理语言，scss可简单理解是sass的一个升级版本
-
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss
-
sass时代是有严格的缩进规范并且没有‘{}’和‘；’
-
而scss则和css的规范是一致的