vue:style标签中的scoped属性(作用域)和lang属性的介绍

本文深入探讨了CSS预处理器的概念及其在Web开发中的应用,包括SCSS与SASS的区别,以及如何通过scoped属性实现样式的局部作用域,提高代码的可维护性和复用性。

1、 什么是CSS预处理器

CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等,总之都是用来实现样式的。

2、lang

因此lang的属性可选:scss(sass)、less等等
即:<style lang="scss">

3、scss和sass的区别

scss是sass的一个升级版本,两者都是用来实现样式的,只是语法有各自的不同点。
注明:使用这个lang的属性需要安装scss(sass)

4、scoped属性

scoped是指定样式的局部作用域。
在vue中:App.vue相当于根容器,不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped,代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值