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 DOM学习第一章 W3C DOM简介
Feb 19 Javascript
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
Aug 07 Javascript
JS实现小米轮播图
Sep 21 Javascript
基于JavaScript实现随机点名器
Feb 25 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 超链接 抓取实现代码
2009/06/29 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
python通过pil模块获得图片exif信息的方法
2015/03/16 Python
Python实现二分查找算法实例
2015/05/26 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
python 每天如何定时启动爬虫任务(实现方法分享)
2018/05/21 Python
解读python如何实现决策树算法
2018/10/11 Python
pandas计数 value_counts()的使用
2019/06/24 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
英国电子专家:maplin
2019/09/04 全球购物
电大本科自我鉴定
2014/02/05 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
主持人开幕词
2015/01/29 职场文书
政工师工作总结2015
2015/05/26 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
商业计划书之服装
2019/09/09 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android