vue安装和使用scss及sass与scss的区别详解
2018-10-15 09:57
956 查看
1. 安装依赖:npm install node-sass sass-loader -D
2. webpack.base.conf.js文件
module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} }
3. 在.vue文件中使用
<style scoped lang="scss"> .box{ width: 100%; :hover{ color: red; } } </style>
下面看下sass与scss的区别
用了很久css预编译器,但是一直不太清楚到底用的sass还是scss,直到有天被问住了有点尴尬,找了个教程撸了遍==。。。
1.异同:简言之可以理解scss是sass的一个升级版本,完全兼容sass之前的功能,又有了些新增能力。语法形式上有些许不同,最主要的就是sass是靠缩进表示嵌套关系,scss是花括号
//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代码
总结:
以上所述是小编给大家介绍的vue安装和使用scss及sass与scss的区别详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- vue中使用scss, 小记~安装sass-loader
- 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
- webpack+vue 构建项目步骤并且使用sass 安装配置
- 详解使用nodeJs安装Vue-cli
- 在vue中安装使用vux的教程详解
- 详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
- vue项目安装sass/scss
- vue安装和使用scss
- Sass/SCSS(关系,安装,webstorm配置编译,使用,语法)
- vue-cli webpack在node环境下安装使用详解
- 详解在vue-cli项目中安装node-sass
- vue 安装 sass,scss,less
- 在vue项目中使用Sass/Scss(视窗环境)
- 在 vue-cli v3.0 中使用 SCSS/SASS的方法
- 基于vue中css预加载使用sass的配置方式详解
- 详解如何在vue中使用sass
- rsync 安装使用详解
- Linux系统中rar、unrar命令安装和使用详解
- rpm命令|rpm安装|rpm卸载|rpm使用|rpm删除 Linux 中 RPM 命令参数使用详解
- 在Linux上安装使用 VMware Workstation 7 详解