SCSS的引入和基本使用

原创已于 2025-04-20 22:30:45 修改 · 693 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scss #前端

于 2025-03-31 11:28:57 首次发布

前端专栏收录该内容

5 篇文章

订阅专栏

一、安装依赖命令：

cnpm i node-sass@^4.14.1 --save-dev
cnpm i sass-loader@^7.3.1 --save-dev
cnpm i style-loader@^3.3.0  --save-dev

二、全局引入：创建styles/inex.scss文件，在main.js中引入：import '@/styles/index.scss'

在vue.congfig.js中配置：

const loader = require("sass-loader");

module.exports = {
    devServer:{
      // 端口号
      port:8088,
      // url地址
      host:'localhost',
      // 项目启动浏览器自动打开
      open:true
    },
    css: {
      loaderOptions: {
        sass: {
          data: `@import "@/styles/index.scss";`  //公共scss文件路径
        }
      }
    }
}

这样就可以全局使用index.scss

三、基本使用：

<template>
  <div id="app">
    <div class="d">
      <p>hello world</p>
      <div class="d1">
        <p>div1</p>
        <a>a标签</a>
      </div>
      <p>测试</p>
    </div>
    <hr />
    <!-- <router-view/> -->
  </div>
</template>

<style lang="scss">
// 定义变量
$highlight-color: #F90;
$lightColor: #ffffff;
$darkColor: #000000;
$redColor : #f00;
$blue-color: blue;
$width:400px;
// 混合器：通过@mixin来使用
@mixin radius {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// #app div p {
//   color: $redColor;
// }

// #app div .d1 {
//   border: 1px solid $blue-color;
// }

// 嵌套书写
#app {
  .d {
    // & > p 子组合选择器，只选择.d直接后代的p标签
    & > p {
      color: $redColor;
    }
    .d1 {
      border: 1px solid $blue-color;
      // 通过变量来定义
      width: $width/2;
      // 混合器：通过@include来使用
      @include radius;
      // p {
      //   color: $orangeColor;
      // }
      // 伪类选择器
      &:hover {
        color: $greenColor;
      }
    }
  }
}

</style>