Главная

HSS - в помощь создателям CSS стилей

19 October, 2008 - 11:18 — Yuri

HSS - инструмент расширяющий возможности CSS синтаксиса, такими удобными инструментами как переменные и вложенные блоки.

Всем, кто когда-либо создавал стили CSS, будет легко понять в чём мощность этих возможностей с помощью пары простых примеров:

Переменные

var myblue = #1111AA;
var myfont = "Trebuchet MS", Arial, sans-serif;

body {
    color : $myblue;
    font : $myfont;
}

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

Также в одной переменной может храниться несколько CSS свойств:

var nomargin = { margin : 0px; padding : 0px; }

pre {
    $nomargin;
    color : #FF0000;
}

Вложенные блоки

Сначала пример того, как это делается в обычном CSS:

.faq {
    color : #BC683C;
}

.faq .form {
    width : 100px;
}

.faq .form textarea {
    width : 100%;
    height : 80px;
}

.faq .form .name {
    font-weight : bold;
}

.faq ul {
    margin-left : 20px;
    margin-bottom : 20px;
}

а теперь то, как этот же код может выглядеть в HSS:

.faq {
    color : #BC683C;
    .form {
        width : 100px;
        textarea {
            width : 100%;
            height : 80px;
        }
        .name {
            font-weight : bold;
        }
    }
    ul {
        margin-left : 20px;
        margin-bottom : 20px;
    }
}

Как видно, код получается гораздо более читаемым и понятным и отпадает необходимость при каждом объявлении нового вложенного стиля объявлять (заменять при редактировании) и название родительского.

Переменные и вложенные блоки - самые яркие возможности HSS, но ими его применение не ограничивается. Скачать HSS и более подробно почитать о нём можно на странице проекта: http://ncannasse.fr/projects/hss.

Ну и коротко о том, какое отношение проект имеет к haXe. Прямое. Он написан на haXe (платформа Neko) самим автором языка Nicolas Cannasse, исходный код открыт и опубликован на той же странице проекта. Первой целью Николя было облегчить труд тех, кто создаёт CSS стили для сайтов разрабатываемых его компанией Motion Twin, а благодаря открытости и свободе HSS (как и других проектов Николя) упростить свою работу могут теперь все желающие CSS разработчики, дизайнеры и веб-мастера по всему миру.