这个非常规的 CSS 代码是什么意思？

Question

帮助客户更新他们的 Shopify 主题。之前的设计师对基础网格使用了一种非常规的方法。我需要帮助翻译代码。

看过一篇关于这个主题的旧文章，但我还是不明白。

$phone:            "screen and (max-width: 640px)";
$tablet:           "screen and (min-width: 641px) and (max-width: 1007px)";
$tablet-and-up:    "screen and (min-width: 641px)";
$pocket:           "screen and (max-width: 1007px)";
$lap:              "screen and (min-width: 1008px) and (max-width: 1239px)";
$lap-and-up:       "screen and (min-width: 1008px)";
$desk:             "screen and (min-width: 1240px)";
$widescreen:       "screen and (min-width: 1500px)";

.\31\/2, .\32\/4, .\36\/12 {
  width: 50%;
}

.\31\/3, .\34\/12 {
  width: 33.33333%;
}

.\32\/3, .\38\/12 {
  width: 66.66667%;
}

.\31\/4, .\33\/12 {
  width: 25%;
}

.\33\/4, .\39\/12 {
  width: 75%;
}

.\31\/12 {
  width: 8.33333%;
}

.\32\/12 {
  width: 16.66667%;
}

.\35\/12 {
  width: 41.66667%;
}

.\37\/12 {
  width: 58.33333%;
}

.\31\30\/12 {
  width: 83.33333%;
}

.\31\31\/12 {
  width: 91.66667%;
}

@media #{$phone} {
  .hidden-phone {
    display: none !important;
  }

  .\31\/2--phone, .\32\/4--phone, .\36\/12--phone {
    width: 50%;
  }

  .\31\/3--phone, .\34\/12--phone {
    width: 33.33333%;
  }

  .\32\/3--phone, .\38\/12--phone {
    width: 66.66667%;
  }

  .\31\/4--phone, .\33\/12--phone {
    width: 25%;
  }

  .\33\/4--phone, .\39\/12--phone {
    width: 75%;
  }

  .\31\/12--phone {
    width: 8.33333%;
  }

  .\32\/12--phone {
    width: 16.66667%;
  }

  .\35\/12--phone {
    width: 41.66667%;
  }

  .\37\/12--phone {
    width: 58.33333%;
  }

  .\31\30\/12--phone {
    width: 83.33333%;
  }

  .\31\31\/12--phone {
    width: 91.66667%;
  }
}

@media #{$tablet} {
  .hidden-tablet {
    display: none !important;
  }

  .\31\/2--tablet, .\32\/4--tablet, .\36\/12--tablet {
    width: 50%;
  }

  .\31\/3--tablet, .\34\/12--tablet {
    width: 33.33333%;
  }

  .\32\/3--tablet, .\38\/12--tablet {
    width: 66.66667%;
  }

  .\31\/4--tablet, .\33\/12--tablet {
    width: 25%;
  }

  .\33\/4--tablet, .\39\/12--tablet {
    width: 75%;
  }

  .\31\/12--tablet {
    width: 8.33333%;
  }

  .\32\/12--tablet {
    width: 16.66667%;
  }

  .\35\/12--tablet {
    width: 41.66667%;
  }

  .\37\/12--tablet {
    width: 58.33333%;
  }

  .\31\30\/12--tablet {
    width: 83.33333%;
  }

  .\31\31\/12--tablet {
    width: 91.66667%;
  }
}

@media #{$tablet-and-up} {
  .hidden-tablet-and-up {
    display: none !important;
  }

  .\31\/2--tablet-and-up, .\32\/4--tablet-and-up, .\36\/12--tablet-and-up {
    width: 50%;
  }

  .\31\/3--tablet-and-up, .\34\/12--tablet-and-up {
    width: 33.33333%;
  }

  .\32\/3--tablet-and-up, .\38\/12--tablet-and-up {
    width: 66.66667%;
  }

  .\31\/4--tablet-and-up, .\33\/12--tablet-and-up {
    width: 25%;
  }

  .\33\/4--tablet-and-up, .\39\/12--tablet-and-up {
    width: 75%;
  }

  .\31\/12--tablet-and-up {
    width: 8.33333%;
  }

  .\32\/12--tablet-and-up {
    width: 16.66667%;
  }

  .\35\/12--tablet-and-up {
    width: 41.66667%;
  }

  .\37\/12--tablet-and-up {
    width: 58.33333%;
  }

  .\31\30\/12--tablet-and-up {
    width: 83.33333%;
  }

  .\31\31\/12--tablet-and-up {
    width: 91.66667%;
  }
}

@media #{$pocket} {
  .hidden-pocket {
    display: none !important;
  }

  .\31\/2--pocket, .\32\/4--pocket, .\36\/12--pocket {
    width: 50%;
  }

  .\31\/3--pocket, .\34\/12--pocket {
    width: 33.33333%;
  }

  .\32\/3--pocket, .\38\/12--pocket {
    width: 66.66667%;
  }

  .\31\/4--pocket, .\33\/12--pocket {
    width: 25%;
  }

  .\33\/4--pocket, .\39\/12--pocket {
    width: 75%;
  }

  .\31\/12--pocket {
    width: 8.33333%;
  }

  .\32\/12--pocket {
    width: 16.66667%;
  }

  .\35\/12--pocket {
    width: 41.66667%;
  }

  .\37\/12--pocket {
    width: 58.33333%;
  }

  .\31\30\/12--pocket {
    width: 83.33333%;
  }

  .\31\31\/12--pocket {
    width: 91.66667%;
  }
}

@media #{$lap} {
  .hidden-lap {
    display: none !important;
  }

  .\31\/2--lap, .\32\/4--lap, .\36\/12--lap {
    width: 50%;
  }

  .\31\/3--lap, .\34\/12--lap {
    width: 33.33333%;
  }

  .\32\/3--lap, .\38\/12--lap {
    width: 66.66667%;
  }

  .\31\/4--lap, .\33\/12--lap {
    width: 25%;
  }

  .\33\/4--lap, .\39\/12--lap {
    width: 75%;
  }

  .\31\/12--lap {
    width: 8.33333%;
  }

  .\32\/12--lap {
    width: 16.66667%;
  }

  .\35\/12--lap {
    width: 41.66667%;
  }

  .\37\/12--lap {
    width: 58.33333%;
  }

  .\31\30\/12--lap {
    width: 83.33333%;
  }

  .\31\31\/12--lap {
    width: 91.66667%;
  }
}

@media #{$lap-and-up} {
  .hidden-lap-and-up {
    display: none !important;
  }

  .\31\/2--lap-and-up, .\32\/4--lap-and-up, .\36\/12--lap-and-up {
    width: 50%;
  }

  .\31\/3--lap-and-up, .\34\/12--lap-and-up {
    width: 33.33333%;
  }

  .\32\/3--lap-and-up, .\38\/12--lap-and-up {
    width: 66.66667%;
  }

  .\31\/4--lap-and-up, .\33\/12--lap-and-up {
    width: 25%;
  }

  .\33\/4--lap-and-up, .\39\/12--lap-and-up {
    width: 75%;
  }

  .\31\/12--lap-and-up {
    width: 8.33333%;
  }

  .\32\/12--lap-and-up {
    width: 16.66667%;
  }

  .\35\/12--lap-and-up {
    width: 41.66667%;
  }

  .\37\/12--lap-and-up {
    width: 58.33333%;
  }

  .\31\30\/12--lap-and-up {
    width: 83.33333%;
  }

  .\31\31\/12--lap-and-up {
    width: 91.66667%;
  }
}

