# Интеграция с SASS фреймворком

# Включение сгенерированных стилей компонентов в режиме разработки

Включение сгенерированных CSS стилей SASS компонентов в режиме разработки осуществляется с помощью пользовательского un-pipe тега в head части HTML страницы:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <un-pipe sass="app, grid, btns"></un-pipe>
</head>
<body>
    
</body>
</html>

Таким образом, мы связали 3 sass компонента app, grid, btns с нашей страницей, это необходимо для того, чтобы

автоматически включать сгенерированные css стили компонентов к документу
создать связь между sass компонентами и html страницей

TIP

С помощью un-pipe тега осуществляется привязка SASS компонентов с HTML страницей. Данная связь необходима для того, чтобы можно было автоматически сгенерировать SASS релиз с необходимым набором компонентов относительно выбранной html страницы.

# Правила sass компонента в style теге

В ungic framework имеется возможность писать SASS правила компонента непосредственно из HTML документа. Подробнее об этом, смотрите в данном разделе.

# Использование SASS в виде данных

SASS framework позволяет экспортировать на лету данные в HTML плагин, эти данные могут быть использованы при сборке HTML шаблонов, подробнее о включении SASS опций в шаблоны.

# Упрощение написания классов и наследование значений аттрибутов родителей (@)

При рекомендуемом подходе создания CSS правил SASS компонентов, селектор для стилей строится относительно имени компонента, пример:

Имеется app sass компонент, со следующими css правилами:

@use ".core" as this;

// Обернули компонент с помощью класса с именем компонента .app
@include this.component {
    &-btns {
        @include this {
            &-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                height: this.config(btn-height);
                padding: 0 this.prop(padding, left);
                &-icon {
                    display: inline-block;
                    font-size: this.prop(font-size) * .2;
                }
            }    
        }    
    }    
}

Результат в .CSS будет следующим:

.app-btns .app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: this.config(btn-height);
    padding: 0 this.prop(padding, left);
}
.app-btns .app-btn-icon {
    display: inline-block;
    font-size: this.prop(font-size) * .2;
}

Разметим с полученный результатом наш HTML компонент:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="app">
        <div class="app-btns">
            <button class="app-btn">
                Send
                <i class="app-btn-icon" aria-hidden="true"></i>
            </button>
        </div>
    </div>
</body>
</html>

Из примера выше мы видим, что все дочерние html элементы наследуют название класса родительского элемента или имя самого компонента, тоже самое происходит и при написании .css правил без использования SCSS / SASS препроцессора. Для упрощения написания css селекторов, препроцессоры поддерживают вложение правил, что избавляет нас от повторного написания родительских классов, а в HTML плагине был разработан функционал наследования значений аттрибутов родительских элементов, пример:

<!-- Отмечаем имя компонента с помощью атрибута cid -->
<!-- С помощью @ задаем класс компонента (в данном случае @ заменится на имя компонента) -->
<div class="@" cid="app">
    <!-- @ - заменится на имя компонента -->
    <div class="@-btns"> 
        <!-- @ - заменится на имя компонента -->
        <button class="@-btn"> 
            Send
            <!-- @1 - заменится на первый класс родительского элемента -->
            <i class="@1-icon" aria-hidden="true"></i>
        </button>
    </div>
</div>

Результат:

<div class="app">
    <div class="app-btns">
        <button class="app-btn">
            Send
            <i class="app-btn-icon" aria-hidden="true"></i>
        </button>
    </div>
</div>

Как это работает:

Необходимо задать корневому элементу компонента атрибут cid с именем компонента
Использовать @ символы, для того, чтобы подставить значение из однотипного аттрибута ближайшего родительского элемента
- @ - заменяется на имя ближайшего компонента или на имя аппликации (указывается в аттрибуте main у un-pipe инструмента)
- @\d+ - заменить конкретным по счету значением атрибута (когда значения разделены пробелом, вроде аттрибута class) ближайшего родительского элемента. Число указывает на порядковый номер значения и начинается с 1.
- @@ - заменяется на имя аппликации, в случае если имя не указано,будет вести себя как - @1 (Вернет первое значение однотипного аттрибута ближайшего родителя)
- @{2,} - После двух @ символов, начинается сложение по формуле: от общего кол-ва вместе идущих в ряд @ символов вычитается 2 символа (Sum of @ - 2 = @n), полученное число n - является порядковым номером значения аттрибута, пример: @@@ - тоже самое что и @1, @@@@ = @2

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

span
id
for
cid
style[sass]

TIP

Используйте обратный слэш \ для экранирования, примеры:

<div cid="app" class="@\@"></div>
<!-- the result will be as follows -->
<div class="appapp"></div>

<!-- or -->
<div cid="app" class="@\1"></div>
<!-- the result will be as follows -->
<div class="app1"></div>

Ещё примеры:

<div id="@" cid="app">
    <div id="box">
        <div class="@-box" id="@1-cell"></div>
        <div class="@-box" id="@-cell"></div>
    </div>
</div>

Результат будет следующим:

<div id="app">
    <div id="box">
        <div class="app-box" id="box-cell"></div>
        <div class="app-box" id="app-cell"></div>
    </div>
</div>

<div cid="component">
    <!-- @ будет заменена именем компонента -->
    <div class="@-header"></div>

    <!-- возможно вложение-->   
    <!-- неограниченное кол-во классов -->
    <!-- в данном контекста @ - будет иметь ID текущего компонента, а точнее btns -->
    <button class="@-btn @-control @-desktop" cid="btns">
        <!-- выбор конкретного класса родителя -->
        <i class="@2-icon"></i>
    </button>   

    <!-- экранирование -->
    <div class="@\2"></div>
    <!-- или -->
    <div class="@\@"></div>
</div>

Результат будет следующим:

<div>
    <div class="component-header"></div>
    <button class="btns-btn btns-control btns-desktop">
        <i class="btns-control-icon"></i>
    </button>
    <div class="component2"></div>
    <div class="componentcomponent"></div>
</div>

Можно назначить имя основного компонента с помощью main атрибута у un-pipe тега, которое будет использоваться по умолчанию в случае отсутствия предка с cid атрибутом:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <un-pipe sass="app" main="app"></un-pipe>
</head>
<body>
    <div class="@"></div>
</body>
</html>

← Разделение документа на части Интеграция с Icons plugin →