# scss-study

**Repository Path**: dufeihu/scss-study

## Basic Information

- **Project Name**: scss-study
- **Description**: scss学习总结
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-26
- **Last Updated**: 2023-12-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: dfh
 * @Date: 2023-12-26 08:16:40
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
# scss基本使用总结

## 1.与字符号 &

> 嵌套规则中的父选择器

```scss
.container {
    width: 100px;
    height: 100px;
    background-color: red;
    a {
        width: 50px;
        height: 50px;
        // 与字符号代表的是父容器  a
        &:hover{
            background-color: blue;
        }
    }
    .top {
        border: 1px solid #ccc;
        // 与字符号代表的是父容器  .top
        &-left {
            margin-left: 20px;
        }
    }
}
```

```css
.container {
  width: 100px;
  height: 100px;
  background-color: red;
}
.container a {
  width: 50px;
  height: 50px;
}
.container a:hover {
  background-color: blue;
}
.container .top {
  border: 1px solid #ccc;
}
.container .top-left {
  margin-left: 20px;
}
```

## 2.属性嵌套

> 有些css属性遵循相同的命名空间，比如`font-family`,`font-size`,`font-weight`都以`font`作为属性的命名空间，sass允许将属性嵌套在命名空间中

```scss
.container {
    width: 100px;
    height: 100px;
    // font-size font-wight
    font: {
        size: 24px;
        weight: bold;
    }
}
```

```css
.container {
  width: 100px;
  height: 100px;
  font-size: 24px;
  font-weight: bold;
}
```

## 3.占位符 %

> sass提供的一种特殊的选择器，必须通过`@extend`命令调用

```scss
%btn {
    border: 1px solid #ccc;
    border-radius: 20px;
    width: 80px;
    height: 40px;
}

.button-default{
    @extend %btn;
    background-color: #ababab;
}
.button-success{
    @extend %btn;
    background-color: green;
}
.button-error {
    @extend %btn;
    background-color: red;
}
```

```css
.button-error, .button-success, .button-default {
  border: 1px solid #ccc;
  border-radius: 20px;
  width: 80px;
  height: 40px;
}

.button-default {
  background-color: #ababab;
}

.button-success {
  background-color: green;
}

.button-error {
  background-color: red;
}
```

## 4.定义变量
- 1.全局变量
    - 1.1.`$color:red;`
    - 1.2.`$bg:blue !global;`
- 2.局部变量
- 3.定义规则
    - 3.1.变量以美元符号`$`开头，后面跟变量名
    - 3.2.变量名不以数字开头，可以包含字母，数字，下划线，横线
    - 3.3.写法同css，即变量名和值之间用冒号分割
    - 3.4.变量一定要先定义，后使用

```scss
//定义一个全局变量
$color:red;
.container {
    color:$color;
    // 定义一个全局变量
    $bg: blue !global;
}

p {
    background-color: $bg;
    color: $color;
}
```

```css
.container {
  color: red;
}

p {
  background-color: blue;
  color: red;
}
```

## 5.变量类型
- 1.数字：1,2,3,4...
- 2.字符串，有引号和无引号字符串：'foo','bar',baz
- 3.颜色：blue,#ccc,rgba(255,255,255,1)
- 4.布尔值：true,false
- 5.空：null
- 6.数组list:用空格或逗号做分隔符:blue yellow red 
- 7.maps相当于JS的Object:(k1:val1,k2:val2)

```scss
$layer-index:10;
$border-width:30px;
$font-base-family:'Open Sans','Sans-serif','微软雅黑';
$top-bg-color:rgba(255,147,29,0.6);
$block-base-padding:6px 10px;
$blank-mode:true;
$var:null;//值null是其类型的唯一值，它表示缺少值，通常函数返回以指示缺点结果
$color-map:(color1:red,color2:blue,color3:green);
$fonts:(self:'Helvetica Neue',monospace:'Consolas');

//默认值
$color:red !default;

.container{
    $font-size: 16px !global;
    font-size: $font-size;
    color:$color;
    @if $blank-mode {
        background-color: black;
    }
    @else{
        background-color: white;
    }
    content:type-of($var);
    content:length($var);
    color:map-get($color-map, color3);

}
```

