当前位置: 首页 > 编程笔记 >

sass 套料深度

弓智明
2023-03-14
本文向大家介绍sass 套料深度,包括了sass 套料深度的使用技巧和注意事项,需要的朋友参考一下

示例

嵌套是一项非常强大的功能,但应谨慎使用。它可以非常容易和快速地发生,您可以开始嵌套并继续进行嵌套,嵌套或嵌套中的所有子代。让我示范一下:

// SCSS
header {
  // [css-rules]

  .holder {
    // [css-rules]

    .dropdown-list {
      // [css-rules]

      ul {
        // [css-rules]

        li {
          margin: 1rem 0 0 1rem;
        }
      }
    }
  }
}

// 最后一条规则的CSS输出
header .holder .dropdown-list ul li {
  margin: 1rem 0 0 1rem;
}

问题

特异性

在li从上面的例子中有一个margin组。假设我们要稍后在媒体查询中覆盖它。

@media (max-width: 480) {

  // 不管用
  .dropdown-list ul li {
    margin: 0;
  }

  // 将工作
  header .holder .dropdown-list ul li {
    margin: 0;
  }
}

因此,由于嵌套太深,因此每当要覆盖某个值时,都必须再次嵌套深。更糟糕的是,这通常是规则!important要使用的地方。

@media (max-width: 480) {

  // BIG NO-NO,不要这样做
  .dropdown-list ul li {
    margin: 0 !important;
  }

为什么!important-rule是个坏主意

您应该以一种很好的方式编写SCSS,以至于这些变通方法甚至根本不需要。!important在这样一个较小的问题上使用,将使您陷入困境!

可重用性

这与特异性问题相当相似,但值得单独指出。如果您对按钮或什至是下拉菜单等样式进行设置,则可能需要在页面上的其他地方重用这些样式。

嵌套得太深,您的样式将只绑定到位于最外部父元素内的元素(位于SCSS顶部的元素)。这将导致您复制样式并将其再次粘贴到其他位置。可能在其他嵌套规则中。

您的样式表将变得越来越大,并且难以维护。

您应该嵌套多深?

大多数样式指南将最大深度设置为2。通常,这是一个很好的建议,因为在极少数情况下,您想嵌套得更深。大多数时候,2就足够了。

 类似资料:
  • 本文向大家介绍什么样的资料不适合深度学习?相关面试题,主要包含被问及什么样的资料不适合深度学习?时的应答技巧和注意事项,需要的朋友参考一下 答: (1) 数据集太小,数据样本不足时,深度学习相对于其他机器学习算法,没有明显优势; (2) 数据集没有局部相关性,目前深度学习表现较好的领域是图像识、语音、自然语言处理等领域,这些领域的一个共性是局部相关性。图像中像素组成物体,语音信号中音位组合成单词,

  • 在 v4.3.0之前本项目都是基于node-sass进行构建的,但node-sass底层依赖 libsass,导致很多用户安装的特别的困难,尤其是 windows 用户,它强制用户在windows环境中必须安装python2和Visual Studio才能编译成功。 所以为了解决这个问题,本项目在 v4.3.0修改为dart-sass进行构建,它能在保证性能的前提下大大简化用户的安装成本。通过这个

  • 变量 (Variables) 您可以使用表中列出的以下SASS变量来更改组件的样式。 Sr.No. 名称和描述 类型 默认值 1 $abide-inputs 输入中包含错误样式。 Boolean true 2 $abide-labels 标签中包含的错误样式。 Boolean true 3 $input-background-invalid 设置无效文本输入的背景颜色。 Color $alert-

  • 描述 (Description) 您可以使用SASS参考更改组件的样式。 变量 (Variables) 下表列出了项目设置文件中的SASS变量,该变量使该组件的默认样式得以自定义。 Sr.No. 名称和描述 类型 默认值 1 $tooltip-background-color 它表示工具提示的默认背景颜色。 Color $black 2 $tooltip-color 它表示工具提示的默认字体颜色。

  • 描述 (Description) 您可以使用SASS参考更改组件的样式。 变量 (Variables) 下表列出了项目设置文件中的SASS变量,该变量使该组件的默认样式得以自定义。 Sr.No. 名称和描述 类型 默认值 1 $progress-height 它代表进度条的高度。 Number 1rem 2 $progress-background 它表示进度条的背景颜色。 Color $medi

  • 描述 (Description) 您可以使用SASS参考更改组件的样式。 变量 (Variables) 下表列出了项目设置文件中的SASS变量,该文件使该组件的默认样式得到自定义。 Sr.No. 名称和描述 类型 默认值 1 $orbit-bullet-background 它代表轨道子弹的​​默认颜色。 Color $medium-gray 2 $orbit-bullet-background-