在vue中应用sass，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，逻辑语句

举例说明

/* 自动添加浏览器前缀 */
@mixin prefixer($property, $value, $prefixes: webkit moz) {
  #{$property}: $value;
  @each $prefix in $prefixes {
    @if $prefix == webkit {
      -webkit-#{$property}:#{$value};
    }
    @else if $prefix == moz {
      -moz-#{$property}:#{$value};
    }
    @else if $prefix == o {
      -o-#{$property}:#{$value};
    }
    @else if $prefix == ms {
      -ms-#{$property}:#{$value};
    }
  }
}

@each遍历 if-else同常规

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@for item from 1 through 3 从1到3
#{$i}类型模板字符串
解析为：

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

6，引用：

@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>

效果图：

注意：可以看出继承@extend也会把@include的样式继承下来