【SCSS】常用的SCSS语法

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”来调用声明好的