关于scss中@mixin和@variables的学习笔记

目录

• 一、`@mixin`
• • 1. 简介
  • • （1）作用
    • （2）与`extend`指令比较
  • 2. 使用
  • • （1）定义`@mixin`
    • （2）使用`@mixin`
    • （3）传递参数
• 二、variables
• • 1. 作用
  • 2. 使用
  • • （1）定义变量
    • （2）使用

一、@mixin

1. 简介

（1）作用

提高代码的重复使用率并简化的代码（css样式上）。

（2）与extend指令比较

@extend指令：通过继承从而简化了代码，但是它也有缺陷之处，首先是不够灵活，其次它还会将你不需要的其他地方具有相同类名的样式都继承过来。

@mixin指令：另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数，因此比@extend更加灵活和强大。

2. 使用

（1）定义@mixin

通过@mixin加名称的方式就可以定义一个Mixins模块，在模块内可以包含任何在 CSS 和 Sass 中有效的内容。

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}

（2）使用@mixin

通过@include来调用具有相同名称的mixin模块

.button-green {  
    @include button;  
    background-color: green;  
}

// 在mixin模块的定义中还可以包含其他的mixin
@mixin button-blue {  
    @include button;  
    @include link;  
}

（3）传递参数

Mixins可以接收和使用参数。对于之前的button模块，增加了名为background的参数并将其传递给模块。

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

.button-green {  
    @include button(green);  
}

二、variables

1. 作用

全局变量的使用

2. 使用

（1）定义变量

// 这是一个存放变量的scss文件 "@/styles/_variables.scss"
// color font ...
$cf-light: #B6B6B6;
$cf-gray: #8C8C8C;
$cf-med: #505050;
$cf-dark: #333333;
$cf-highlight: #1775F0;

（2）使用

<template>
  <div class="notice">111</div>
</template>

<style lang="scss" scoped>
//引入文件
@import "@/styles/_variables.scss";
.notice {
  color: $cf-highlight;
}
</style>

参考：
https://www.jianshu.com/p/2f2106f3a92a
https://segmentfault.com/a/1190000018419357?utm_source=tag-newest