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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
Jun 08 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
浅谈React之状态(State)
Sep 19 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
JS Object构造函数之Object.freeze
Apr 28 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 form 表单传参明细研究
2009/07/17 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
php获取post中的json数据的实现方法
2011/06/08 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
Koa日志中间件封装开发详解
2019/03/09 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python发送Email方法实例
2014/08/21 Python
python调用百度语音识别api
2018/08/30 Python
Python中文件的写入读取以及附加文字方法
2019/01/23 Python
python读取图片任意范围区域
2019/01/23 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
浅谈spring boot 集成 log4j 解决与logback冲突的问题
2020/02/20 Python
单身联谊活动方案
2014/01/29 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
住宅使用说明书
2014/05/09 职场文书
竞选班干部演讲稿100字
2014/08/20 职场文书
党员民主生活会个人整改措施材料
2014/09/16 职场文书
个人四风问题对照检查材料
2014/09/26 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
早会开场白台词大全
2015/06/01 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技