Vue---Vue集成Sass

Scss与Sass

SCSS 是 Sass3 引入的新语法而已，其语法完全兼容 CSS3。两者不同之处：
1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，
   而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

//Sass语法：
$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color


//SCSS语法
$font-stark Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Vue使用Sass

为了防止安装报错，先设置sass的数据源

npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

1.npm安装

npm install node-sass sass-loader --save

2.创建test.scss文件

$mainColor : red;
$fontSize : 30px;

.search{
    height: 200px;
    width: 400px;
    background-color: black;
    &:hover{                //通过 $ 符号选中父级，进行设置悬停样式
        cursor: pointer;
    }
    p.name{
        color : $mainColor;
        font-size: $fontSize;
    }
}

3.页面中导入 test.scss

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style lang="scss" type="text/scss">
import '@/assets/test.scss'
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

猜你喜欢