```css
.container {
  font-size: 16px;
  color: red;
  background-color: black;
  content: null;
  content: 1;
  color: green;
}
```

## 6.默认值 !default

> 用户定义了用用户的，用户没定义用默认值
```scss
//默认值定义：用户定义了用用户的，用户没有用使用默认值
$color:red!default;
.container{
    color:$color;
}
```

```css
.container {
  color: red;
}
```

## 7.import

> 允许导入`scss`或`sass`文件
- 1.文件拓展名`.css`
- 2.文件名以`http://`开头
- 3.文件名是`url()`
- 4.`@import`包含`media queries`
- 5.下划线命名的文件名，只有引入，不做编译，相当于一个模块 @import '_use.scss'

```scss
@import 'public.scss';
@import '_user.scss';
.container{
    background-color: $bg-color;
    font-size: $font-size;
}
```

```css
.container {
  background-color: red;
  font-size: 20px;
}
```

## 8.@mixin

> 混合指令：`@mixin`
- 1.mixin是可以重复使用的一组css声明
- 2.mixin有助于减少重复代码，只需声明一次，就可以在文件中引入
- 3.混合指令可以包含所有的css规则，绝大部分sass规则，甚至通过参数功能引入变量，输出多样化的样式
- 4.使用参数时建议加上默认值

```scss
//1.标准形式：定义页面中区块基础的样式
@mixin block {
    width: 100%;
    margin-left: 20px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

//使用混入
.container {
    @include block();
}

//2.嵌入选择器
@mixin warning-text {
    .warn-text {
        font-size: 20px;
        color: red;
        line-height: 40px;
    }
}

.container2 {
    @include warning-text();
}

//3.使用变量
@mixin flex-align($aitem) {
    display: flex;
    align-items: $aitem;
    justify-content: $aitem;
}

.container3 {
    // @include flex-align(center);
    @include flex-align($aitem: center)
}

//4.使用变量（多参数）
@mixin block-padding($top, $bottom, $left, $right) {
    padding-top: $top;
    padding-bottom: $bottom;
    padding-left: $left;
    padding-right: $right;
}

.container4 {
    // @include block-padding(10px, 20px, 30px, 40px);
    @include block-padding($top: 10px, $bottom:20px, $left:30px, $right:40px);
}

//5.指定默认参数
@mixin block-padding2($left:0px, $right:0px, $top:0px, $bottom:0px) {
    padding-top: $top;
    padding-bottom: $bottom;
    padding-left: $left;
    padding-right: $right;
}

.container5 {
    @include block-padding2($left: 20px, $top:20px);
}

//6.可变参数
@mixin linear-gradient($direction, $gradients...) {
    // nth取出map中的第一个值
    background-color: nth($gradients, 1);
    background-image: linear-gradient($direction, $gradients);
}

.container6 {
    @include linear-gradient(to right, red, green, blue);
}
```

```css
.container {
  width: 100%;
  margin-left: 20px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.container2 .warn-text {
  font-size: 20px;
  color: red;
  line-height: 40px;
}

.container3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.container4 {
  padding-top: 10px;
  padding-bottom: 20px;
  padding-left: 30px;
  padding-right: 40px;
}

.container5 {
  padding-top: 20px;
  padding-bottom: 0px;
  padding-left: 20px;
  padding-right: 0px;
}

.container6 {
  background-color: red;
  background-image: -webkit-gradient(linear, left top, right top, from(red), color-stop(green), to(blue));
  background-image: linear-gradient(to right, red, green, blue);
}
```

## 9.@extend

> 定义一个通用样式，特殊样式继承通用样式 + 自己的样式

```scss
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}

.alert-info{
    @extend .alert;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

.alert-success{
    @extend .alert;
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}

.alert-warning{
    @extend .alert;
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
}

.alert-danger{
    @extend .alert;
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
```

```css
.alert, .alert-danger, .alert-warning, .alert-success, .alert-info {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.alert-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
```

> 多继承

```scss
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
}
.important {
    font-weight: bold;
    font-size: 40px;
}

.alert-info{
    @extend .alert;
    @extend .important;
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}
```

```css
.alert, .alert-info {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
}

.important, .alert-info {
  font-weight: bold;
  font-size: 40px;
}

.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
```

## 10.等号操作符 = !=

- 等号：=
- 不等号：!=

```scss
$theme:1;
.container{
    @if $theme == 1{
        background-color: red;
    }
    @else{
        background-color: blue;
    }
}
```

```css
.container {
  background-color: red;
}
```

## 11.比较操作符

> `<`,`>`,`<=`,`>=`

```scss
theme:8;
.container{
    @if $theme >= 5{
        background-color: red;
    }
    @else{
        background-color: blue;
    }
}
```

```css
.container {
  background-color: red;
}
```

## 12.逻辑运算符

- 1. and 逻辑与
- 2. or  逻辑或
- 3. not 逻辑非

```scss
$width:100;
$height:200;
$last:false;
div {
    @if $width > 50 and $height > 100  {
        font-size: 16px;
    }
    @else{
        font-size: 14px;
    }
    @if not $last{
        border-color: red;
    }
    @else{
        border-color: blue;
    }
}
```

```css
div {
  font-size: 16px;
  border-color: red;
}
```

## 13.数字运算符

> `+,-,*,/,%`

```scss
.container {
    /* ==================+ 运算===================== */
    width: 50 + 20; //70
    width: 50 + 20%; //70%
    width: 20% + 70%; //90%
    width: 10px + 20px; //30px
    width: 10px + 10pt; //23.3333333333px;
    width: 10px + 10; //20px
    /* ==================- 运算===================== */
    width: 50 - 20; // 30
    width: 50 - 20%; // 30%
    width: 20% - 10%; //10%
    width: 20px - 10px; //10%
    width: 20px - 10pt; //6.6666666667px;
    width: 20px - 10; //10%
    /* ==================* 运算===================== */
    width: 10 * 20; //200
    width: 10 * 20%; //200%
    width: 10 * 20px; //200px
    width: 10 * 20pt; //200pt
    /* ==================/ 运算===================== */
    width: 10 / 5; //10/5
    width: (10 / 5); //2
    width: 10px / 5px; //10px/5px
    width: 10px / 10 *2; //2px
    width: round($number: 10)/2; //5
    $width: 100px;
    width: ($width / 2); //50px
    /* ==================% 运算===================== */
    width: 10 % 3; //1
    width: 50 % 3px; //2px
    width: 50px % 4px; //2px
    width: 50px % 7; //1px
    width: 50% % 7; //1%
    width: 50% % 9%; //5%
    width: 50px % 10pt; // 10px
    width: 50px % 13.33333px; //10.00001px
    width: 50px + 10pt; //63.3333333333px
    /* ==================+ 运算===================== */
    content: "Foo" + bar;//"Foobar"
    content: Foo + "bar";//Foobar
    content: Foo + bar;//Foobar
    content: "Foo" + "bar";//"Foobar"
}
```

```css
.container {
  /* ==================+ 运算===================== */
  width: 70;
  width: 70%;
  width: 90%;
  width: 30px;
  width: 23.3333333333px;
  width: 20px;
  /* ==================- 运算===================== */
  width: 30;
  width: 30%;
  width: 10%;
  width: 10px;
  width: 6.6666666667px;
  width: 10px;
  /* ==================* 运算===================== */
  width: 200;
  width: 200%;
  width: 200px;
  width: 200pt;
  /* ==================/ 运算===================== */
  width: 10/5;
  width: 2;
  width: 10px/5px;
  width: 2px;
  width: 5;
  width: 50px;
  /* ==================% 运算===================== */
  width: 1;
  width: 2px;
  width: 2px;
  width: 1px;
  width: 1%;
  width: 5%;
  width: 10px;
  width: 10.00001px;
  width: 63.3333333333px;
  /* ==================+ 运算===================== */
  content: "Foobar";
  content: Foobar;
  content: Foobar;
  content: "Foobar";
}
```

## 14.插值语句

> `#{}`

```scss
$font-size:12px;
$line-height:30px;
.container{
    font: #{$font-size}/#{$line-height} '微软雅黑';
}

$class-name:danger;
$attr:color;
a.#{$class-name}{
    border-#{$attr}:red;
}
```

```css
.container {
  font: 12px/30px "微软雅黑";
}

a.danger {
  border-color: red;
}
```

## 15.color函数

- 1. lighten($color,$amount):让颜色变亮
- 2. darken($color,$amount):让颜色变暗
- 3. opacify($color,$amount):降低颜色透明度

```scss
p {
    height: 30px;
}

.p0 {
    background-color: #5c7229;
}

.p1 {
    /**
    让颜色变亮
    lighten($color,$amount)
    $amount的取值在0%-100%之间
    */
    background-color: lighten($color: #5c7229, $amount: 30%);
}
.p2 {
    /**
    让颜色变暗
    darken($color,$amount)
    $amount的取值在0%-100%之间
    */
    background-color:darken($color: #5c7229, $amount: 15%);
}
.p2 {
    /**
    降低颜色透明度
    opacify($color,$amount)
    $amount的取值在0%-100%之间
    */
    background-color:opacify($color: #5c7229, $amount: 0.5);
}
```

```css
p {
    height: 30px;
}

.p0 {
    background-color: #5c7229;
}

.p1 {
    /**
    让颜色变亮
    lighten($color,$amount)
    $amount的取值在0%-100%之间
    */
    background-color: lighten($color: #5c7229, $amount: 30%);
}
.p2 {
    /**
    让颜色变暗
    darken($color,$amount)
    $amount的取值在0%-100%之间
    */
    background-color:darken($color: #5c7229, $amount: 15%);
}
.p2 {
    /**
    降低颜色透明度
    opacify($color,$amount)
    $amount的取值在0%-100%之间
    */
    background-color:opacify($color: #5c7229, $amount: 0.5);
}
```

## 16.string字符串函数

- 1.quote:添加""
- 2.unquote:去除""

```scss
p {
    &::after{
        //quote:添加""
        content:quote($string: 我是内容);
    }
    //unquote去除""号
    background-color: unquote($string: "#F00");
    z-index: str-length($string: "sass学习");
}
```

```css
p {
  background-color: #F00;
  z-index: 6;
}
p::after {
  content: "我是内容";
}
```

## 17.Math函数

- 1.abs:取绝对值
- 2.ceil:向上取整
- 3.max:取最大值
- 4.random:随机值

```scss
p {
    z-index:abs($number: -15);//去绝对值
    z-index: ceil($number: 5.8);//向上取整
    z-index: max(5,1,6,8);//取最大值8
    opacity: random();//随机0-1
}
```

```css
p {
  z-index: 15;
  z-index: 6;
  z-index: 8;
  opacity: 0.9547892414;
}
```

## 18.list函数

- 1.length:长度
- 2.append:添加

```scss
p {
    z-index: length($list: 12px); //1
    z-index: length($list: 12px 5px 8px); //3
    padding: append(10px 20px, 30px);//10px 20px 30px;
    color: nth($list:red blue green, $n:2); //blue
}
```

```css
p {
  z-index: 1;
  z-index: 3;
  padding: 10px 20px 30px;
  color: blue;
}
```

## 19.map函数

- 1.map-get:取出map中的某个值
- 2.map-keys:获取map中的所有key
- 3.map-values:获取map中的所有值

