Як почати використовувати CSS препроцесори
Всім здрастуйте. У зв'язку з останніми постами в цьому блозі на тему CSS препроцесори вирішив внести і свої 5 копійок. Сподіваюся, усім тим, хто ще не користується цим чудовим інструментом, цей пост допоможе це виправити.
SCSS, SASS, LESS відрізняються синтаксисом. Я вибрав SCSS, тому що його синтаксис найближчий до нативного CSS.
Основні фішки, за які я полюбив препроцесори: 1)ЗмінніЯ створюю готельний файл vars.scss, де вказую в змінних колір тексту, посилань, фону та інше. Надалі, якщо дизайнер вирішить змінити колір посилань, мені знадобиться змінити лише один рядок. І, до речі, над змінними можна застосовувати арифметичні дії. 2)Вкладені класи чи успадкуванняЦе найкрутіша штука. Більше не треба писати конструкції типу:
Тепер я це роблю так:
3)Mixins - користувальницький функціїМіксини – з технічного боку – функції. Фішка в тому, що міксину можна встановити параметри.
Такі штуки дуже допомагає в тому ж прикладі із закругленими кутами. У міксині враховуємо всі префікси, а в коді вже заокруглюємо кути одним рядком.
Compass – це CSS фреймворк на основі SASS. До всіх принад SCSS він додає купу готових міксинів, хелперів і ще кілька цікавих фішок.
По-перше, для тих же округлених кутів або CSS3 властивостей не треба писати свої міксини, все вже є і, звичайно, з усіма префіксами. По-друге, хелпери, які дозволяють працювати з кольором, зображеннями та багатьом іншим. По-третє, лейаути. Притиснути футер до низу екрана можна одним рядком, підключивши відповідний файл
А ще компас вміє збирати спрайт із окремих картинок і при цьому він ще створює спеціальний клас для кожної картинки у складі.спрайт. Compass дуже цікава штука та я розповів про малу частку всіх його можливостей. Читайте докладніше у офіційній документації. compass-style.org/reference/compass/
І на останок
Раніше у мене був один, максимум два css файли, де зберігалися всі стилі. Чим більший проект, тим важче було працювати зі стилями. Зараз у мене на кожен логічний блок (меню, підвал, шапка тощо) — окремий файл, який потім компілюється з рештою до одного спільного.
Як почати використовувати
Варіант номер разів
2. Встановлюємо рубі
3. Запускаємо консоль Windows (Win+R у вікно ввести cmd)
5. Тепер найважливіше. Спочатку встановлюємо Compass. Пам'ятайте, що всі команди виконуються з каталогуRuby200\bin. Тобто у мене весь рядок виглядає такC:\Ruby200\bin>compass.bat gem update --system1) Перебуваючи в каталозі Ruby200bin пишемо команду gem.bat update --system 2)gem.bat install compass
6. Тепер можна створити новий проектcompass.bat create "C://myproject"і отримуємо всю необхідну структуру, та ще відразу з compass/reset (скидання стилів)
7. Для «стеження» за змінами у проекті використовуємо командуcompass.bat watch C://myproject
Для того, щоб постійно не запускати консоль для створення нового проекту та стеження за ним (а стеження треба запускати після кожного перезавантаження комп'ютера) існує дуже зручна програма Prepos (http://alphapixels.com/prepros/) Просто перетягуєте у вікно програми папку зі своїм проектом і Prepos починає за ним стежити і звітує приємним віконцем про результати. У програми досить багато налаштувань і повна підтримка Компаса, а також можна «стежити» за js файлами та з кількох компілюватиодин, та ще й у стислому вигляді.
Отже, все, що я описав вище є на цій сторінці http://compass-style.org/install/
Варіант номер два
У момент написання статті я зайшов на наведений вище сайт і там з'явилася спеціальна програма, для тих хто не товаришує з командним рядком. http://mhs.github.com/scout-app/
1. Качаємо програму, встановлюємо
2. У вікні програми, у лівому нижньому куті тиснемо на "+" і вибираємо каталог зі своїм проектом
3. У правій частині з'явиться вікно налаштувань, там є 2 обов'язкові параметри: Input Folder і Output Folder.
4. Попередньо створюємо в робочому каталозі ще 2 - /scss/ і /css/ У першому у нас будуть робочі файли, у другому скомпільований .css файл
5. Потім тиснемо стрілку в лівій частині вікна біля назви проекту і програма починає «стежити» за змінами, результати яких можна побачити в лівій частині на вкладці Log
Перевага першого варіанта, напевно, тільки для тих, хто користується рубі. Їм просто потрібно буде завантажити компас та створити проект. Для всіх інших другий варіант кращий.