sass教程高阶使用：1定义变量2 继承使用@extend 3 混入@mixin和@include配合使用 5 判断@if 6 屏幕尺寸变化 @media使用

 "sass": "^1.77.4",
    "sass-loader": "^14.2.1",

使用之前先安装这两个插件 npm install sass sass-loader;

1定义使用变量

 $color: red;

  $aside-r: right;

<template>
  <div class="home-index">
    <h4>scss 1定义使用变量</h4>
    <div>这是第一个</div>
    <span>这是第2个</span>
  </div>
</template>
<style lang="scss" scoped>
 
//定义在最外面的全局变量，定义在某一个类里面成为局部变量
.home-index {
  $color: red;
  $aside-r: right;
  font-weight: 600;

  div {
    color: $color;
    display: flex;
    float: $aside-r;
  }
  span {
    display: block;
    color: blue;
    margin-#{$aside-r}: 20px;
  }
}
</style>

2 继承使用@extend

首先定义一个空的class  然后后面应用 

.flex-kong {
    display: flex;
    align-items: center;
    justify-content: center;
  }

<template>
  <div class="home-index">
    <h4>scss 2 继承使用@extend</h4>
    <div>
      <ul>
        <li
          v-for="item in Array.from({ length: 6 }).map((el, inde) => {
            return { aa: '文本', bb: 'byd' };
          })"
        >
          <span> {{ item.aa }}</span> <span> {{ item.aa }}</span>
        </li>
      </ul>
    </div>

    <span
      v-for="item in Array.from({ length: 6 }).map((el, inde) => {
        return { aa: '文本', bb: 'byd' };
      })"
    >
      <div>{{ item.bb }}</div>
      <div>{{ item.bb }}</div>
    </span>
  </div>
</template>
<style lang="scss" scoped>
@import "./HomeViewChild3.scss";

.home-index {
  .flex-kong {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  div {
    ul {
      margin: 20px;
      @extend .flex-kong;
    }
  }
  span {
    color: blue;
    @extend .flex-kong;
  }
}
</style>

3 @mixin和@include配合使用

<template>
  <div class="home-index">
    <h4>scss 3 @mixin和@include配合使用</h4>
    <div>
      <ul>
        <li>
          <div>11</div>
          <div>22</div>
        </li>
        <li>
          <div>11</div>
          <div>22</div>
        </li>
        <li>
          <div>11</div>
          <div>22</div>
        </li>
        <li>
          <div>11</div>
          <div>22</div>
        </li>
        <li>
          <div>11</div>
          <div>22</div>
        </li>
      </ul>
    </div>

    <span>
      <div>333</div>
      <div>444</div>
      <div>555</div>
      <div>666</div>
      <div>777</div>
    </span>
  </div>
</template>
<style lang="scss" scoped>
@import "./HomeViewChild3.scss";

.home-index {
  div {
    ul {
      margin: 20px;
      padding: 20px;
      //1 不传参数
      @include flexRowCenter;
    }
  }
  span {
    //2 传参 如果不传递参数，就是用默认测试
    //@include flexRowCenterParams;
    @include flexRowCenterParams(column, center, center);
  }
}
</style>

HomeViewChild3.scss

可以不传递参数。可以传递参数，

@mixin flexRowCenter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
}
//使用变量参数
@mixin flexRowCenterParams($dir:row,$ali:start,$jus:start,){
  display: flex;
  flex-direction: $dir;
  align-items: $ali;
  justify-content: $jus;
  border: 1px solid rgb(113, 16, 240);
}

4 @if

HomeViewChild3.scss

@mixin fontWeight($weight:nomal){
  @if($weight==bold){
    font-weight: bold;
  }
  @else if($weight==bolder){
    font-weight:bolder
  }
  @else if($weight==lighter){
    font-weight:lighter
  }
  @else if($weight){
    font-weight:$weight
  }
  @else{
    font-weight:nomal
  }
}

<template>
  <div class="home-index">
    <h4>scss 5 @if/h4>
    <div>
      <ul>
        <li>
          <div>11</div>
          <div>22</div>
        </li>
        <li>
          <div>11</div>
          <div>22</div>
        </li>
      </ul>
    </div>

    <span>
      <div>333</div>
      <div>444</div>
    </span>
  </div>
</template>
<style lang="scss" scoped>
@import "./HomeViewChild3.scss";
.home-index {
  div {
    ul {
      margin: 20px;
      padding: 20px;
      @include fontWeight(100);
    }
  }
  span {
    @include fontWeight(bold);
  }
}
</style>

5 @media使用

就是当电脑屏幕尺寸变化到一定程度（比如下面宽度小于750px） 重写css样式布局

<style lang="scss" scoped>
.home-index {
  div {
    ul {
      margin: 20px;
      padding: 20px;
      @include fontWeight(100);
    }
  }
  span {
    @include fontWeight(bold);
  }
}

@media screen and (max-width: 750px) {
  //意思就是屏幕尺寸小于750px时候，使用下面的样式
  .home-index {
    div {
      ul {
      }
    }
    span {
    }
  }
}
</style>