SASS 中的输入 + 标签语法

Question

我在谷歌上搜索，但我没有找到关于这个问题的任何信息。例如，如果我有以下 CSS：

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

是否有一些不同的方法来使用 SASS 编写它，或者语法与用 CSS 编写的语法相同？就像嵌套一样..

另一个问题是，当我想贴一个特定的标签时。那么，当我现在想用type="one"进行特定label时，如何在 SASS 中编写该部分：

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中多次编写的选择器）。