标签：scss 基本 include color 参数 使用 main size

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

标签：scss,基本,include,color,参数,使用,main,size
来源： https://www.cnblogs.com/zc-lee/p/15401867.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。