Родительский добавленный SCSS

Question

Я пытаюсь разместить свои селекторы внутри родителя.

#top{
    /*! Single Product Page*/
    &.single-product .title_container{
        display: none;
    }

    .product_title_single{
        margin-bottom: 40px;
        h1{margin-bottom: 10px;}
    }
   ------------so on..
}

Однако скомпилированный css объединяет все комментарии в родительский, выбранный отдельно.

#top {
    /*Slider customisation*/
    /* End Slider customisation*/
    /*Text horiziontal Ruler*/
    /*Quick Finder*/
    /*Brand Logos*/
    /*Product Category Grid*/
    /*infobox*/
    /*News Archive Page*/
    /*Blog Archive Page Search*/

}

Остальная часть кода в порядке, возможно ли предотвратить это?

Answer 1

К сожалению, нет.

Однако приведенный выше пример хорошо объясняет, почему.

По мере того, как процессор работает с вложенными селекторами, он обрабатывает любые свойства или комментарии, непосредственно вложенные в селектор верхнего уровня как связанные с этим селектором верхнего уровня.

Рассмотрим этот пример (который в основном ваш с добавлением свойств margin-top и padding-top, и еще одна строка после комментария к примеру):

#top {
    margin-top: 0;

    /* a comment */

    &.single-product .title_container {
        display: none;
    }

    .product_title_single {
        margin-bottom: 40px;

        h1 {
            margin-bottom: 10px;
        }
    }

    padding-top: 0;
}

Он компилируется в это:

#top {
    margin-top: 0;
    /* a comment */
    padding-top: 0;
}

#top.single-product .title_container{
    display: none;
}

#top .product_title_single {
    margin-bottom: 40px;
}

#top .product_title_single h1 {
    margin-bottom: 10px;
}

Обратите внимание, где заканчивается padding-top: 0;, даже если он идет после вложенных селекторов.

Процессор S CSS обрабатывает свойства и комментарии как «потомки» ближайшего «родительского» селектора , независимо от того, что предшествует им или следует за ними. У него нет возможности узнать, связан ли комментарий с какими-либо следующими вложенными селекторами.

Если вам нужно, чтобы ваши комментарии оставались связанными с их вложенными селекторами в скомпилированном выводе, вам нужно добавить комментарии внутри этих дочерних селекторов:

#top {
    margin-top: 0;

    &.single-product .title_container {
        /* a comment */
        display: none;
    }
}

Это также не достигает sh вашей реальной цели, которая состоит в том, чтобы иметь комментарий, который относится к нескольким следующим селекторам, а не только к одному one.

Вы можете подумать об этих комментариях как о более ценных для вас в качестве напоминаний перед компиляцией, вместо того, чтобы хранить их в скомпилированном выводе.

Если вы примете это подход, попробуйте использовать "тихие комментарии" с // вместо /* */ в вашем S CSS:

#top {
    margin-top: 0;

    // a comment
    &.single-product .title_container {
        display: none;
    }
}

Компилируется с этим (комментарии с двойным sla sh удаляются во время компиляции):

#top {
    margin-top: 0;
}

#top.single-product .title_container{
    display: none;
}