Sass使用
Sass使用
- 一、什么是Sass?`
- 二、为什么使用它？
- 三、Sass安装
- 四、语法使用
-
- 1.变量
- 2.嵌套
- 3.混合 mixin
- 4.继承 extend
- 5.导入 import
- 6.注释
- 7.数学运算
- 8. if条件语句
- 9.for循环
- 10.each循环
- 11.while循环
- 12.用户自定义函数
- 五、Sass特点
- 六、预处理 与 .sass 、.scss后缀格式区别
-
- (1) 后缀.sass格式
- (2) 后缀.sass格式
- (3) CSS预处理
- (4) CSS和scss的关系
- (5) .sass和.scss的关系
一、什么是Sass?`
Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
二、为什么使用它？
- 它能够帮我们更快更高效的编写更好维护的
css； - Sass 引入合理的样式复用机制，可以节约很多时间来重复。
Sass的好处当然不仅于此，当你使用之后便会发现其中的妙处。
三、Sass安装
根据个人习惯来下载Sass：
- npm install -g sass (全局，可以使用npm来安装Sass。-g全局安装是为了可以在任意目录下执行 sass 命令)
- npm install sass (局部)
四、语法使用
1.变量
变量可以存储样式信息，以便后面使用。 比如一个样式在页面的多个地方使用，就可以先将该样式的值赋给一个变量，后面直接使用变量即可。
语法： $变量名：样式值；
使用： $变量名；
注意点：
- 以
$符号开头，后跟变量名 - 多个单词，变量名以-分割，如：$theme-color
- 变量写在#{}中以镶嵌入字符串
代码如下（示例）：
// .scss文件 Sass后缀名为scss
$dark: #000;
$side: left;
.box {
background: $dark;
border-#{$side}-radius: 5px;
}
--------------------------------------
// 生成的css代码
.box {
background: #000;
border-left-radius: 5px;
}
2.嵌套
Ⅰ.选择器嵌套
子元素在父元素样式的一对大括号{}内 如：ul { li { } }
语法：
爷爷 {
爸爸 {
儿子 {
孙子 {
}
}
}
}
代码如下（示例）：
// html结构
<div class="grandpa">
<div class="father">
<div class="son"></div>
</div>
</div>
// .scss文件
.grandpa {
width: 200px;
height: 200px;
.father {
width: 100px;
height: 100px;
.son {
width: 50px;
height: 50px;
}
}
}
--------------------------------------
// 生成的css代码
.grandpa {
width: 200px;
height: 200px;
}
.grandpa .father {
width: 100px;
height: 100px;
}
.grandpa .father .son {
width: 50px;
height: 50px;
}
Ⅱ.伪类嵌套
从上面我们可以看出，选择器嵌套得出的css样式相当于后代选择器一样，中间都有一个空格分隔，那如果想给一个元素添加:hover要怎么做呢?
&符就是来解决这个问题的。
语法: &:hover { }
代码如下（示例）：
// html结构
<div class="box">
<a href="javascript:;">hello</a>
</div>
// .scss文件
// 这里我们希望鼠标悬停a的文本颜色改变
.box {
a {
&:hover {
color: red;
}
}
}
--------------------------------------
// 生成的css代码
.box a:hover {
color: red;
}
这里&就表示直接调用父选择器，拿上边的例子你可以把&理解为它是&外面的所有父选择器，& => .box a。
3.混合 mixin
mixin相当于已经定义好了一类样式，可以在任何地方重复的使用它，就跟js中的函数一样。
语法1-不含参数：
@mixin name {
css样式
}
使用: @include name；
代码如下（示例）:
// .scss文件
// 定义一个mixin
@mixin box-style {
width: 200px;
height: 200px;
background: #000;
}
// 使用
.box {
@include box-style;
// 当然也可以继续在这里添加样式
border-radius: 5px;
}
--------------------------------------
// 生成的css代码
.box {
width: 200px;
height: 200px;
background: #000;
border-radius: 5px;
}
语法2-含参数:
@mixin name ($param1，$param2， ...) {
css样式
}
使用: @include name(样式1，样式2，…)；
注意：
定义的时候参数要以$符开头，和变量命名是一样的
代码如下（示例）:
// .scss文件
$box-width: 200px;
$box-height: 200px;
// 定义一个mixin
@mixin box ($width, $height) {
width: $width;
height: $height;
}
// 使用
.box {
// 1. 第一种用法, 直接将css样式写入
@include box(200px, 200px);
// 2. 第二种, 将定义好的变量写入
@include box($box-width, $box-height);
}
--------------------------------------
// 生成的css代码
.box {
width: 200px;
height: 200px;
}
4.继承 extend
如果一个元素的样式和另一个元素的样式完全一样，这个元素无需再写一遍重复的样式，只需要使用@extend
就可以把另一个元素的所有样式全部继承过来。
语法: @extend 元素选择器；
代码如下（示例）：
// .scss文件
.box1 {
width: 200px;
height: 200px;
}
// box2 继承 box1的样式
.box2 {
@extend .box1;
}
--------------------------------------
// 生成的css代码
.box1, .box2 {
width: 200px;
height: 200px;
}
不过继承要慎用，被继承相关的元素的样式也会继承过去，您看下面的例子：
// .scss文件
.box1 {
width: 200px;
height: 200px;
}
.box1 div {
width: 100px;
}
// box2 继承 box1的样式
.box2 {
@extend .box1;
}
--------------------------------------
// 生成的css代码
.box1, .box2 {
width: 200px;
height: 200px;
}
.box1 div, .box2 div {
width: 100px;
}
如果不想与被继承元素的相关元素牵扯，还是注意选择器的书写。
5.导入 import
如果一个页面需要使用其他页面的样式，sass可以导入其他的scss文件，scss会把他们编译成一个css文件。
这样在开发中可以把一个页面的样式分割成多个scss文件，然后在页面的scss文件中导入其他scss，可以实现css的模块化开发。
语法： @import “文件名”
代码如下（示例）：
// 这里假设同级目录下有一个box1.scss
div {
width: 200px;
}
// 在box2.scss文件里引入box1.scss
@import "box1"
--------------------------------------
// 生成的css代码
div {
width: 200px;
}
6.注释
- 单行注释： / / css文件里不会显示 压缩方式的css不会显示
- 多行注释： /**/ css文件里会显示 压缩方式的css不会显示
- 强制注释：/* ! */ css文件里会显示 压缩方式的css会显示
7.数学运算
包含+、-、*、/(加减乘除)
代码如下（示例）：
// .scss文件
.box {
width: 50px + 50px;
height: 100px - 50px;
// 这里不能两个都带单位，否则是100px*px这种不合法的值
margin-top: 10px * 10;
// css会将/认为是合法的，所以需要加括号
padding-top: (100px / 2) ;
}
--------------------------------------
// 生成的css代码
.box {
width: 100px;
height: 50px;
margin-top: 100px;
padding-top: 50px;
}
8. if条件语句
Sass可以根据条件判断给出特定的样式
语法：
@if 条件语句{
}@else if 条件语句{
}@else{
}
代码如下（示例）：
// .scss文件
.box {
@if 1+1 == 2 {
color: red;
} @else if 1+1 == 3 {
color: blud;
} @else {
color: pink;
}
}
--------------------------------------
// 生成的css代码
.box {
color: red;
}
9.for循环
Sass也支持for循环，有两种语法
语法1：
@for $index from 开始值 through 结束值 {
}
从开始值开始，到结束值结束，包含结束值 index表示 1， 2，...结束值
代码如下（示例）:
// .scss文件
@for $i from 1 through 5 {
.col-#{$i} {
width: 50px * $i;
}
}
--------------------------------------
// 生成的css代码
.col-1 {
width: 50px;
}
.col-2 {
width: 100px;
}
.col-3 {
width: 150px;
}
.col-4 {
width: 200px;
}
.col-5 {
width: 250px;
}
语法2：
@for $index from 开始值 to 结束值 {
}
从开始值开始，到结束值结束，不包含结束值 index表示 1， 2，...结束值-1
代码如下（示例）:
// .scss文件
@for $i from 1 to 5 {
.col-#{$i} {
width: 50px * $i;
}
}
--------------------------------------
// 生成的css代码
.col-1 {
width: 50px;
}
.col-2 {
width: 100px;
}
.col-3 {
width: 150px;
}
.col-4 {
width: 200px;
}
10.each循环
遍历一个列表，然后从列表中取出对应值。 像border: 1px solied red； 1px solid red
这种用空格隔开的复合属性便是列表。
语法：
@each $index in $list {
}
代码如下（示例）:
// .scss文件
$icons: success fail warning;
@each $i in $icons {
.icon-#{$i} {
background-image: url(../images/icons/#{$icon}.png);
}
}
--------------------------------------
// 生成的css代码
.icon-success {
background-image: url(../images/icons/success.png);
}
.icon-error {
background-image: url(../images/icons/error.png);
}
.icon-warning {
background-image: url(../images/icons/warning.png);
}
11.while循环
只要条件为真，就执行语句体。
语法：
@while 条件 {
}
代码如下（示例）：
// .scss文件
$index: 6;
@while $index> 0 {
.box-#{$index} {
width: 5px * $index;
}
$index: $index - 2;
}
--------------------------------------
// 生成的css代码
.box-6 {
width: 30px;
}
.box-4 {
width: 20px;
}
.box-2 {
width: 10px;
}
12.用户自定义函数
语法：
@function name($param1，$param2，...) {
}
代码如下（示例）：
// .scss文件
$index: 6;
@function get-color($key) {
@if $key > 5 {
@return #000;
} @else {
@return #fff;
}
}
body {
background: get-color($index);
}
--------------------------------------
// 生成的css代码
body {
background: #000;
}
代码如下（示例）：
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import ssl
ssl._create_default_https_context = ssl._create_unverified_context
五、Sass特点
1.兼容CSS：Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。
2.特性丰富：Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位。
3.成熟：Sass已经经过其核心团队超过13年的精心打造。
4.行业认可：一次又一次地，行业把Sass作为首选CSS扩展语言。
5.社区庞大：数家科技企业和成百上千名开发者为Sass提供支持。
6.框架：有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。
六、预处理 与 .sass 、.scss后缀格式区别
(1) 后缀.sass格式
- Sass，是由buby语言编写的一款css预处理语言，和html一样有严格的缩进风格，和css编写规范有着很大的出入，是不使用花括号和分号的，所以不被广为接受。
- Sass 是一款强化 CSS 的辅助工具，是对 CSS 的扩展，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能，这些拓展令CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目，其后缀是.sass。
(2) 后缀.sass格式
- SCSS (Sassy CSS)，一款css预处理语言，SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感，其实就和css3语法一样，其后缀名为 .scss。
(3) CSS预处理
- css预处理器是用一种专门的语言，进行网页的样式设计，之后在被编译为正常的css文件，以供项目使用。使用css预处理语言的好处：是css更加简洁、方便修改、可读性强、适应新强并且更易于代码的维护。
(4) CSS和scss的关系
- SCSS 和 CSS 写法无差别，这也是 Sass后来越来越受大众喜欢原因之一。简单来说，把你现有的“.css”文件直接修改成“.scss”即可使用。
(5) .sass和.scss的关系
- sass和scss其实是一样的css预处理语言，scss可简单理解是sass的一个升级版本。
- SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
- 继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。而scss则和css的规范是一致的。
更详细的请前往Sass中文官网查看。