Форум /

Привет! Используем LESS. Тулзы БЭМ не используем, только именование классов. Нужно по модификатору блока переопределить стиль для нескольких его элементов. Можно ли не размножать название модификатора или имя блока?

.coolblock {
    &__e1 { color:#000;  }
    &__e2 { color:#333;  }

    // так размножаем модификатор
    &_red &__e1 { color:#600; }
    &_red &__e2 { color:#A00; }

    // а так размножаем имя блок
    &_red {
       .coolblock__e1 { color:#600; }
       .coolblock__e2 { color:#A00; }
    }

    // а хочется чего-то примерно такого
    // но это будет компайлиться в .coolblock_red__e2
    &_red {
        &__e1 {color:#600;}
        &__e2 {color:#A00;}
    }
}

Есть ли какой-нибудь финт на этот случай? Спасибо!

10 years ago

qfox

http://lesscss.org/features/#variables-feature Через интерполяцию переменной?

@b: coolblock
.@{b} {
  /* ... */
}

Ну про http://lesscss.org/features/#parent-selectors-feature знаете, наверное.

10 years ago

dubrowsky

Спасибо! Про вариант с интерполяцией думал. Во-первых, чтобы использовать что-то кратко-бессмысленное типа "b", надо соблюдать правило "один блок на файл". Во-вторых, даже если так, получается не очень эстетично:

@b: ~".coolblock";
@{b}_red {
    @{b}__e1 {color:#600;}
    @{b}__e2 {color:#A00;}
}

Пальцы переломаешь, пока наберешь все эти собачки и скобочки =(

Про parent selector знаю, мой сниппет из вопроса наполовину из него и состоит. Он позволяет без дублирования писать правила "блок - элементсмодификатором", но при необходимости сделать каскадное правило "блоксмодификатором - элемент", приходится повторяться.

Вот у Стилуса вроде планировалось нечто похожее на то, что мне нужно: https://github.com/stylus/stylus/issues/1240 - но тоже не совсем то.

У меня руки тянутся накидать препроцессор, который будет заменять # во вложенных правилах на корневой селектор. Тогда можно будет писать так:

.coolblock {
    #_red {
        #__e1 {}
        #__e2 {}
    }
}

- чтобы подсветка не отвалилась, а вероятность встретить настоящий ID, да еще и во вложенном правиле, да еще и начинающийся с "_" или "-" - минимальна. Однако, это будет очевидный велокостыль, поэтому пока ищу штатное решение.

10 years ago

qfox

нене:

.&{b} {
  &__дальше_как_обычно {
  }
  &__и_так_далее {
  }
}

У меня руки тянутся накидать препроцессор, который будет заменять # во вложенных правилах на корневой селектор. Тогда можно будет писать так:

Тогда стоит посмотреть в сторону PostCSS. ;-)

10 years ago

dubrowsky

PostCSS - это прекрасно, но у нас процессинг на голом PHP. Поэтому вместо постпроцессора придумал костыль с форматтером для lessphp (который https://github.com/leafo/lessphp ). Ничего не умеет, решает одну единственную проблему - правила элемента внутри правил блока-с-модификатором. Хитрость в строчке #__el { Просто оставлю это здесь, на память =) Возможно, после некоторой эксплуатации, напишу пост.

<?php    
$src = '.block {
    &__el {
        color:#000;
        &_active {
            color:#333;
        }
    }
    &_dark {
        #__el {
            color:#AAA;
            &_active {
                color:#FFF;
            }
        }
    }
}';
/* 
На выходе получим:
.block__el { color:#000; }
.block__el_active { color:#333; }
.block_dark .block__el { color:#AAA; }
.block_dark .block__el_active { color:#FFF; }
*/

class lessc_formatter_bemhash extends \lessc_formatter_classic {
    public function block($block) {
        if (!is_array($block->selectors)) {
            return parent::block($block);
        }
        foreach ($block->selectors as &$sel) {
            if (strstr($sel, '#__')) {
                if (!preg_match('~^\s*(\.[^\s\_]+)~', $sel, $block_base)) {
                    continue;
                }
                $sel = str_replace('#__', $block_base[1].'__', $sel);
            }
        }
        parent::block($block);
    }
}

$lc = new \lessc();
$lc->setFormatter('bemhash');
$output = $lc->compile($src);
echo "<pre>".$output."</pre>";

10 years ago

belozer

Я одно время тоже задавался этим вопросом... Но пришёл к следующей структуре


.tables
{
    width: 100%;
    min-height: 450px;
    border: 1px solid #e5e5e5;
    background: #fff;
    letter-spacing: 1px;

    &_main
    {
        border: none;
        min-height: 150px;
        margin-bottom: 60px;
    }
}

.tables__head
{
    margin: 30px 88px 25px 88px;
    padding-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
    color: #818181;
    clear: both;

    &_main
    {
        margin: 30px 0;
    }
}

.tables__row
{
    display: inline-block;
    margin: 0px 0px 0 80px;
    color: #464536;
    padding: 12px 8px;
    // min-width: 655px;
    opacity: 1;
    transition: .3s;
    position: relative;
    color: #B4B4B4;

    &_main
    {
        display: inline-block;
        color: #464536;
        margin: 0;
        padding: 8px 8px 8px 0;
        min-width: 936px;
    }

    &:hover
    {
        background: #f5f5f5;

        .tables__row-actions
        {
            opacity: 1;
            transition: .4s;
        }
    }

    &_status_deleted
    {
        opacity: .4;
        transition: .3s;
    }
}

.tables__row-actions
{
    // display: inline-block;
    // float: left;
    width: 50px;
    opacity: 0;
    position: absolute;
    left: -50px;
}

// НАБОР ДЛЯ МЕСЯЧНОЙ СТАТИСТИКИ
.tables__score
{
    width: 100px;
    display: inline-block;
}

.tables__score-type
{
    width: 150px;
    display: inline-block;
}

// НАБОР ДЛЯ ПРЕПОДОВ
.tables__groups
{
    width: 200px;
    display: inline-block;
    // float: left;
}


// НАБОР ДЛЯ ДОКУМЕНТОВ
.tables__name
{
    display: inline-block;
    width: 400px;
    margin-right: 20px;
}

.tables__ext
{
    display: inline-block;
    width: 50px;
    margin-right: 20px;
}

.tables__date
{
    display: inline-block;
    width: 200px;
}

.tables__filesize
{
    display: inline-block;
    width: 90px;
}

такой код намного читабельней для меня.

И для себя выявил следующее правило написания кода.

блок
| свойства
|__модификатор блока
    |__элементы блока

элемент1
| свойства
|__модификатор элемента1

элемент2
| свойства

элемент3
| свойства

Чтобы оставлять комментарии, необходимо авторизоваться.

LESS и дублирование имени блока/модификатора