SCSS快速入门

在使用scss之前，我们要知道Sass、Scss有什么不同？

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。也就是说，任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件，官方解释。

传统的css文件缺失变量等概念，导致需要书写的重复的代码很多。我写JS的习惯是遇见重复的代码就要思考是否可以抽出来写成一个可复用的方法，但css中不存在变量函数等概念，这时我发现的一个css的预编译利器——scss。

scss具有简单易上手等特点，下面开始编写第一个scss文件。

准备工作

写在最前面：有小伙伴可能不太会部署前端环境，这里我将代码上传到github中，有需要的小伙伴可以把代码下载下来对照着看SCSS代码与编译后的CSS代码。

scss需要经过编译为css才能被浏览器识别，我这里只做一个小demo所以不上vue-cli，直接使用webpack进行编译。

首先安装css-loader、style-loader、node-sass、sass-loader。

npm install css-loader style-loader --save-dev
npm install node-sass sass-loader --save-dev

然后在webpack.config.js配置文件中添加对应的loader,完整的配置图如下。

const path = require("path");
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
    entry: './webapp/App.js',
    output: {
        filename: 'App.js',
        path: path.resolve(__dirname, './dist')
    },
	module: {
		rules: [
            {
                test: /\.scss/,
                use: ['style-loader', 'css-loader','sass-loader']
            },
			{
				test: /\.vue$/,
				use: 'vue-loader'
			}
		]
	},
	plugins: [
		new VueLoaderPlugin()
	],
	mode: "production"
}

创建一个App.scss文件，接着在入口文件中引入。

import './App.scss';

后面我们将在App.scss中编写scss代码。

正式开始

1.使用变量

SCSS中的变量以$开头。

$border-color:#aaa; //声明变量
.container {
$border-width:1px;
    border:$border-width solid $border-color; //使用变量
}

上述例子中定义了两个变量，其中$bord$