Question

在旧网站中，用于创建网格的mixins将丢失。我不确定它是否使用了susy或者singularitygs ..但我猜这两个中的一个，对于旧版本，我猜。

从前端，我已经能够检索渲染的值。似乎逻辑很简单......但任何人都可以重新创建mixins来生成那些吗？

以下是我发现的一些数据。它使用36列布局，但我不确定装订线的尺寸是多少......而且柱子包括排水沟。

我正在寻找通用的简单方法，例如push（），pull（）和span（），和此设置中使用的数字

@mixin push1() {
  margin-left: 2.8125%; 
}
@mixin pull1() {
  margin-left: -2.8125%; 
}
@mixin span36() {
    width: 100%;
  float: left;
    margin-left: 0;
  margin-right: 0;
}

@mixin span34() {
    width: 94.375%;
    float: left;
    margin-right: 1.25%;
}
@mixin span27() {
    width: 74.6875%;
    float: left;
    margin-right: 1.25%;
}
@mixin span26() {
    width: 72%; // this i guessed
    float: left;
    margin-right: 1.25%;
}
@mixin span25() {
    width: 69.0625%;
    float: left;
    margin-right: 1.25%;
}
@mixin span24() {
    width: 66.25%;
    float: left;
    margin-right: 1.25%;
}
@mixin span22() {
    width: 60.625%;
    float: left;
    margin-right: 1.25%;
}
@mixin span18() {
    width: 49.375%;
    float: left;
    margin-right: 1.25%;
}

@mixin span17() {
    width: 46.5625%;
    float: left;
    margin-right: 1.25%;
}
@mixin span15() {
    width: 40.9375%;
    float: left;
    margin-right: 1.25%;
}
@mixin span12() {
    width: 32.5%;
    float: left;
    margin-right: 1.25%;
}

@mixin span11() {
    width: 29.6875%;
    float: left;
    margin-right: 1.25%;
}

@mixin span9() {
    width: 24.0625%;
    float: left;
    margin-right: 1.25%;
}

@mixin span6() {
    width: 15.625%;
    float: left;
    margin-right: 1.25%;
}

Answer 1

对于跨度，显然它有36列和1.25排水沟;除了最后一个之外，它将排水沟均匀地划分在列上，并将剩余部分划分为列。所以

spanX = (100 - (36/x-1)*1.25)/(36/x)

取span17，那是

span17 = 100 - (36/17-1)*1.25) / (36/17) = 46.5625

我不知道为什么在网格中甚至有意义 - 你在那里有1.11764705882排水沟 - 但这就是数字所说的。

如果你推或拉一列，你不要只是推动列，而是添加到列的边距。所以

pushX = 100/x+1.25/x

从丢失的来源重新创建网格混合

1 个答案: