scss入门

什么叫sass?

Sass 是一个 CSS 的扩展，它在 CSS 语法的基础上，允许您使用变量 (variables), 嵌套规则 (nested rules), 混合 (mixins), 导入 (inline imports) 等功能，令 CSS 更加强大与优雅。使用 Sass 以及 Compass 样式库 有助于更好地组织管理样式文件，以及更高效地开发项目。

什么叫scss?

  scss是sass推出的新语法，全写是 Sassy css ，是sass的超集，具有更友好的开发规范和方法。格式良好的css代码。

如何使用

1在vue中使用

安装以下依赖

//webpack解析loader 注意版本别使用最高，会报错的，我使用的是8.0.0报错的，7.3.1可用。
npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

配置webpack

//在build文件夹下的webpack.base.conf.js的rules里面添加配置
//scss解析方式
{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

在代码中使用

<style lang="scss">

</style>

在vue项目全局中引入scss

安装依赖sass-resources-loader

//引入资源依赖解析loader
npm install sass-resources-loader --save-dev

修改build中的utils.js

//将 scss: generateLoaders('sass')
//改为
scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
        //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/style/common.scss')
    }
  }
)

一些具体的语法可参考https://www.jianshu.com/p/2c2fe4d65cea