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获取textarea中的光标位置
May 06 Javascript
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
读jQuery之十一 添加事件核心方法
Jul 31 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
详解JavaScript的数据类型以及数据类型的转换
Apr 20 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
vue父子模板传值问题解决方法案例分析
Feb 26 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 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP MSSQL 存储过程的方法
2008/12/24 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
php+html5使用FormData对象提交表单及上传图片的方法
2015/02/11 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
Python中使用ElementTree解析XML示例
2015/06/02 Python
python进阶之多线程对同一个全局变量的处理方法
2018/11/09 Python
django-allauth入门学习和使用详解
2019/07/03 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Python修改列表值问题解决方案
2020/03/06 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Python读取yaml文件的详细教程
2020/07/21 Python
python关于倒排列的知识点总结
2020/10/13 Python
如何将Pycharm中调整字体大小的方式设置为&quot;ctrl+鼠标滚轮上下滑&quot;
2020/11/17 Python
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
创业计划书如何编写
2014/02/06 职场文书
信息员培训方案
2014/06/12 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
小型婚礼主持词
2015/06/30 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
anaconda python3.8安装后降级
2021/06/11 Python
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA