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的AutoComplete插件
May 04 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
Jun 14 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
jQuery实现三级联动效果
Mar 02 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
ES6 fetch函数与后台交互实现
Nov 14 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
express启用https使用小记
May 21 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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
xajax写的留言本
2006/11/25 PHP
服务器web工具 php环境下
2010/12/29 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
表格展示利器 Bootstrap Table实例代码
2017/09/06 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
js实现左右轮播图
2020/01/09 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Python随机生成手机号、数字的方法详解
2017/07/21 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
佳能英国官方网站:Canon UK
2017/08/08 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
预备党员政审材料
2014/02/04 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
天网工程实施方案
2014/03/26 职场文书
2014年教师节寄语
2014/08/11 职场文书
党的生日活动方案
2014/08/15 职场文书
践行三严三实心得体会
2014/10/13 职场文书
2016新年慰问信范文
2015/03/25 职场文书
Python入门学习之类的相关知识总结
2021/05/25 Python
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技