sass常用语法，vue中的应用sass

常用语法：

1，变量定义：

$border:1px solid #ccc;
$warning:#ff9900;

2，混入：
返回一段样式，可以加入变量

@mixin ellipsis(){
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

混入的使用
@include mixinName

3,继承：
继承一个选择器所有的样式
用法：
@extend selectorName

4,嵌套

选择器嵌套，秒懂：

.box3 {
  background: red;
  div {
    font-size:20px;
  }
}

属性嵌套：

.box3 {
  background: darken($warning, 30%);//这里是颜色函数，很少用
  div {
    font: {
      size: 20px;
      weight: 600;
    }
  }
}

5，引用：

@import "./../assets/test.scss";

安装：

cnpm i -D -S sass-loader node-sass

配置：

目录：build/webpack.base.conf.js

在rules添加

{
        test: /\.sass$/,
        loaders: ['style', 'css', 'sass']
}

值得一提的是sass/scss文件，sass不使用{},靠缩进，规范不好用，推荐使用.scss

实例：

test.scss

$border:1px solid #ccc;
$warning:#ff9900;
@mixin ellipsis(){
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
@mixin ellipsis_clamp2() {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

test.vue

/* eslint-disable */
<template>
  <div>
    <div class="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse vitae aliquam nihil nemo! Fugit harum, nisi provident temporibus, saepe, assumenda sequi esse ut reprehenderit sit repellendus at? Excepturi, aspernatur sed.
    </div>
    <div class="box1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse vitae aliquam nihil nemo! Fugit harum, nisi provident temporibus, saepe, assumenda sequi esse ut reprehenderit sit repellendus at? Excepturi, aspernatur sed.
    </div>
    <div class="box3">
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque cum corporis quia ipsa tenetur suscipit possimus vero ipsum doloremque provident, totam aspernatur error repellat tempora? Nostrum, illum. Iusto, dignissimos neque?</div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    test () {
    }
  }
}
</script>
<style scoped lang="scss">
@import "./../assets/test.scss";
.box {
  width: 500px;
  color: $warning;
  border: $border;
  @include ellipsis;
}
.box3 {
  background: darken($warning, 30%);
  div {
    @extend .box;
    font: {
      size: 20px;
      weight: 600;
    }
  }
}
</style>
<style>
</style>

效果图：
sass常用语法，vue中的应用sass
注意：可以看出继承@extend也会把@include的样式继承下来

sass常用语法，vue中的应用sass

相关推荐