Что означает этот нетрадиционный код 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-идентификаторы, такие как классы и идентификаторы, не могут начинаться с цифры (0 - 9).

Из спецификации:

4.1.3 Символы и регистр

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержать только символы [az, AZ, 0-9] и символы ISO 10646U + 0080 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры , двух дефисов или дефиса, за которыми следует цифра.

Однако в том же разделе говорится следующее:

Экранирование с обратной косой чертой всегда считается частью идентификатора или строки.

Это означает, что, хотя вы не можете начать идентификатор с цифры, вы можете использовать код обратной косой черты (\foo)это преобразует в цифру.Обратите внимание, что это правило применяется в CSS, но не в HTML, где почти любая комбинация символов является приемлемым значением .

Так вот, что вы видите в своем коде.Числовые значения класса HTML, которые должны быть экранированы для работы в CSS.Вот несколько примеров:

• \31 - это кодовая точка Unicode для цифры один.
• \32 - кодовая точка Unicode для цифрыtwo.
• \33 - это кодовая точка Unicode для цифры три.

Другая цель экранирования обратной косой черты в CSS - отмена значения специальных символов.

Косая черта (/) имеет особое значение в CSS .Поэтому его необходимо экранировать для правильного использования.

Итак, давайте теперь расшифруем имена классов в вашем коде:

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

Первый escape (\31) - это Unicode для "1".

Второй escape (\/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%;
}

Iне знаю, видели ли вы эту статью, но принятый ответ разбивает ее довольно хорошо.после \3 похоже на начало.тогда \/ ускользает от косой черты.

Что означает .container. \ 31 25 \ 25 в CSS?