Vue中＜style scoped lang=“scss“＞的含义

短命女 2024-04-29 00:43 60阅读 0赞

这段代码中的`<style scoped lang="scss">`是HTML和Vue框架结合使用时常见的一个模式，具体含义如下：

*  `scoped`：这是一个Vue.js特有的属性，用来指定样式只应用于当前组件的元素。没有这个属性时，样式会全局应用，可能会影响到其他组件的元素。加上`scoped`属性后，Vue会自动添加一些唯一的属性到当前组件的元素上，并且修改这个`<style>`标签中的CSS规则，使它们只匹配这些被添加了特定属性的元素。这样可以避免样式冲突，确保组件样式的独立性和封装性。
 *  `lang="scss"`：这表示该`<style>`标签中使用的是SCSS语法编写的样式。SCSS是Sass（Syntactically Awesome Stylesheets）的一种语法，它是一种CSS预处理器，提供了许多有用的功能，如变量、嵌套规则、混合宏等，这些功能可以使CSS的编写更加简洁和强大。`lang="scss"`属性告诉Vue的构建系统（如Webpack），在将这个组件编译为最终的HTML和CSS之前，需要先用一个SCSS编译器处理这里的内容。

总之，`<style scoped lang="scss">`意味着你正在为Vue组件定义样式，这些样式只会应用到该组件的元素上，并且是使用SCSS语法编写的。这样的设计既保证了样式的模块化和组件化，又能利用SCSS提供的强大功能。

在使用`<style scoped lang="scss">`的情况下，虽然你指定了语言为SCSS，但你依然可以写普通的CSS语法。SCSS是CSS的一个超集，这意味着任何有效的CSS语法都是有效的SCSS语法。SCSS的设计目的之一就是向后兼容CSS，所以你可以在SCSS文件中直接使用CSS代码。

当你在`<style scoped lang="scss">`标签中写CSS时，这些CSS代码将按照常规CSS的方式工作，同时你也可以利用SCSS提供的额外功能，如变量、嵌套规则、混合宏等，来增强和简化你的样式编写。

简单来说，即使你设置`lang="scss"`，编写普通的CSS代码也是完全没问题的，这使得你可以灵活地决定何时使用SCSS的额外特性。这种设置为你提供了最大的灵活性和兼容性，让你可以在同一个文件中同时使用CSS和SCSS的特性。  
![在这里插入图片描述][1b331b050e95486e86ca3b9a0309aff8.gif_pic_center]

[1b331b050e95486e86ca3b9a0309aff8.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/29/9677e24700ee486b8ae71d3db8c27101.gif