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 相关文章推荐
自己做的模拟模态对话框实现代码
May 23 Javascript
innerHTML与jquery里的html()区别介绍
Oct 12 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
jQuery遍历Form示例代码
Sep 03 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
jquery队列queue与原生模仿其实现方法分享
Mar 25 Javascript
jQuery实现文本展开收缩特效
Jun 03 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
如何在vue中使用jointjs过程解析
May 29 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP实现克鲁斯卡尔算法实例解析
2014/08/22 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
Bootstrap每天必学之表单
2015/11/23 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
Cpy和Python的效率对比
2015/03/20 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
德国圣伯纳德草药屋:Kräuterhaus Sanct Bernhard(有中文站)
2018/08/05 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
自荐信怎么写呢?
2013/12/09 职场文书
工地资料员岗位职责
2013/12/31 职场文书
《花的勇气》教后反思
2014/02/12 职场文书
二年级小学生评语
2014/04/21 职场文书
上海世博会口号
2014/06/19 职场文书
公司领导班子对照材料
2014/08/18 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书