@media #{$desk} {
  .hidden-desk {
    display: none !important;
  }

  .\31\/2--desk, .\32\/4--desk, .\36\/12--desk {
    width: 50%;
  }

  .\31\/3--desk, .\34\/12--desk {
    width: 33.33333%;
  }

  .\32\/3--desk, .\38\/12--desk {
    width: 66.66667%;
  }

  .\31\/4--desk, .\33\/12--desk {
    width: 25%;
  }

  .\33\/4--desk, .\39\/12--desk {
    width: 75%;
  }

  .\31\/12--desk {
    width: 8.33333%;
  }

  .\32\/12--desk {
    width: 16.66667%;
  }

  .\35\/12--desk {
    width: 41.66667%;
  }

  .\37\/12--desk {
    width: 58.33333%;
  }

  .\31\30\/12--desk {
    width: 83.33333%;
  }

  .\31\31\/12--desk {
    width: 91.66667%;
  }
}
/* Create each media query */
@media #{$widescreen} {
  .hidden-widescreen {
    display: none !important;
  }

  .\31\/2--widescreen, .\32\/4--widescreen, .\36\/12--widescreen {
    width: 50%;
  }

  .\31\/3--widescreen, .\34\/12--widescreen {
    width: 33.33333%;
  }

  .\32\/3--widescreen, .\38\/12--widescreen {
    width: 66.66667%;
  }

  .\31\/4--widescreen, .\33\/12--widescreen {
    width: 25%;
  }

  .\33\/4--widescreen, .\39\/12--widescreen {
    width: 75%;
  }

  .\31\/12--widescreen {
    width: 8.33333%;
  }

  .\32\/12--widescreen {
    width: 16.66667%;
  }

  .\35\/12--widescreen {
    width: 41.66667%;
  }

  .\37\/12--widescreen {
    width: 58.33333%;
  }

  .\31\30\/12--widescreen {
    width: 83.33333%;
  }

  .\31\31\/12--widescreen {
    width: 91.66667%;
  }
}

希望了解 "\31" "\32" "\36" "\37" 的模式，并希望翻译前 12 格声明。

Answer 1

CSS 标识符，例如类和 ID，不能以数字 (0 - 9) 开头。

来自规范：

4.1.3 Characters and case

在 CSS 中，标识符（包括元素名称、类和 ID） 选择器）只能包含字符 [a-z, A-Z, 0-9] 和 ISO 10646 个字符 U+0080 及更高，加上连字符 (-) 和 下划线（_）； 它们不能以数字开头、两个连字符或一个 连字符后跟一个数字。

但是，同一节也这样说：

反斜杠转义总是被认为是标识符或字符串的一部分。

这意味着，虽然您不能以数字开头标识符，但您可以使用将转换为数字的反斜杠转义码 (\foo)。请注意，此规则适用于 CSS，但不适用于 HTML，其中almost any character combination is an acceptable value。

这就是您在代码中看到的内容。必须转义才能在 CSS 中工作的数字 HTML 类值。以下是一些示例：

• \31 是数字 1 的 Unicode Code Point。
• \32 是数字 2 的 Unicode 代码点。
• \33 是数字三的 Unicode 代码点。

CSS中反斜杠转义的另一个目的是取消特殊字符的含义。

forward slash (/) has special meaning in CSS。因此，必须将其转义才能正确使用。

现在让我们解读代码中的类名：

.\31\/2, .\32\/4, .\36\/12 { width: 50%; }

第一个转义 (\31) 是 Unicode 中的“1”。

第二次转义（\/2）取消了正斜杠的特殊含义。

所以 HTML 看起来像这样：

class = "1/2"
class = "2/4"
class = "6/12"

以下是您列表中的更多内容：

.\31\/3, .\34\/12 { width: 33.33333%; } /* HTML class values = 1/3, 4/12 */
.\32\/3, .\38\/12 { width: 66.66667%; } /* HTML class values = 2/3, 8/12 */
.\31\/12          { width: 8.33333%;  } /* HTML class value  = 1/12      */
.\35\/12          { width: 41.66667%; } /* HTML class value  = 5/12      */
.\31\30\/12       { width: 83.33333%; } /* HTML class value  = 10/12     */
.\31\31\/12       { width: 91.66667%; } /* HTML class value  = 11/12     */

Answer 2

从我在网上找到的信息中收集到的信息，大部分情况下都在逃避一些奇怪的命名约定，从我读过的内容来看，这可能不是一个好主意。

.\31\/2, .\32\/4, .\36\/12 { /* this */
.1/2, .2/4, .6/12 { /* translates to this */
  width: 50%;
}

.\31\/3, .\34\/12 { /* this */
.1/3, .4/12 { /* translates to this */
  width: 33.33333%;
}

我不知道你是否看过这篇文章，但接受的答案很好地分解了它。在\3 之后就像开始一样。然后 \/ 正在转义斜线。

What does .container.\31 25\25 mean in CSS?