Question

我是新手，并希望与类进行部分匹配，以便在不编写冗余类的情况下预处理CSS。

e.g。少：

@blue: #1f6ea9;
@white: #f5f5f5;

.square(@size, @color) {
    width: @size;
    height: @size;
    background-color: @color;
}

CSS：

div[class^="square-"] {
    div[class*="-150"] {
        div[class*="-white"] {
            .square(150px, @white);
        }

        div[class*="-blue"] {
            .square(150px, @white);
        }
    }

    div[class*="-200"] {
        div[class*="-white"] {
            .square(200px, @white);
        }

        div[class*="-blue"] {
            .square(200px, @white);
        }
    }
}

HTML：

<div class="square-150-white"></div>
<div class="square-200-blue"></div>
<div class="square-250-blue"></div> // this would not work

这样做似乎很容易让人费解，而且不是动态的或可管理的。理想情况下，我想定义一个主要，所以也许我们有.square（）和.circle（）。然后取类的其余部分来定义传递给该函数的变量。

div[class^="square-"](@size, @color) {
    .square(@size, @color);
}

div[class^="circle-"](@size, @color) {
    .circle(@size, @color);
}

<div class="circle-150"></div>       // generate 150px circle, default color
<div class="circle-300-blue"></div>  // generate 300px blue circle
<div class="square-blue"></div>      // generate blue square, default size
<div class="square-50-white"></div>  // generate 50px white square

对此事的任何帮助表示赞赏。

Answer 1

我想你可能过度工程了。 CSS的一个优点是可以组合使用不同的样式，而不是通过较少的函数来完成所有组合。假设您有3种形状，3种尺寸和3种颜色。使用普通的旧css，这将需要9个带有规则的选择器：

.square  { border-radius: 0; }
.rounded { border-radius: 5px; }
.oval    { border-radius: 50%; }

.dim-150 { width: 150px; height: 150px; }
.dim-200 { width: 200px; height: 200px; }
.dim-250 { width: 250px; height: 250px; }

.bg-red   { background-color: #ff2020; }
.bg-white { background-color: #f5f5f5; }
.bg-blue  { background-color: #1f6ea9; }

如果我们要创建3个较少的函数，然后生成组合，我们将有3 ^ 3 = 27个规则（不包括函数本身）。它成为一个指数问题。只添加1个形状，1个维度和1个颜色就可以得到256个规则，但将这些部分分开将是12个规则！

另一个想法是考虑在命名类时，鼓励作者描述内容，而不是内容的呈现。^{[1] [2]}这个想法是未来，风格比阶级更容易改变。

例如，让我们说你有一个红色和椭圆形的通知。你可以给它class="oval bg-red"课程。但是，如果你以后想要将这些通知设为黄色和圆角正方形怎么办？你可以修改css，但是类名不会与样式匹配（.bg-red给出黄色背景），而重用同一个类的其他元素会改变颜色而不需要你这样做。这不会起作用，因此您必须在HTML中访问您网站上的每个位置并更改类。

相反，如果我们将通知发送给class="notification warning"类，该怎么办？通知现在描述了站点上的所有通知，警告描述了您的所有警告。首先，您要将它们从椭圆更改为方形，因此您可以修改单个css规则。您决定使用一条规则来修复您的网站，并将所有警告从红色更改为黄色。我认为同样应该减少变量。而不是@blue，@white不会有任何改变，让它们成为@ accept-color，@ bg-theme等。

Answer 2

你可以在较少的

中这样做

LESS：

@blue: #1f6ea9;
@white: #f5f5f5;

.square(@size, @color) {
    width: @size;
    height: @size;
    background-color: @color;
}


.square {
    &-150{
        &-white{
            .square(150px, @white);
        }
        &-blue{
            .square(150px, @blue);
        }
    }   
    &-200{
        &-white{
            .square(200px, @white);
        }
        &-blue{
            .square(200px, @blue);
        }
    }   
}

这是它生成的CSS

CSS：

.square-150-white {
  width: 150px;
  height: 150px;
  background-color: #f5f5f5;
}
.square-150-blue {
  width: 150px;
  height: 150px;
  background-color: #1f6ea9;
}
.square-200-white {
  width: 200px;
  height: 200px;
  background-color: #f5f5f5;
}
.square-200-blue {
  width: 200px;
  height: 200px;
  background-color: #1f6ea9;
}

你可以在Less中部分匹配课吗？

2 个答案: