sass - 嵌套选择器的注释未出现在预期的位置

Question

以下是我的 SCSS 文件及其输出。但是，当您检查编译的注释时，所有这些都放错了位置。

SCSS

/* Navigation */
.navigation{
   background: red;
   /*Subnavigation 1*/
  .subnav{
     background: #FFF;
   }
   /*Subnavigation 2*/
   .subnav2{
      background: black;
   }
 }

输出

/* Navigation */
.navigation {
  background: red;
  /*Subnavigation 1*/
  /*Subnavigation 2*/
}

.navigation .subnav {
  background: #FFF;
}

.navigation .subnav2 {
   background: black;
}

期望的输出

/* Navigation */
.navigation {
  background: red;
}
/*Subnavigation 1*/
.navigation .subnav {
  background: #FFF;
}
/*Subnavigation 2*/
.navigation .subnav2 {
   background: black;
}

是 SCSS 的错误还是问题？我正在使用 Compass 0.12.2 (Alnilam)。

Answer 1

您需要将注释移动到{}它们所属的块中，或者在没有嵌套语法的情况下编写它们。

考虑

/* Navigation */
.navigation{
   background: red;
   /* TODO add a background image */
  .subnav{
     background: #FFF;
   }
}

在那种情况下，你可能不想要

/* TODO pick a better red */
.subnav{
    background: #FFF;
}

Answer 2

建议：

改变你的评论标准。代替

/* Navigation */
.navigation{
   background: red;
   /*Subnavigation 1*/
  .subnav{
     background: #FFF;
   }
   /*Subnavigation 2*/
   .subnav2{
      background: black;
   }
 }

将注释放在块的开口内：

.test {/*nav*/
    background: red;

    .test2{ /*subnavigation 1*/
    background:#fff;
    }

    .test3 {/*subnavigation 2*/
        background:#fff;
     }
 }

你得到以下输出：

/* line 27, ../scss/main.scss */
.test {
  /*nav*/
  background: red;
}
/* line 30, ../scss/main.scss */
.test .test2 {
  /*subnavigation 1*/
  background: #fff;
}
 /* line 34, ../scss/main.scss */
 .test .test3 {
 /*subnavigation 2*/
     background: #fff;
}

这会满足你的需要吗？

Answer 3

当 Compass 编译时，您可以使用响亮的注释将注释保留在您放置它们的位置：

/*! This comment isn't going anywhere. */