```scss
$font-size:('small':12px, 'normal':18px, 'large':24px);
$padding:(top:10px, right:20px, bottom:10px, left:30px);
p {
    font-size: map-get($font-size, 'normal');
    @if map-has-key($padding, 'right') {
        padding-right: map-get($padding, 'right');
    }
    &:after {
        content: map-keys($font-size)+" "+map-values($padding)+"";
    }
}
```

```css
p {
  font-size: 18px;
  padding-right: 20px;
}
p:after {
  content: '"small", "normal", "large" 10px, 20px, 10px, 30px';
}
```

## 20.selector函数

- 1.selector-append
- 2.selector-unify

```scss
.header {
    background-color: #ccc;
    content: selector-append('.a', '.b', '.c')+"";//".a.b.c"
    content: selector-unify('a', '.disabled')+"";//"a.disabled"
}
```

```css
.header {
  background-color: #ccc;
  content: ".a.b.c";
  content: "a.disabled";
}
```

## 21.@if

```scss
@mixin triangle($direction:top, $size:30px, $border-color:black) {
    width: 0px;
    height: 0px;
    display: inline-block;
    border-width: $size;
    border-#{$direction}-width: 0;
    @if($direction==top) {
        border-color: transparent transparent $border-color transparent;
        border-style: dashed dashed solid dashed;
    }
    @else if($direction==right) {
        border-color: transparent transparent transparent $border-color;
        border-style: dashed dashed dashed solid;
    }
    @else if($direction==top) {
        border-color: transparent $border-color transparent transparent;
        border-style: dashed solid dashed dashed;
    }
    @else if($direction==bottom) {
        border-color: $border-color transparent transparent transparent;
        border-style: solid dashed dashed dashed;
    }
}
```
## 22.@for

- 1.`@for $i from x to y`:[x,y)
- 2.`@for $i from x through y`:[x,y]

```scss
@keyframes loading {
    0% {
        opacity: 0.3;
        transform: translateY(0px);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px);
    }
    100% {
        opacity: 0.3;
        transform: translateY(0px);
    }
}

#loading {
    position: fixed;
    top: 200px;
    left: 46%;
    span {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #3498db;
        opacity: 0.5;
        border-radius: 50%;
        animation: loading 1s infinite ease-in-out;
        @for $i from 1 to 6 {
            &:nth-child(#{$i}) {
                left: ($i - 1) * 24px;
                animation-delay: 0.2 * ($i - 1)+s;
            }
        }
    }
}
```

```css
@-webkit-keyframes loading {
  0% {
    opacity: 0.3;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    opacity: 0.3;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes loading {
  0% {
    opacity: 0.3;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
  50% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    opacity: 0.3;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
#loading {
  position: fixed;
  top: 200px;
  left: 46%;
}
#loading span {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #3498db;
  opacity: 0.5;
  border-radius: 50%;
  -webkit-animation: loading 1s infinite ease-in-out;
          animation: loading 1s infinite ease-in-out;
}
#loading span:nth-child(1) {
  left: 0px;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
#loading span:nth-child(2) {
  left: 24px;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
#loading span:nth-child(3) {
  left: 48px;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
#loading span:nth-child(4) {
  left: 72px;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
#loading span:nth-child(5) {
  left: 96px;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
```

## 23.@each

```scss
p {
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 10px;
}

$color-list:red green blue turquoise darkmagenta;
@each $color in $color-list {
    $index: index($color-list, $color);
    .p#{$index + 1} {
        background-color: $color;
    }
}
```

```css
p {
  width: 10px;
  height: 10px;
  display: inline-block;
  margin: 10px;
}

.p2 {
  background-color: red;
}

.p3 {
  background-color: green;
}

.p4 {
  background-color: blue;
}

.p5 {
  background-color: turquoise;
}

.p6 {
  background-color: darkmagenta;
}
```

## 24.@while

```scss
$column:12;
@while $column > 0{
    .col-sm-#{$column} {
        width: $column / 12 * 100%;
    }
    $column:$column - 1;
}
```

