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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
js微信支付实现代码
Dec 22 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
nodemon实现Typescript项目热更新的示例代码
Nov 19 Javascript
react+antd 递归实现树状目录操作
Nov 02 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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使用Pear发送邮件(Windows环境)
2016/01/05 PHP
PHP中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
php使用curl模拟浏览器表单上传文件或者图片的方法
2018/11/10 PHP
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[01:48:04]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第一场 2月7日
2021/03/11 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
Python实用库 PrettyTable 学习笔记
2019/08/06 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python中如何引入第三方模块
2020/05/27 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
历史专业个人求职信范文
2013/12/07 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android
MongoDB支持的索引类型
2022/04/11 MongoDB
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis