scss常用特性以及进阶使用

最新推荐文章于 2024-09-06 23:33:49 发布

是阿春呀

最新推荐文章于 2024-09-06 23:33:49 发布

阅读量645

点赞数

分类专栏：日常工作文章标签： scss 前端

本文链接：https://blog.csdn.net/weixin_43700384/article/details/121656488

版权

本文介绍了scss的常用特性，如变量、嵌套、引入、混合、继承、操作符和伪类选择器，并探讨了进阶用法，如主题切换，帮助前端开发者提升css编写效率和代码可维护性。

摘要由CSDN通过智能技术生成

scss

scss作为css预处理器，提供变量、嵌套、混合、继承等特性，能够使css书写更有趣和程序化。

scss常用特性

变量

变量可以用于存储需要在css中复用的信息，例如颜色，字体，字号。维持全局的样式统一。

scss书写

<!-- 存储变量表 -->
$primary-color: #ddd;
$border-color: #d3d3d3;
$light-gray-color: #f3f3f3;
$gray-colir: #333;
$medium-font: 16px;
<!-- 实际使用 -->
body {
  font-size: $medium-font;
  color: $primary-color:
}

css效果

<!-- 实际使用 -->
body {
  font-size: 16px;
  color: #ddd;
}

嵌套

处理样式层级问题（不建议过度嵌套，导致css难以维护），用于书写更高可读性css。
scss书写

<style lang="scss" scoped>
.nav {
  color: #ddd;
  p {
      font-size: 14px;
  }
  span {
      font-size: 12px;
  }
  a {
    text-decoration: none;
  }
}
</style>

css效果