一, 首先说明 Sass 和 SCSS 的区别.
1, 异同: 1)简言之可以理解 SCSS 是 Sass 的一个升级版本, 完全兼容 Sass 之前的功能, 又有了些新增能力. 语法形式上有些许不同, 最主要的就是 Sass 是靠缩进表示嵌套关系, SCSS 是花括号
2)文件扩展名不同, Sass 是以 ".sass" 后缀为扩展名, 而 SCSS 是以 ".scss" 后缀为扩展名
3)语法书写方式不同, Sass 是以严格的缩进式语法规则来书写, 不带大括号 ({}) 和分号(;), 而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似.
- //Sass
- .father
- width:100px;
- .son
- width:50px;
- //SCSS
- .father{
- width:100px;
- .son{
- width:50px;
- }
- }
2, SCSS 功能很强大的样子, 能做运算, 写函数啥的, 但是我只是作为语法糖用而已, 只看了些基础功能
我个人常用的功能有:
嵌套
变量 $color : #111111;
混入 @mixin
继承 @extend
3, 一个关于 @mixin,@extend,%placeholder 的适用场景总结
mixin 可以传变量
extend 不可以传变量, 相同样式直接继承, 不会造成代码冗余; 基类未被继承时, 也会被编译成 CSS 代码
placeholder 基类未被继承时不会被编译成 CSS 代码
二,
1, 开始在 vue 项目中使用 Sass, 在命令行输入一下命令进行安装(使用 Git 命令行要用 shift+insert 进行粘贴否则粘贴不上)
- cnpm install node-Sass --save-dev // 安装 node-Sass
- cnpm install Sass-loader --save-dev // 安装 Sass-loader
- cnpm install style-loader --save-dev // 安装 style-loader 有些人安装的是 vue-style-loader 其实是一样的!
2. 这个时候你打开 build 文件夹下面的 webpack.base.config.JS
把里面的 module 改成这样的
- module: {
- rules: [
- {
- test: /\.vue$/,
- loader: 'vue-loader',
- options: vueLoaderConfig
- },
- {
- test: /\.JS$/,
- loader: 'babel-loader',
- include: [resolve('src'),
- resolve('test')]
- },
- {
- test: /\.(PNG|jpe?g|gif|svg)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000,
- name: utils.assetsPath('img/[name].[hash:7].[ext]')
- }
- },
- {
- test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
- loader: 'url-loader',
- options: {
- limit: 10000,
- name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
- }
- },
- { // 从这一段上面是默认的! 不用改! 下面是没有的需要你手动添加, 相当于是编译识别 Sass!
- test: /\.SCSS$/,
- loaders: ["style", "css", "sass"]
- }
- ]
- }
3. 在需要用到 Sass 的地方添加 lang=SCSS
- <style lang="scss" scoped=""type="text/css">
- // 你的 Sass 语言 $primary-color: #333;
- body {
- color: $primary-color; // 编译后就成了 color:#333; 类似于 JS 的变量!
- }
- </style>
Sass 的一些其它用法可以查看官网!
来源: http://www.bubuko.com/infodetail-3009424.html