Сергей delphinpro

Один из слоев, самый нижний, не делайте абсолютом

Без оглядки на конкретную структуру верстки связь между инпутом и меткой осуществляется через атрибуты for=id. Вот по ним и ищите.

input.addEventListener('change', e => {
  let label = document.querySelector(`[for="${e.target.id}"]`);
  console.log(label); // Нашли!
})

$page = isset($_GET['page']) ? $_GET['page'] : false;
$allowedPages = [
    'index',
    'install',
    'news',
];

include 'modules/includes/index/index-header.php';

if ($page && in_array($page, $allowedPages)) {
    include 'modules/pages/index/'.$page.'.php';
} else {
    // Error 404
}

include 'modules/includes/index/index-bottom.php';

https://codepen.io/delphinpro/pen/GveGEY?editors=1100
адаптивно

Fixed элемент в любом случае будет вне потока и без привязок к родителям, только к вьюпорту.

Тут либо полагаться на фиксированную ширину сайдбаров, либо делать навбар абсолютом, позиционировать от родителя, а фиксацию осуществлять скриптами.

С другой стороны, если скрипты прикручивать, то ими же можно и fixed блок скорректировать.

Это невозможно.

Scss файлы компилируются до выполнения в браузере. А значение css-переменной присваивается именно во время выполнения.

Попробуйте наоборот:

$font-size: 16px;

@function rem($px) {
  @return ($px / $font-size) + rem;
}

:root {
  --font-size: #{$font-size};
}

Потому что слово opechatka вполне себе валидное выражение для тега. Да, такого тега не существует. Но компилятору нельзя выдавать белый список тегов, так как могут появиться новые.

Оба варианта

opechatka
.soc {
}

opechatka .soc {
}

идентичны синтаксически.

А здесь у вас ошибка, потому что отсутствует двоеточие, значение и точка-с-запятой

{
  opechatka
  display: flex;
}

Не проверял, но думаю, что такой варик тоже не вызовет ошибку, по причине, описанной выше:

{
  opechatka: 10px;
  display: flex;
}

Функция str_pad дополняет входную строку до нужной длины любым символом, слева и/или справа.

Этого достаточно для решения поставленной задачи.

$resultArray = [];

for ($i = 1; $i <= 9999; $i++) {
  $resultArray[] = str_pad($i, 4, '0', STR_PAD_LEFT);
}

var_dump($resultArray);

пояснение функции

str_pad(
  $i,           // текущее число (оно будет приведено к строке автоматически)
  4,            // дополнить до 4-х символов
  '0',          // нулями
  STR_PAD_LEFT  // слева
)

С циклом, надеюсь, знакомы.

Александр, Последнее условие вставляет палки в колеса.
265 *3 = 795 < 850; плюс медиа привязаны к вьюпорту.

В общем вот вариант, он работает, когда .parent ограничивается только вьюпортом.
Сделайте padding для body, медленно изменяйте размер панели, поймете, о чем я.
Можно внести поправки в значения медиазапросов на реальном сайте.

Старый скринкаст. Уже не помню где скачивал. Кажется у Кантора.
https://yadi.sk/d/KcvIExiP3JehyN

Гугловскую утилиту возьмите https://developers.google.com/speed/webp/download
В комплекте и кодер и декодер.

https://github.com/joshbuchea/HEAD

Если нужна точка, то напишите точку =)

.class1, .class2 {
    &.subclass {
        color: #CCC;
    }
}