SCSS的基本使用(一)

一、使用&符号来引用父选择器

scss%E7%9A%84%E8%AF%AD%E6%B3%95-toc" style="margin-left:80px;">二、scss的语法

三、变量（Variables）

四、嵌套（Nesting）

五、@mixin 和 @include

六、@extend 继承

七、@import 与 Partials

八、@if简单判断

九、@if复杂判断

一、使用&符号来引用父选择器

在嵌套规则中使用父选择器。这样可以避免重复编写选择器，并且在生成的CSS中保持正确的层级关系。

.button {background-color: blue;&:hover {background-color: darkblue;}&.active {background-color: red;}.icon {color: white;font-size: 16px;}
}

在上面的示例中，.button选择器是父选择器。在嵌套规则中，使用&引用父选择器。

&:hover表示当鼠标悬停在.button元素上时，应用这个样式。
&.active表示当.button元素有.active类时，应用这个样式。
.icon表示嵌套在.button元素内的.icon元素，不使用&引用父选择器。在编译为CSS后，生成的代码如下：
```
.button {background-color: blue;
}.button:hover {background-color: darkblue;
}.button.active {background-color: red;
}.button .icon {color: white;font-size: 16px;
}
```
通过使用&引用父选择器，可以编写更具可读性和维护性的代码。

父选择器的引用可以嵌套在任何层级的规则中，并且可以与其他选择器和修饰符组合使用。

scss%E7%9A%84%E8%AF%AD%E6%B3%95">二、scss的语法

（1）// 注释的内容不会编译到css文件中去

/* 我的注释内容会编译到css文件中去 */
body {margin: 0;
}

（2） /* */ 注释的内容会编译到css文件中，但是不能是压缩的编译排版格式（--style compressed）

/* 我的注释内容会编译到css文件中去 */
body {margin: 0;
}

（3）强制注释 /!* */，这种注释在编译排格式为compressed中也能存在。
总结：// 一般注释scss内的变量、函数等，/* / 去注释样式说明，非常重要的注释采用/! */。

三、变量（Variables）

变量名以 $ 开头，变量的值无需加引号，变量名与变量值之间用冒号

一个变量中可以使用其他变量

// 变量名以 $ 开头，变量的值无需加引号，变量名与变量值之间用冒号
$baseColor: pink;
$bg_color: #ccc;// 一个变量中可以使用其他变量
$base-border: 1px solid $baseColor;.box {  color: $baseColor;background-color: $bg_color;border: $base-border;
}

.box {color: pink;background-color: #ccc;border: 1px solid pink;
}

四、嵌套（Nesting）

普通后代选择器的嵌套

.box {background-color: pink;ul {/* ul 样式 */list-style: none;li {/* li 样式 */font-size: 1rem;}}
}

@charset "UTF-8";
.box {background-color: pink;
}
.box ul {/* ul 样式 */list-style: none;
}
.box ul li {/* li 样式 */font-size: 1rem;
}

伪类选择器的嵌套需要使用&符号, &的一个作用就是让两个元素之间没有空格，让他们紧密连接在一起；

.box{width: 300px;a{color:red;  &:hover {font-size: 30px;}}
}

.box {width: 300px;
}
.box a {color: red;
}
.box a:hover {font-size: 30px;
}

属性嵌套

.box {font:{size:12px;weight: 400;}
}

.box {font-size: 12px;font-weight: 400;
}

五、@mixin 和 @include

可以理解为js的函数

// 声明：如果没有参数，括号可省略
@minxin 名字(参1,参2,..) {// 样式代码，里面也可以写任何标签嵌套
}// 调用，可以在某个标签下调用，也可单独调用；没有参数可以省略括号；
.box {@include 名字
}@include 名字

无参数

// 定义不带参mixin
@mixin my() {border:1px solid red;color: pink;p {font-size: 24px;}
}.box {@include my()
}

.box {border: 1px solid red;color: pink;
}
.box p {font-size: 24px;
}

Partials条件与特点：

body {margin: 0;padding: 0;
}.box {font-size: 30px;color: red;
}

// Partials 文件：_base.scss
body {padding: 0;margin:0;
}// 主要scss文件：index.scss
// 导入_base.scss
@import "base";.box {font-size: 30px;color: red;
}

有参数

// 定义带参mixin
@mixin info($text-color, $bg-color) {color: $text-color;background-color: $bg-color;
}.box {// 按顺序传实参，传递的参数必须保持一致@include info(red, gray)
}.box {// 这样传参可以不考虑顺序，但是数量要一一对应，不能少写@include info($bg-color: red, $text-color:gray)
}

.box {color: red;background-color: gray;
}.box {color: gray;background-color: red;
}

有参数且带默认值

@mixin btn($color:pink, $bg:orange) {color: $color;background-color: $bg;
}.box {// 带默认值的参数，可以不填，等于默认值@include btn;
}.box {// 也可以按顺序填，填一个值，对应@mixin的第一个形参@include btn(blue)
}.box {// 也可指定某个值@include btn($bg: black)
}

.box {color: pink;background-color: orange;
}.box {color: blue;background-color: orange;
}.box {color: pink;background-color: black;
}

六、@extend 继承

SCSS @extend 继承

在SCSS中，@extend指令用于共享样式规则。使用@extend可以提高CSS代码的DRY（不要重复自己）原则，减少冗余的代码，并使样式表更易于维护。

以下是一个简单的例子，演示如何使用@extend：
```
// 定义一个基本的类 .base-style
.base-style {color: red;font-size: 16px;
}// 使用 @extend 继承 .base-style 类的样式
h1 {@extend .base-style;
}p {@extend .base-style;
}
```
编译后的CSS：
```
.base-style, h1, p {color: red;font-size: 16px;}
```
在这个例子中，h1和p将会共享.base-style的样式。注意，.base-style自身也会出现在编译后的CSS中，作为这些选择器的一部分，这是因为@extend实质上是在修改选择器，而不是创建新的类。如果不希望.base-style类本身出现在CSS中，可以使用嵌套规则来定义样式，如下：

// 使用嵌套规则来定义样式
%base-style {color: red;font-size: 16px;
}h1 {@extend %base-style;
}p {@extend %base-style;
}

h1, p {color: red;font-size: 16px;
}

这里使用了%base-style（以百分号开头）定义的混合（placeholder）样式，不会在最终的CSS中生成对应的类。

七、@import 与 Partials
在传统的css中，就是使用@import导入其他css文件的，但是每次都会去发送http请求，浪费性能；
scss中，优化了@import，我们会先创建一个主要scss文件index.scss，然后根据需要去创建所需的每一部分的scss文件，我们称每一个部分为Partials；这样有益于模块化；
创建文件时，以_开头
使用@import导入文件时，名字不需要加_
当你使用sass监听一个目录是，不会监听Partials文件

八、@if简单判断

$flg: true;.box {@if $flg {font-size: 34px;}border:2px solid red;
}

.box {font-size: 34px;border: 2px solid red;
}

九、@if复杂判断

$body-color: red;body {@if $body-color == pink {background-color: pink;} @else if $body-color == red {background-color: red;} @else {background-color: gray;}
}