Question

我有一些代码，看起来像这样：

io_remap_pfn_range(vma, vma->vm_start, start >> PAGE_SHIFT, vma->vm_end - vma->vm_start, vma->vm_page_prot);

如何改进此代码？

在css中，您可以使用逗号

为多个类编写相同的属性

.elephant
    background: yellow

    .young-eph
         color: white

.tiger
    background: yellow

    .young-tgr
         color: white

但是如何用sass做到这一点？

Answer 1

你几乎和普通的css一样瘦。只需在逗号之间添加一个逗号。

.elephant, .tiger {
  background: yellow

  .young-eph, .young-tgr {
    color: white
  }
}

在这种情况下，我会用.young tho替换.young-eph和.young-tgr。在这种情况下，有两个不同的类看起来是多余的。

.elephant, .tiger {
  background: yellow

  .young {
    color: white
  }
}

在新信息后编辑

如果你有这样的深度继承，我只需要改变一下类。我通常避免使用扩展。

如果您使用.eph，.tgr，.adult，.young和.very类你几乎可以做到这一点：

.adult {
  background: yellow

  .young {
    color: white
    &.very { 
      padding-left: 30px;
    }
  }
}

＆安培;意味着该对象同时具有.young和.very，因此根据需要您可能不需要它你也很可能不需要嵌套所有这些，更多的代码（包括一些html）可能会很好。

Answer 2

语法是一样的。 Sass被转换为css，这意味着你可以在.scss文件和sass中编写好的css。

这是有效的sass ：

.elephant, .tiger {
  background: yellow;
}

.elephant {
  border: dotted blue 1px;

  .young-eph {
    color: cyan;
  }
}

.tiger {
  border: dotted red 1px;

  .young-tgr {
    color: magenta;
  }
}

以下是指向plunker的链接。

编辑：致next question：

.elephant
   background: yellow
   .young-eph
       color: white
       .very-young-eph
            padding-left: 30px

也许您可以创建一个类.animal，然后在[class*="young-"]和[class*="very-young-"]内，然后您可以使用它来扩展。

.animal
    background: yellow

    [class*="young-"] {
        color: white

        [class*="very-young-"] {
            padding-left: 30px

Sass，不同类的相同属性

2 个答案: