小编Chr*_*ler的帖子

假设我想为变量定义一个全局值,然后为特定的选择器覆盖它.根据SASS文件,这应该是可能的.

变量仅在定义它们的嵌套选择器级别内可用.如果它们是在任何嵌套选择器之外定义的,那么它们随处可用.

然后逻辑将声明"绿色"和"红色"作为值$text-color仅在其各自的嵌套选择器中可用,并且$text-color当在其他地方(例如在其中)调用时将采用值"蓝色" .foo.

$text-color: blue;

.green {
    $text-color: green;
    color: $text-color;
}

.red {
    $text-color: red;
    color: $text-color;
}

.foo {
    color: $text-color;
}

但是,情况并非如此,上述SASS编译为:

.green {
    color: green;
}

.red {
    color: red;
}

.foo {
    color: red;
}

理解这一点的任何帮助都会很有帮助.

我正在尝试围绕 CSS 中的 BEM 命名进行思考，并且想知道我是否正确理解它。

根据官方文档，一个元素是：

块的一部分，没有独立的含义并且在语义上与其块相关联。

鉴于下面的代码片段，没有任何子项.main-nav具有任何独立的含义，所以我相信它们都可以作为一个元素。

但是，当我最终得到像.main-nav__sub-menu-item-link. 感觉就像我仍然嵌套了好几层，就在我的元素名称空间中。

也许这完全没问题，下面的例子是正确的实现，我只是欣赏第二个意见。

<nav class="main-nav">
  <div class="main-nav__logo">
    <a class="main-nav__logo-link">Company Name</a>
  </div>
  <ul class="main-nav__menu">
    <li class="main-nav__menu-item">
      <a class="main-nav__menu-item-link">Products</a>
      <ul class="main-nav__sub-menu">
        <li class="main-nav__sub-menu-item">
          <a class="main-nav__sub-menu-item-link">Foo</a>
        </li>
        <li class="main-nav__sub-menu-item">
          <a class="main-nav__sub-menu-item-link">Bar</a>
        </li>
        <li class="main-nav__sub-menu-item">
          <a class="main-nav__sub-menu-item-link">Baz</a>
        </li>
      </ul>
    </li>
    <li class="main-nav__menu-item">
      <a class="main-nav__menu-item-link">Services</a>
    </li>
    <li class="main-nav__menu-item">
      <a class="main-nav__menu-item-link">About Us</a>
    </li>
  </ul>
</nav>

我正在尝试获取段落中的第一个字母并用<span>标签包装它.注意我说的是字母而不是字符,因为我正在处理经常有空格的杂乱标记.

现有标记(我无法编辑):

<p>  Actual text starts after a few blank spaces.</p>

期望的结果:

<p>  <span class="big-cap">A</span>ctual text starts after a few blank spaces.</p>

我该如何忽略/[a-zA-Z]/呢？任何帮助将不胜感激.