Главная

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

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

  • Share/Save

Комментарии

13 Май, 2011 - 11:11 — scythian

Вариация на

Вариация на тему 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>.

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

CAPTCHA
Этот вопрос помогает предотвратить автоматический спам
Image CAPTCHA
Enter the characters shown in the image without spaces, also respect upper and lower case.
To prevent automated spam submissions leave this field empty.