```css
.col-sm-12 {
  width: 100%;
}

.col-sm-11 {
  width: 91.6666666667%;
}

.col-sm-10 {
  width: 83.3333333333%;
}

.col-sm-9 {
  width: 75%;
}

.col-sm-8 {
  width: 66.6666666667%;
}

.col-sm-7 {
  width: 58.3333333333%;
}

.col-sm-6 {
  width: 50%;
}

.col-sm-5 {
  width: 41.6666666667%;
}

.col-sm-4 {
  width: 33.3333333333%;
}

.col-sm-3 {
  width: 25%;
}

.col-sm-2 {
  width: 16.6666666667%;
}

.col-sm-1 {
  width: 8.3333333333%;
}
```

## 25.@function

```scss
/**
混入mixin和函数function的区别：
    - 1.混入mixin主要是通过传入参数的方式输出多样化的样式，为了可以实现代码复用
    - 2.函数的功能主要是通过传递参数后，经过函数内部的计算，最后@return输出一个值
*/
@function background-linear-gradient($direction, $gradient...) {
    @return linear-gradient($direction, $gradient);
}
body {
    background-image: background-linear-gradient(to right,blue,red,green);
}
```

```css
body {
  background-image: -webkit-gradient(linear, left top, right top, from(blue), color-stop(red), to(green));
  background-image: linear-gradient(to right, blue, red, green);
}
```

## 26.三元表达式

```scss
$theme:'light';
.container {
    background-color: if($theme=='light', '#fff', '#000');
}
```

```css
.container {
  background-color: "#fff";
}
```

## 27.@use

```scss
/**
@use总结：
    - 1.@use引入同一个文件多次，不会重复引入，而@import会重复引入
    - 2.@use引入的文件都是一个模块，默认以文件名作为模块名，可以通过as alias重命名
    - 3.@use引入多个文件时，没个文件都是单独的模块，相同变量名不会覆盖，通过模块名访问，而@import变量会被覆盖
    - 4.@use方式可以通过 @use 'xxx' as * 来取消命名空间，建议不要这么做
    - 5.@use模块内可通过$-或$_来定义私有成原
    - 6.@use模块内变量可通过!default定义默认值，引入时可通过with(...)的方式修改
*/

// @use './mixin/common.scss' with($padding:10px);
@use './mixin/common.scss' as gl with($padding:10px);
body {
    // font-size: gl.$_font-size;//私有变量不能使用
    background-color: gl.$theme;
    padding: gl.$padding;
}
```

```css
body {
  background-color: red;
  padding: 10px;
}
```

## 28.@forward

```scss
/**
@forward总结：
    - 1.导出功能
    - 2.可以配合show/hide指定导出的内容
*/

//普通导出
@forward './mixin/common.scss';
//只导出$theme-color
@forward 'user.scss' show $theme-color;
```

## 29.@at-root

```scss
// .block{
//     width: 100px;
//     &-element{
//         background-color: red;
//         &__modifier{
//             color: blue;
//         }
//     }
//     &-isChecked{
//         display: flex;
//     }
// }
//
// .block{
//     width: 100px;
//     @at-root #{&}-element{
//         background-color: red;
//         @at-root #{&}__modifier{
//             color: blue;
//         }
//     }
//     @at-root #{&}-isChecked{
//         display: flex;
//     }
// }

/**
@at-root(without:...)和@at-root(with:...)的使用
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@supports，如果要跳出这两种，则需要使用@at-root(without:media),@at-root(without:support)
    - 1. all（表示所有）
    - 2. rule (表示常规css)
    - 3. media (表示media)
    - 4. supports (表示supports)
*/
@media screen {
    .parent {
        width: 100px;
        //跳出media
        @at-root (without: media) {
            .child {
                width: 80px;
            }
        }
    }
}
```

```css
@media screen {
  .parent {
    width: 100px;
  }
}
.parent .child {
  width: 80px;
}
```