scss使用总结

scss使用总结

前言

less 和 sass 是两种 css 预编译语言，其目的是为了更快、更结构的编写 css 文件，是一种强大的 css 编译语言，都能使用 变量、运算符、判断、方法等等。
先有的 sass 后有的 scss， scss 比 sass 写法更严谨

scss中的& 代指父类， 其样式的优先级和不用&的优先级一样，

.icon {
    &:hover {
    /* :hover 样式 */
    }
    & .icon-text {
    
    }
}

一. ccss中的变量： $

$变量名： 变量值

在scss中的变量是以$开头的，可以自定义相应的颜色， 长度等。
但是， csss定义的变量也是有作用域的， 内部声明的变量只能在内部使用。
在变量后添加 !global 就可以使内部的变量在外部使用

<style lang="scss" scoped>
  $white: #FFFFFF;
  $green: #5A8DF7;
  //$blake: #444444;
  .test-container {
    height: 10px;
    width: 20px;
    /*background-color: red;*/
    & .text {
      /*background-color: #79C431;*/
      $blake: #444444 !global;
    }
    .text {
      width: 100%;
      height: 100%;
      background-color: $blake;
    }
  }
</style>

但是即使添加了！global， 作用域也最多只能在这个style标签中。

但是我们有的时候需要全局来定义一些scss的变量来方便我们的使用，

如何在vue-cli3 中应用scss全局变量？

首先需要安装一个开发插件：sass-resources-loader

npm i sass-resources-loader --save-dev

然后在我们的src/assets/styles 目录下新建_variable.scss

定义我们的变量
然后在我们的vue.config.js中添加配置

const webpack = require("webpack");
module.exports = {
  assetsDir: '',
  publicPath: '/room/',
  productionSourceMap: process.env.ENV_VAR !== 'production',
  css: {
    sourceMap: process.env.ENV_VAR !== 'production',
    loaderOptions: {
      sass: {
        data: `
          @import "~@/assets/styles/_variable.scss";
        `
      }
    }
  },
}

然后就可以在每个组件直接使用了

嵌入字符串

#{ 变量 }
类似 ES6 中模板字符串中的${ 变量 }
#{} 中是可以插入任意东西的，这里只用到了插入变量，还可以插入方法等

<style lang="scss" scoped>
  $white: #FFFFFF;
  $green: #5A8DF7;
  //$blake: #444444;
  $commonWidth: 44;
  .test-container {
    height: #{$commonWidth}px;
    width: 20px;
    /*background-color: red;*/
    & .text {
      /*background-color: #79C431;*/
      $blake: #444444 !global;
    }
    .text {
      width: 100%;
      height: 100%;
      background-color: $theme-color;
    }
  }
<style>

@import 功能

可以使用@import将多个文件结合在一起， 有了这个功能就可以拆分scss 文件， 更加结构化， 便于维护。
需要注意的是: 拆分成多个文件的时候，以 _开头命名的文件，不会被像 phpStorm 中的 file watcher 自动预编译成css文件，less 没有这效果，在这一点上 scss 很不错。