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 相关文章推荐
jQuery cdn使用介绍
May 08 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
js操作数据库实现注册和登陆的简单实例
May 26 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
获取url中用&amp;隔开的参数实例(分享)
May 28 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
JS实现小星星特效
Dec 24 Javascript
阿望教你用vue写扫雷小游戏
Jan 20 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 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文件
2007/01/04 PHP
php生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
laravel安装zend opcache加速器教程
2015/03/02 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
PHP接收App端发送文件流的方法
2016/09/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
编写Js代码要注意的几条规则
2010/09/10 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
javascript html5摇一摇功能的实现
2016/04/19 Javascript
Bootstrap零基础学习第一课之模板
2016/07/18 Javascript
使用vue.js实现联动效果的示例代码
2017/01/10 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
2018/03/26 Javascript
Node.js连接Sql Server 2008及数据层封装详解
2018/08/27 Javascript
KOA+egg.js集成kafka消息队列的示例
2018/11/09 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[01:02:04]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
通过实例学习Python Excel操作
2020/01/06 Python
京东国际站:JOYBUY
2017/11/23 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
工商学院毕业生自荐信
2013/11/12 职场文书
《长征》教学反思
2014/04/27 职场文书
五一活动标语
2014/06/30 职场文书
劳资员岗位职责
2015/02/13 职场文书
化验室岗位职责
2015/02/14 职场文书
演讲开场白和结束语
2015/05/29 职场文书
2015元旦感言
2015/12/09 职场文书
Java界面编程实现界面跳转
2022/06/16 Java/Android