在vue中使用sass的mixin来简化样式代码，提高代码的复用率

原创于 2019-10-17 16:26:14 发布 · 692 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #vue #sass

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何通过Sass的混入(mixin)功能简化样式编写，实现背景颜色及图片的灵活更换，以达到快速更换网站主题的效果。首先，需要安装sass-loader和node-sass依赖，接着在src/style目录下创建minxin.scss文件定义混入，最后在组件样式中引入并使用这些混入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步，安装sass依赖

npm install sass-loader node-sass --save-dev

第二步，通常在src/style文件夹下新建minxin.scss文件

 //背景颜色，更换主题
$bg_color:#25c9d0;
//设置背景图片和大小
@mixin bis($url) { 
	background-image: url($url);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

使用:

 <style lang="scss" scoped>
    @import '../../style/mixin';
    .head_logo{
        width:100px;
        height:100px;
        background:$bg_color;
        @include bis($url);
    }

是不是很简单