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;
   /*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 2

您需要move comments into the block {} they belong to或者在没有嵌套语法的情况下编写它们。

考虑

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

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

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

Answer 3

当Compass编译时，您可以使用响亮的注释来保留注释的位置：

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

嵌套选择器的注释不会出现在预期的位置

3 个答案: