дневник заведен 09-08-2004
постоянные читатели [32]
3 CaHuTaPa, 517design, Arde, Art`Is, aviabaza, BlackDrago, CyberJoe, DeadMorozz, Depeche Mode, DMZ, d_r, Ewige, glv12 Marla Zinger, goldenandy, Grimble, Hydralisk, Jude, Katrine Himitsu, Leave-me-alone, MISTIK, My3a, Nash, Nicholas Hawkwood, Pingvin, Riskoff, VorteX DrAgON, Wolfram, Букля_, достало, Муть, Рика, Эль
3 CaHuTaPa, 517design, Arde, Art`Is, aviabaza, BlackDrago, CyberJoe, DeadMorozz, Depeche Mode, DMZ, d_r, Ewige, glv12 Marla Zinger, goldenandy, Grimble, Hydralisk, Jude, Katrine Himitsu, Leave-me-alone, MISTIK, My3a, Nash, Nicholas Hawkwood, Pingvin, Riskoff, VorteX DrAgON, Wolfram, Букля_, достало, Муть, Рика, Эль
цитатник:
- • лента
дневник:
- • список
- • календарь записей
- • группы записей
- • rss
интересы [24]
программирование, C++, Depeche Mode, Star Wars, perl, DVD, JavaScript, FAR, lost, 80е, Half Life 2, долго спать, Miami Vice, веб-роботы, кентаврицы
программирование, C++, Depeche Mode, Star Wars, perl, DVD, JavaScript, FAR, lost, 80е, Half Life 2, долго спать, Miami Vice, веб-роботы, кентаврицы
16-04-2012 08:41 SASS/SCSS
Хорошая штука — этот ваш sass. Шаблонизатор для CSS с функциями, переменными, макросами, дамами и преферансом.
На самом деле есть еще LESS. И в сети много холиваров, кто же круче. Но я выбрал SASS, а точнее его вторую реинкарнацию — SCSS.
У этого дела есть отличная документация и там сразу все понятно что делать.
Из полезного:
- можно задавать переменные, если часто один и тот же параметр используется в CSS-файле. Причем в переменную можно запихать не только один цвет а сразу весь "1px solid #333"
- вложенные определения: вместо div.class1 a можно вложить a в описание div.class1
- функции для работы с цветом! Сделать рамку того же цвета, но на 30% темнее. Или смешать с белым цветом в соотношении 30/70%? Наложить красный полупрозрачный блок на зеленый без поддержки opacity? И такое можно. А если запихать базовый цвет в переменную, то цвет всего сайта меняется одной строчкой.
- Несколько свойств и вложенные свойства можно объединять в макросы. Даже в параметризованные.
- В продолжении предыдущего пункта: есть библиотека Bourbon, которая реализует CSS3-свойства через макросы. Теперь не надо прописывать -moz, -o, -webkit, -ms для поддержки нестандартных свойств. Пишем @include border-radius(1px 4px), а bourbon сам позаботиться о префиксах и порядке параметров.
Естественно, никакой браузер это на прямую не поддерживает. Поэтому scss компилируется в обычный css: вложенные правила разворачиваются, переменные подставляются, функции возвращают результат. И тут начинается самое веселое — если относится к scss как к обычному языку программирования, то после компиляции можно получить какой-нибудь css файл на тысячи строк, где половина дублируется, а правила растут на 10 уровней в глубину. Такое может заставить и браузер загрустить.
Поэтому надо сначала читать документацию и полезную статью, а только потом начинать писать. И запомнить, что не @include, а @export ваш лучший друг.
P.S.: LESS умеет (но можно и на сервере все делать тоже) компилировать свой скрипт прямо в браузере при помощи javascript. Это накладывает некоторые ограничения, но зато можно использовать скрипты в css
PhpStorm (и другие продукты) поддерживает SASS, но вложенные @media вводят его в заблуждение. Ждем исправлений.
Это все не просто так, а имеет прямое отношение к [ Программирование ]
Acer X960
[Print]
Гость