0

私は SCSS スタイルシートに取り組んでおり、次のようなルールがあります。

.footer-link-row {
    color: red;
    ul& {
        padding: 0;
    }
}

ul&行を selector にコンパイルしたいul.footer-link-row。ただし、このセレクターはコンパイラ エラーを返し、 を使用すると に&ulコンパイルされ.footer-link-row ulます。このようなものを選択する正しい方法は何ですか?

--追加--
明確にするために、私がこれから求める最終的な CSS は次のとおりです。

.footer-link-row {
    color: red;
}
ul.footer-link-row {
    padding: 0;
}
4

1 に答える 1

1

次のようなものが必要です。

ul {
  padding: 0;
  .footer-link-row {
    color: red;
  }
}

アンパサンドは、両方のセレクターが一致することを要求するために使用されます

a { text-decoration: none;
  &:hover { border-width: 1px }
}
// compiles to 
a {
  text-decoration: none;
}
a:hover {
  border-width: 1px;
}

ul.footer-link-row が必要な場合は、試してください

ul {
  &.footer-link-row {
    padding: 0;
  }
  .footer-link-row {
    color: red;
  }
}

あなたの明確化は、2 つのスコープが必要であることを示しています。

ul {
  &.footer-link-row {
    padding: 0;
  }
}

.footer-link-row {
  color: red;
}
于 2012-04-05T20:12:13.530 に答える