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 相关文章推荐
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
Apr 16 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
angular 服务随记小结
May 06 Javascript
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 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可生成缩略图的文件上传类实例
2014/12/17 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
js左右弹性滚动对联广告代码分享
2014/02/19 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
2018/04/17 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
React路由鉴权的实现方法
2019/09/05 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
[44:30]完美世界DOTA2联赛PWL S2 GXR vs Magma 第一场 11.25
2020/11/26 DOTA
python制作一个桌面便签软件
2015/08/09 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python中表示字符串的三种方法
2017/09/06 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
Python threading的使用方法解析
2019/08/28 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
Mountain Warehouse波兰官方网站:英国户外品牌
2019/08/29 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
小米官方旗舰店:Xiaomi
2020/08/07 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
环保倡议书400字
2014/05/15 职场文书
团支部推优材料
2014/05/21 职场文书
单身申明具结书
2015/02/26 职场文书
转正申请报告格式
2015/05/15 职场文书
化工生产实习心得体会
2016/01/22 职场文书
民事调解协议书
2016/03/21 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL