转换＆amp; scss中的符号更少

Question

我必须将一些SCSS文件转换为LESS。在大多数情况下，这只是用@更改$的情况，但是有些样式使用scss父选择器&，我不知道如何转换。

这是示例

  // Sidebar
  .sidebar {
    .block {
      &.newsletter {
        .btn {
          &:before {
            background: transparent;
          }
        }
      }
      &.filter {
        ol {
          li {
            a {
              color: @blue;

              &:before {
                display: none;
              }
            }
          }
        }
      }
      .filter-options-title, .block-title {
        color: #444;
        padding-bottom: 10px;
        font-size: 12px;

        &:after {
          color: #666;
        }
      }
    }
  }

如何替换这些父选择器以使其生成相同的CSS？

Answer 1

&父选择器实际上与Less和SCSS中的语法相同！

来自Less Documentation on Parent Selectors：

  

&运算符   表示嵌套规则的父选择器，最常见   在将修改类或伪类应用于现有时使用   选择

相比之下，这里是关于伪类的父选择器的SASS / SCSS文档：http://sass-lang.com/documentation/Sass/Selector/Pseudo.html

因此，对于您的代码，它将是：

<强> SCSS

$blue: blue;

   .sidebar {
    .block {
      &.newsletter {
        .btn {
          &:before {
            background: transparent;
          }
        }
      }
      &.filter {
        ol li a {
              color: $blue;
               &:before {
                display: none;
              }
        }
      }
      .filter-options-title, .block-title {
        color: #444;
        padding-bottom: 10px;
        font-size: 12px;

        &:after {
          color: #666;
        }
      }
    }
  }

（尝试在此处编译/验证：https://www.sassmeister.com/）

<强> LESS

@blue: blue;

   .sidebar {
    .block {
      &.newsletter {
        .btn {
          &:before {
            background: transparent;
          }
        }
      }
      &.filter {
        ol li a {
              color: @blue;
               &:before {
                display: none;
              }
        }
      }
      .filter-options-title, .block-title {
        color: #444;
        padding-bottom: 10px;
        font-size: 12px;

        &:after {
          color: #666;
        }
      }
    }
  }

（尝试在此处编译/验证：http://winless.org/online-less-compiler）

除官方文档外，关于CSS技巧的这篇文章也很有帮助：https://css-tricks.com/the-sass-ampersand

希望有所帮助：）