scss使用总结

scss使用总结

前言

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

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

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

一. ccss中的变量： $

$变量名： 变量值

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

但是即使添加了！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 中模板字符串中的${ 变量 }
#{} 中是可以插入任意东西的，这里只用到了插入变量，还可以插入方法等