具有嵌套元素的可重用块 - SCSS [重复]

Posted 2023-03-06

【中文标题】具有嵌套元素的可重用块 - SCSS [重复]

【英文标题】：Reusable Block with Nested Elements - SCSS [duplicate]

【发布时间】：2016-01-29 00:59:28

【问题描述】：

假设我在一个样式表中有两个无序列表。两者都应该使用相同的样式，但都嵌套在不同的父元素中：

#foo
  position:absolute;
  ...
  ul
    list-style-type:none;
    li
      color:red;
      ...
    
  


#bar
  position:relative;
  ...
  ul
    list-style-type:none;
    li
      color:red;
      ...
    
  

有没有办法创建类似于 Rails 的部分代码，其中单个代码块可以在不同的父元素中重用/呈现？

【问题讨论】：

你不能只为两个列表应用一个类名并相应地设置类的样式吗？

@pete 实际上我最终这样做了，但我仍然想看看 SCSS 是否提供了一种编程方式来实现我想要的（也许允许在这样的嵌套块中传递 *args）。

你为什么不用mixin？

@alirezasafian 似乎找不到任何关于使用 mixins 进行嵌套样式的内容。你能指出我正确的方向吗？

检查this

【参考方案1】：

解决方案：

1-混合 Link

@mixin ul-style ()

   ul
    list-style-type:none;
    li
      color:red;
    
  


#foo
  position:absolute;
  @include ul-style();


#bar
  position:relative;
  @include ul-style();

2-继承 Link

.ul-style

  ul
  
    list-style-type:none;
    li
      color:red;
      



#foo
  position:absolute;
  @extend .ul-style;



#bar
  position:relative;
  @extend .ul-style;

【讨论】：

是的，#1 正是我需要的！不确定可以使用哪种 SCSS 方法来实现此目的。

谢谢！我刚刚想出了两者的动态组合：从 Mixin 扩展检查我在这里重复问题的答案***.com/a/66259322/11155364