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

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 разработчики, дизайнеры и веб-мастера по всему миру.

Комментарии

Вариация на

Вариация на тему Sass, еще и, на первый взгляд, синтаксически с ним совместимая? Мило) Надо будет посмотреть подробнее...

Настройки просмотра комментариев

Выберите нужный метод показа комментариев и нажмите "Сохранить установки".

Отправить комментарий

Содержание этого поля является приватным и не предназначено к показу.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <blockcode> <dd>
  • Строки и параграфы переносятся автоматически.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. The supported tag styles are: <foo>, [foo].
  • Use [gist:####] where #### is your gist number to embed the gist.

Подробнее о форматировании

CAPTCHA
Для отсева спамеров)
r
E
G
x
8
W
Enter the code without spaces and pay attention to upper/lower case.