scss用法整理
    SCSS(Smart Style Sheets) 是一种样式表语言，常常用于与 CSS 配合使用，可以提高 CSS 编写的灵活性和可维护性。以下是一些 SCSS 的用法整理:
    1. 安装 SCSS 环境：类似于 CSS,SCSS 也需要安装环境才能编写和运行。可以使用 npm 或者 yarn 进行安装，例如:npm install sass-loader node-sass。
    2. 创建 SCSS 文件：创建一个新的 SCSS 文件，可以通过在文件名后面加上`.scss` 扩展名来实现，例如:`create-project-name/public/css/style.scss`。
    3. 使用变量：在 SCSS 中使用变量非常常见，可以通过在变量名后面加上指数符号来定义变量，例如:`$blue: #1875e7;`。使用变量可以提高代码的可读性和可维护性。
    4. 计算属性：在 SCSS 中可以使用计算属性来对元素的宽度或高度进行百分比计算，例如:`$var: 4;body {margin: ($var * 2);}`。css变量
    5. 嵌套样式：在 SCSS 中可以通过嵌套样式来定义复杂的样式，例如:`.rounded {border-radius: 5px;}`。
    6. 继承样式：在 SCSS 中可以通过继承样式来继承其他元素的样式，例如:`.class1 {border: 1px solid gainsboro;}`。
    7. mixin 应用：在 SCSS 中可以使用 mixin 来定义扩展样式，例如:`@mixin rounded-corners(argus) {-moz-border-radius: 1px argus!important;-webkit-border-radius: 1px argus!important;border-radius: 1px argus!important;}`。
    8. 条件语句：在 SCSS 中可以使用条件语句来判断样式的显示与否，例如:`@if (1 == 1) {background-color: #00BCD4;}`。
    9. 遍历变量：在 SCSS 中可以使用遍历变量来获取变量的值，例如:`@for $i from 1 to 10 {.border-#{$i} {border: 1px solid hotpink;}}}`.
    以上是一些 SCSS 的用法整理，SCSS 的用法比 CSS 更加灵活，可以根据具体的需求来选择使用不同的语法和工具来提高代码的可读性和可维护性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。