vue安装和使用scss及sass与scss的区别详解


Posted in Javascript onOctober 15, 2018

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与scss的区别详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
简单实现js上传文件功能
Aug 21 Javascript
VueJs组件prop验证简单介绍
Sep 12 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 #Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 #Javascript
vue+axios+promise实际开发用法详解
Oct 15 #Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 #Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 #Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 #Javascript
详解ES6 Symbol 的用途
Oct 14 #Javascript
You might like
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
用JavaScript修改CSS属性的代码
2013/05/06 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
Angular2 PrimeNG分页模块学习
2017/01/14 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
Angular4如何自定义首屏的加载动画详解
2017/07/26 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
layui框架与SSM前后台交互的方法
2019/09/12 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
django 控制页面跳转的例子
2019/08/06 Python
pytorch 修改预训练model实例
2020/01/18 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
python自定义函数def的应用详解
2020/06/03 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
python mock测试的示例
2020/10/19 Python
利用CSS3的3D效果制作正方体
2020/03/10 HTML / CSS
HTML5 语音搜索(淘宝店语音搜素)
2013/01/03 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
自愿离婚协议书范本
2015/01/26 职场文书
导游词之千岛湖
2019/09/23 职场文书
导游词之张家界
2019/10/31 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS