目录
一、使用&符号来引用父选择器
二、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的语法
- （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;
}
}
body {
background-color: red;
}
