vue scss

作者：冫LOVE灬丶棒棒发布日期:2025-08-16 浏览:131

<template>
  <div class="example">
    <h1>Hello Vue with SCSS</h1>
    <p>This is a paragraph styled with SCSS.</p>
  </div>
</template>

<script>
export default {
  name: 'ScssExample'
}
</script>

<style lang="scss">
.example {
  h1 {
    color: #42b983;
    font-size: 2em;
  }

  p {
    color: #666;
    font-size: 1.2em;
  }
}
</style>

解释说明：

Template部分:
- 定义了一个简单的HTML结构，包含一个<h1>标题和一个<p>段落。
Script部分:
- 使用Vue的单文件组件格式，定义了一个名为ScssExample的组件。
Style部分:
- 使用<style lang="scss">标签来引入SCSS语法。
- .example类选择器用于包裹整个组件的内容。
- 在SCSS中，通过嵌套的方式简化了CSS代码，使得样式更易于维护。例如，h1和p的选择器被嵌套在.example内，表示这些样式只应用于.example下的h1和p元素。

这样，你就可以在Vue项目中使用SCSS来编写更简洁、更易维护的样式代码。

上一篇：vue项目创建

下一篇：vue3 router.push