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

左手的ㄟ右手 2021-09-17 08:08 644阅读 0赞

**常用语法：**

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>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]  
注意：可以看出继承@extend也会把@include的样式继承下来

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIwNjk0OQ_size_16_color_FFFFFF_t_70]: /images/20210813/fb5292c283a84b6291ac35a61d027a70.png