scss - 基本使用

scss - 基本使用

Sass中文网

intro

Sass就是css的预处理器，Scss是Sass3版本中引入的新语法特性

install

yarn add node-sass sass-loader

使用

变量 $

<template>
  <div class="main">main</div>
</template>
 
<style lang="scss" scoped>
$base-color: red;
// 给同一个变量再次赋值时，后赋值的会替换先赋值的
$base-color: blue;
// 变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。
// 通俗点说，!default就像一个备用。
$base-color: blue !default;
 
$side: bottom;
 
.main {
  color: $base-color;
  // 如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
  border-#{$side}: 1px solid $base-color;
}
</style>

嵌套、&

& 用在嵌套代码里，来引用父元素

<template>
  <div class="main">
    main
    <span class="hello">hello</span>
    <span class="main-hello">mainhello</span>
  </div>
</template>
 
<style lang="scss" scoped>
$base-color: red;
 
.main {
  color: $base-color;
  // .hello == & .hello != &.hello !注意空格
  .hello {
    font-size: 40px;
    // 在嵌套的代码块内，可以使用&引用父元素。比如:hover伪类
    &:hover {
      color: blue;
    }
  }
  //&-hello == .main-hello
  &-hello {
    color: yellow;
  }
}
</style>

继承 @extend

SASS允许一个选择器，继承另一个选择器。使用@extend

<template>
  <div class="main">main</div>
</template>
 
<style lang="scss" scoped>
.bg {
  background-color: yellow;
}
 
.main {
  @extend .bg;
  color: red;
}
</style>

混入 @mixin 、@include

Mixin是可以重用的代码块。使用@mixin命令，定义一个代码块，使用@include命令，调用这个mixin。

1. 指定参数
2. 参数指定默认值
   1. 提供了参数，则会使用提供的参数覆盖默认参数的值
3. 指定多个参数
   1. 参数会按定义的顺序依次赋值
   2. 加参数名改变传参顺序

<template>
  <div class="main">main</div>
</template>
 
<style lang="scss" scoped>
@mixin bg {
  background-color: yellow;
}
// 指定参数
@mixin variable($color) {
  color: $color;
  font-size: 40px;
}
// 参数指定默认值
@mixin variable1($color: green) {
  color: $color;
  font-size: 40px;
}
 
@mixin moreVariable($color: green, $size: 40px) {
  color: $color;
  font-size: $size;
}
 
.main {
  color: red;
  @include bg;
  // @include variable(blue);
  // @include variable1();
  // @include variable1(orange); // 提供了参数，则会使用提供的参数覆盖默认参数的值
  // @include moreVariable(blue);
  @include moreVariable($size: 60px); // 加参数名改变传参顺序
}
</style>

引入外部文件

@import

1. 如果需要导入 SCSS 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
   1. 例如，将文件命名为 _color.scss，便不会编译成 _color.css 文件。
   2. @import './test.scss'; 导入的其实是 test.scss 文件
   3. 注意，不可以同时存在添加下划线与未添加下划线的同名文件，否则添加下划线的文件将会被忽略。

// /scss/element-variables.scss
@import './test.scss';
$--color-primary: #1890ff;
 
// /scss/_test.scss
$--test-size: 40px;

<template>
  <div class="main">main</div>
</template>
 
<style lang="scss" scoped>
@import "@/scss/element-variables.scss";
.main {
  color: $--color-primary;
  font-size: $--test-size;
}
</style>

!default，!global

1. !default就像一个备用
2. !global将变量提升为全局变量。
   1. 不到万不得已，不要用它，因为它很简单粗暴，直接破坏了作用域规则，影响全局

语句

条件语句 @if,@else if,@else