SASS中的输入+标签语法

Question

我当时在搜索，但是没有找到有关该问题的任何信息。例如，如果我有以下CSS：

input[type="radio"]:checked + label {
    background: #666;
    color: c00;
    height: 500px;
    width: 500px;
}

有没有其他使用SASS编写它的方式，或者语法与CSS相同？喜欢筑巢..

另一个问题是当我想使用特殊标签时。因此，如何在写上海社会科学院的部分时，我现在想借此speciffic label有type="one"：

input[type="radio"]:checked + label[type="one"] {
    background: #666;
    color: c00;
    height: 500px;
    width: 500px;
}

Answer 1

使用SASS，您可以使用与CSS相同的语法，也可以根据SASS嵌套规则取消选择器的耦合：例如，您也可以编写

input[type="radio"]:checked {

    + label {
        background: #666;
        color: c00;
        height: 500px;
        width: 500px;
    }
}

另外，对于第二个问题，您可能会写

input[type="radio"]:checked {
    + label[type="one"] {
       ...
    }
    /* other rules for element next to or nested in input:radio */
}

要么

input[type="radio"]:checked + label {
    &[type="one"] {
       ...
    }
    /* other rules for labels with different attributes or classes */
}

或者也

input[type="radio"]:checked {
    + label {
        &[type="one"] {
            /* other rules for elements nested into the label[type="one"] */
        }
        /* other rules for labels with different attributes or classes 
         * (or nested in a generic label) */
    }
    /* other rules for element next to or nested in input:radio */
}

根据哪种形式更方便。编写CSS代码没有错误或正确的方法，只是使您更容易编写需要定义的所有规则（在选择器中编写一次，而在普通CSS中编写多个编写器）。