SCSS 引用元素的特定实例
SCSS Referencing a Particular Instance of an Element
非常 Scss/Sass 新手 在我的 mod.scss 文件的其他地方,编码了我经常重复使用的 Ul > li
的样式。但是,在另一个 mod.scss 文件中,我需要为单个特定实例更改此代码。
是否可以从本质上创建一个类似 if 的语句来表示:"If a UL/LI tag appears UNDER the .content-section
class, take on behaviors X,Y and z"?
.content-section
{
margin: 40px 0px;
& .siteTitleText
{
margin-bottom: 50px;
}
& .headers
{
margin-bottom: 30px;
}
img
{
margin: 30px 0px;
}
*ul*
}
HTML:
<div class="content-section vendors">
<p class="headers">Modules, partials, and vendor</p>
<p class="bodyText">As you can see this divides my project into three basic types of files. Modules, partials, and vendored stylesheets.</p>
<ul>
<li class="bodyText">The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.</li>
<li class="bodyText">The partials directory is where the meat of my CSS is constructed. A lot of folks like to break their stylesheets into header, content, sidebar, and footer components (and a few others). As I'm more of a SMACSS guy myself, I like to break things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).</li>
<li class="bodyText"></li>
</ul>
</div>
在您的代码中使用 +
来 select 您的结束标记 下方的 下一个匹配项。
如果您希望 select 将 child 标签嵌套在 .content-section
.
中,只需嵌套标签即可
.content-section {
margin: 40px 0px;
& .siteTitleText {
margin-bottom: 50px;
}
& .headers {
margin-bottom: 30px;
}
img {
margin: 30px 0px;
}
ul, li { // If .content-section has a child named ul or li, do this:
margin: 100px;
}
}
非常 Scss/Sass 新手 在我的 mod.scss 文件的其他地方,编码了我经常重复使用的 Ul > li
的样式。但是,在另一个 mod.scss 文件中,我需要为单个特定实例更改此代码。
是否可以从本质上创建一个类似 if 的语句来表示:"If a UL/LI tag appears UNDER the .content-section
class, take on behaviors X,Y and z"?
.content-section
{
margin: 40px 0px;
& .siteTitleText
{
margin-bottom: 50px;
}
& .headers
{
margin-bottom: 30px;
}
img
{
margin: 30px 0px;
}
*ul*
}
HTML:
<div class="content-section vendors">
<p class="headers">Modules, partials, and vendor</p>
<p class="bodyText">As you can see this divides my project into three basic types of files. Modules, partials, and vendored stylesheets.</p>
<ul>
<li class="bodyText">The modules directory is reserved for Sass code that doesn't cause Sass to actually output CSS. Things like mixin declarations, functions, and variables.</li>
<li class="bodyText">The partials directory is where the meat of my CSS is constructed. A lot of folks like to break their stylesheets into header, content, sidebar, and footer components (and a few others). As I'm more of a SMACSS guy myself, I like to break things down into much finer categories (typography, buttons, textboxes, selectboxes, etc…).</li>
<li class="bodyText"></li>
</ul>
</div>
在您的代码中使用 +
来 select 您的结束标记 下方的 下一个匹配项。
如果您希望 select 将 child 标签嵌套在 .content-section
.
.content-section {
margin: 40px 0px;
& .siteTitleText {
margin-bottom: 50px;
}
& .headers {
margin-bottom: 30px;
}
img {
margin: 30px 0px;
}
ul, li { // If .content-section has a child named ul or li, do this:
margin: 100px;
}
}