CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言
Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点: 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(😉,而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似
做一下对比: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MZXyIKC6-1658320195071)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd10007ee21a44e988afe092aff50684~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]
单文件编译
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
多文件编译:
sass sass/:css/ 表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,
并且将这些 CSS 文件都放在项目中“css”文件夹中
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css开启“watch”功能,
这样只要你的代码进行任保修改,都能自动监测到代码的变化,并且给你直接编译出来:
1.四种输出方式
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kLJpY7sJ-1658320195071)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f949a8998ec847c390e860e45a81744a~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vwTzTGti-1658320195072)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/182e72492d1e47538aca4fffdcfdd6b6~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d4NCnMxo-1658320195072)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45ece9b0ca844ae2b8c06520ea706383~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HSkAmkGQ-1658320195072)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2fdc14e52b90485d8fa8fa8810daa693~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)]
2.嵌套
(1) 选择器嵌套
#css
nav a {
color:red;
}
header nav a {
color:green;
}
#scss
nav {
a {
color: red;
header & {
color:green;
}
}
}
(2)属性嵌套
#css
.box {
border-top: 1px solid red;
border-bottom: 1px solid green;
}
#scss
.box {
border: {
top: 1px solid red;
bottom: 1px solid green;
}
}
(3)伪类嵌套
.clearfix{
&:after {
clear:both;
overflow: hidden;
}
}
3.变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qCXG2rLY-1658320195072)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94bc768126b644e7941e79746ca5ab20~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)] 定义之后可以在全局范围内使用
。在选择器、函数、混合宏…的外面定义的变量为全局变量。 如果值后面加上!default
则表示默认值。
$btn-primary-color : #fff !default;
sass 的默认变量一般是用来设置默认值,然后根据需求来覆盖的,覆盖的方式也很简单,只需要在默认变量之前重新声明下
变量即可。
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
# 注意先后顺序
em {
$color: red;//定义局部变量
a {
color: $color;//调用局部变量
}
}
数据类型
在 Sass 中包含以下几种数据类型:
- 数字: 如,1、 2、 13、 10px;
- 字符串:有引号字符串或无引号字符串,如,“foo”、‘bar’、baz;
- 布尔型:如,true、 false;
- 空值:如,null;
- 值列表:
用空格或者逗号分开,
如,1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。 - 颜色:如,blue、 #04a3f9、 rgba(255,0,0,0.5);
(1)字符串
SassScript 支持 CSS 的两种字符串类型:
- 有引号字符串 (quoted strings)
- 无引号字符串 (unquoted strings)
在编译 CSS 文件时不会改变其类型。只有一种情况例外,使用 #{ }插值语句 (interpolation) 时,有引号字符串将被编译为无引号字符串。
(2)值列表
事实上,独立的值也被视为值列表——只包含一个值的值列表。 可以用 () 表示空的列表,这样不可以直接编译成 CSS,比如编译 font-family: ()时,Sass 将会报错。如果值列表中包含空的值列表或空值,编译时将清除空值,比如 1px 2px () 3px 或 1px 2px null 3px。
4. 混合宏
声明混合宏
在 Sass 中,使用“@mixin
”来声明一个混合宏。
- 不带参数混合宏:
@mixin border-radius{
border-radius: 5px;
}
- 带参数混合宏
# 带值参数
@mixin border-radius($radius:5px){
border-radius: $radius;
}
# 不带值参数
@mixin border-radius($radius){
border-radius: $radius;
}
# 带多个参数
@mixin center($width,$height){
width: $width;
height: $height;
margin-top: -($height) / 2;
margin-left: -($width) / 2;
}
带特别多参数混合宏:
有一个特别的参数“…”。当混合宏传的参数过多之时,可以使用参数来替代
# 带特别多参数
@mixin box-shadow($shadows...){
@if length($shadows) >= 1 {
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
} @else {
$shadows: 0 0 2px rgba(#000,.25);
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
}
调用混合宏
匹配了一个关键词“@include
”来调用声明好的