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 相关文章推荐
javascript 跨浏览器开发经验总结(五) js 事件
May 19 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
Aug 10 Javascript
layUI实现前端分页和后端分页
Jul 27 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 Javascript
LayUi数据表格自定义赋值方式
Oct 26 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
基于JavaScript实现轮播图效果
Jan 02 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
图书管理程序(二)
2006/10/09 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
JavaScript constructor和instanceof,JSOO中的一对欢喜冤家
2009/05/25 Javascript
网络图片延迟加载实现代码 超越jquery控件
2010/03/27 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[30:51]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第一局
2016/03/04 DOTA
python随机数分布random测试
2018/08/27 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Python中无限循环需要什么条件
2020/05/27 Python
浅谈python 类方法/静态方法
2020/09/18 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
大学生文员专业个人求职信范文
2014/01/05 职场文书
小学生自我评价范文
2014/01/25 职场文书
小学语文国培感言
2014/03/04 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
销售员自我评价
2015/03/11 职场文书
推荐信范文大全
2015/03/27 职场文书