.vue文件里怎么写scss?

vue文件里怎么写scss?下面本篇文章给大家介绍一下在vue中使用scss的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

假设你已经用vue-cli初始化好了一个vue项目,并成功运行出默认的欢迎页面:

1.png

安装 node-sass和sass-loader

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

如果出现错误,可以尝试使用淘宝镜像安装解决:

npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装淘宝镜像)

然后使用cnpm 代替npm 安装node-sass和sass-loader。

安装好之后就可以在你的.vue文件中使用了:

首先在<style>标签中加入scss:

<style lang="scss"></style>

下面列举一些比较常用的东西:

假设模板如下:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>hello</p>
    <div class="test1"></div>
    <div class="test2"></div>
  </div>
</template>

1、变量

用$定义变量

$app-background: #d00;
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  background:$app-background;  //可以直接引用
}

假如你的变量定义在了一个scss文件中,用import引入即可

@import './style/variables'

2、@mixin混合器

@mixin divStyle($backgroundColor: #0d0) {
    position: relative;
    margin:0 auto;
    width: 100px;
    height:100px;
    background:$backgroundColor;}.test1{
      @include divStyle()  
  }

用@include引用,有默认值时可以不传值;

编译为:

.test1 {
    position: relative;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background: #0d0;
}

3、@extend继承

.test1 {
    border: 1px solid #333;
}
.test2 {
    @extend .test1;
    background-color: #999;
}
//编译后
.test1, test2 {
  border: 1px solid #333;
}
.test2 {
  background-color: #999;
}

4、属性嵌套也时必用的啊,可以这样写:

#app {
  img{
      width: 200px;
  }
}
//编译为
#app img {
      width: 200px;
}

如果你想要在嵌套的选择器里边应用一个类似于:hover的伪类,就需要用到 & 这个连接父选择器的标识符。

#app {
  p{
      font-size: 16px;
      &:hover {
            color: #999;
        }
  }
}
//编译后:
#app p {font-size: 16px; }
#app p:hover { color: #999; }

更多web前端知识,请查阅 HTML中文网 !!

以上就是.vue文件里怎么写scss?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