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 相关文章推荐
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
给js文件传参数(详解)
Jul 13 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
详解Js中的模块化是如何实现的
Oct 18 Javascript
Vue仿支付宝支付功能
May 25 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
Jan 21 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 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
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js点击选择文本的方法
2015/02/09 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
javascript实现简单的可随机变色网页计算器示例
2016/12/30 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
2017/01/04 Javascript
Bootstrap输入框组件使用详解
2017/06/09 Javascript
浅谈js中的this问题
2017/08/31 Javascript
[02:51]DOTA2英雄基础教程 艾欧
2014/01/13 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
python中return如何写
2020/06/18 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
电子商务专业学生的学习自我评价
2013/10/27 职场文书
教师自我鉴定范文
2013/11/10 职场文书
家长评语大全
2014/01/22 职场文书
结婚喜宴主持词
2014/03/14 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
师范生见习总结范文
2015/06/23 职场文书
Python面向对象之内置函数相关知识总结
2021/06/24 Python
logback 实现给变量指定默认值
2021/08/30 Java/Android
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python