1

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

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

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

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

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

1 回答 1

6

使用 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 中多次编写）。

于 2013-01-31T12:20:27.103 回答