Question

我最近一直在编写一些LESS CSS代码，并且想知道格式化的最佳方法是什么。

理想情况下，我不想重现按钮类，并将它们与输入标记分开，除非这是最好的方法。

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    display: inline-block;
    height: 38px;
    padding: 0 30px;
    color: #555;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border-radius: 4px;
    border: 1px solid #bbb;
    cursor: pointer;
    box-sizing: border-box; 

    &:hover,
    &:focus {
        color: #333;
        border-color: #888;
        outline: 0;
    }

    &.button-primary {
        color: #FFF;
        background-color: #33C3F0;
        border-color: #33C3F0;

        &:hover,
        &:focus {
            color: #FFF;
            background-color: #1EAEDB;
            border-color: #1EAEDB;
        }
    }
}

我最初考虑像这样做

.button,
button,
input {
    &:[type="submit"],
    &:[type="reset"],
    &:[type="button"] {}

但是这样做就意味着按钮类也会有类型。

非常感谢任何帮助，谢谢。

Answer 1

您可以使用LESS中的extend功能解决此问题。

button, .button {
    // styles
}

input {
    &[type="submit"], &[type="reset"], &[type="button"] {
        // All styles from .button will also be available here.
        &:extend(.button);
    }
}

格式化较少

1 个答案: