将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

该&家长选择实际上是越来越SCSS相同的语法!

从关于父选择器的较少文档:

的&操作者表示嵌套规则的父选择器和施加改性类或伪类到现有的选择器时是最常用的

相比之下,这里是关于伪类的父选择器的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/)

减

@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

希望有帮助:)