scss - 基本使用
scss - 基本使用
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。
- 指定参数
- 参数指定默认值
- 提供了参数,则会使用提供的参数覆盖默认参数的值
- 指定多个参数
- 参数会按定义的顺序依次赋值
- 加参数名改变传参顺序
<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
- 如果需要导入 SCSS 文件,但又不希望将其编译为 CSS,只需要在文件名前添加下划线,这样会告诉 Sass 不要编译这些文件,但导入语句中却不需要添加下划线。
- 例如,将文件命名为 _color.scss,便不会编译成 _color.css 文件。
- @import './test.scss'; 导入的其实是 test.scss 文件
- 注意,不可以同时存在添加下划线与未添加下划线的同名文件,否则添加下划线的文件将会被忽略。
// /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
- !default就像一个备用
- !global将变量提升为全局变量。
- 不到万不得已,不要用它,因为它很简单粗暴,直接破坏了作用域规则,影响全局
语句
条件语句 @if,@else if,@else
Lee2