sass总结

1. 基本语法

变量声明: $highlight-color: #F90;

$nav-color: #F90;
nav{
    $width: 100px;
    width: $width;
    color: $nav-color
}
// 编译后
nav {
  width: 100px;
  color: #F90;
}

混合器@mixin

// 定义
@mixin rounded-corners() {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
// 使用
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}
// sass最终生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

@mixin vue-flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: $direction;
    /* #endif */
}

2. 一些sass中可能出现的问题的解决办法

1. /deep/报错的解决办法 有时候， 我们需要去手动改变ui框架内部的样式。 这时候， 可以使用>>>或/deep/。 而/deep/有时会报错，>>>不好使。 估计跟loader本身依赖的版本有关系。 这时候， 如果不想进行麻烦的配置， 可以试下::v-deep。

3. 动态样式

使用sass可以预先生成class。然后在使用的时候， 可以直接使用预生成的class样式

// for循环。 注意这里是从0-750  [0, 751)。
@for $i from 0 through 751 {
        .width-#{$i} {
                width: $i + rpx !important;
        }
}

// if逻辑 只要双数和能被5除尽的数
@if $i % 2 == 0 or $i % 5 == 0 {
    // 得出：u-margin-30或者u-m-30
    .u-margin-#{$i}, .u-m-#{$i} {
            margin: $i + rpx !important;
    }
}

// 缩写版本与完整版本。 通过@each去分别处理
@each $short, $long in l left, t top, r right, b bottom {
    // 缩写版，结果如： u-m-l-30
    // 定义外边距
    .c-m-#{$short}-#{$i} {
            margin-#{$long}: $i + rpx!important;
    }
}

完整的样式

@each $short, $long in l left, t top, r right, b bottom {
    // 缩写版，结果如： c-m-l-30
    // 定义外边距
    .c-m-#{$short}-#{$index} {
        margin-#{$long}: $index + px !important;
    }

    // 定义内边距
    .c-p-#{$short}-#{$index} {
        padding-#{$long}: $index + px !important;
    }

    // 完整版，结果如：c-margin-left-30
    // 定义外边距
    .c-margin-#{$long}-#{$index} {
        margin-#{$long}: $index + px !important;
    }

    // 定义内边距
    .c-padding-#{$long}-#{$index} {
        padding-#{$long}: $index + px !important;
    }
}

@each $cl, $res in red #e4393c, orange #ffa500, yellow #edb749, green #28d5ba,
  cyan #3464ff, blue blue, purple purple, white #fff, black #000, gray gray
{
  .c-#{$cl} {
    color: $res !important;
  }
  .c-bg-#{$cl} {
    background: $res !important;
  }
}

4. scss中定义的变量在js中使用

1. 先定义一个scss文件variables.scss。 通过:export就可以把设置的变量导出出去。

$menuText:#bfcbd9;
$sideBarWidth: 210px;

:export {
  menuText: $menuText;
  sideBarWidth: $sideBarWidth;
}

2. 在vue文件中使用 通过import将变量导入。 然后在computed计算属性里将变量返回， 在template模板中就可以使用了。 在scss中只需要直接使用$ + 变量名即可。 当然前提是需要先在scss中引入这个文件， 或者在vue.config.js中全局注册

<template>
  <div>
    {{variables}}
    <div class="test">
      {{variables.menuText}}
      {{variables.sideBarWidth}}
    </div>
  </div>
</template>

<script>
import variables from '@/styles/variables.scss'
export default {
  computed: {
    variables() {
      return variables
    },
  },
};
</script>
<style scoped lang='scss'>
// 在scss中引入其他scss文件import前必须要有@符号。 如果不引入variables.scss。则其定义的变量不可用。
@import '@/styles/variables.scss';
.test {
  color: $menuText;
}
</style>

5. 在vue.config.js中全局引入scss文件

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 引入scss全局变量文件，@是我们设置的别名，执行src目录
        prependData: `@import "~@/styles/variables.scss";`
      }
    }
  },
}

6. 动态改变scss变量的值

比如全局设置一个主题色themeColor, 需要动态改变。 这时就需要用到 setProperty和getPropertyValue方法了

• 设置css变量: document.body.style.setProperty("--tc", "blue")

• js中使用这个css变量: getComputedStyle(document.body).getPropertyValue('--tc')

• css中使用这个css变量: color: var(--tc)

• 删除变量document.body.style.removeProperty('--tc');

theme.scss

:root{
    --tc: red;
}
$tc: var(--tc);

在vue文件中使用

// js函数中改变`--tc`的值
document.body.style.setProperty("--tc", "blue");

// js中获取`--tc`的值
getComputedStyle(document.body).getPropertyValue('--tc');

// style中使用
.test{
    color: var(--tc);
    background: $tc;
}

7. 一些特殊的写法

$sideBarWidth: 210px;
$animation-length: 200;
$animation-length-ms: $animation-length + 0ms;
width: calc(100% - #{$sideBarWidth});
width: calc(100% - 54px);
.c-h\%-#{$index} {
    height: $index * 1%;
}
// 不这样写会报警告
.bg-#{"" + $cl} {
    background: $cls;
}

8. 如何引入scss文件

1. 在.vue这种spa文件中引入， 需要加 ~ @import "~@/styles/mixin.scss";

2. 在js文件中直接引入 import '@/styles/index.scss'