扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
vue中scss、sass和scss三者的区别是什么?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联建站致力于互联网品牌建设与网络营销,包括成都做网站、网站设计、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。创新互联建站为不同类型的客户提供良好的互联网应用定制及解决方案,创新互联建站核心团队10余年专注互联网开发,积累了丰富的网站经验,为广大企业客户提供一站式企业网站建设服务,在网站建设行业内树立了良好口碑。1. 安装依赖:npm install node-sass sass-loader -D
2. webpack.base.conf.js文件
module: { { //手动添加这一条,相当于是编译识别sass! test: /\.scss$/, loaders: ["style", "css", "sass"]} }
3. 在.vue文件中使用
下面看下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三者的区别是什么问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ:244261566 版权所有 备案号:蜀ICP备19037934号
微信二维码
移动版官网