- Лістинг 1. Приклад базового коду CSS (listing1.css)
- Лістинг 2. HTML-код, пов'язані з кодом CSS з лістингу 1 (listing2.html)
- Малюнок 1. Відображення результатів коду CSS з лістингу 1 в браузері
- Лістинг 3. Приклад базового коду CSS з використанням змінних LESS (listing3.less)
- Лістинг 4. HTML-код, який використовує LESS-версію базового CSS-коду (listing4.html)
- Компіляція на стороні сервера
- Альтернативний синтаксис коментарів в LESS
- Лістинг 5. Приклад CSS з використанням коментаря (listing 5.css)
- Лістинг 6. Попередній приклад з використанням спрощеного коментаря (listing6.less)
- Розробка адаптивного дизайну
- Оператори
- Лістинг 7. Використання множення в LESS
- вкладені правила
- Лістинг 8. Використання вкладених правил в LESS
- Лістинг 9. Попередній приклад без використання вкладених правил
- міксини
- Лістинг 10. Використання Міксини в LESS
- Малюнок 2. Форма сторінки responsive.html в браузері пристрою з вузьким екраном
- висновок
- Ресурси для скачування
Наша взаимовыгодная связь https://banwar.org/
Спрощення розробки стилів адаптивного дизайну для сучасних Web-сторінок
Технологія CSS підняла розробку Web-сторінок на новий рівень, але продовжує залишатися статичною і обмеженою в синтаксичних конструкціях. Ці обмеження є цілеспрямованими і їх сенс полягає в тому, щоб забезпечити всеохоплюючу підтримку реалізації. Однак розробники і Web-дизайнери часто знаходять роботу з CSS стомлюючої. Багато платформи для Web-розробки містять інструменти, що спрощують створення CSS з більш гнучкими можливостями і дозволяють потім компілювати результати в статичний CSS при розгортанні на Web-сайті. У наші дні існує кілька вузькоспеціалізованих проектів, сфокусованих на створенні мови, призначеного для компіляції в CSS. Одним з найбільш популярних проектів в даному напрямку є Open Source-проект Алексіса Селліера (Alexis Sellier) під назвою LESS.
Мова LESS розширює базову функціональність CSS новими можливостями, які добре знайомі розробникам - це змінні, міксини, оператори і функції. LESS компілюється в CSS або за допомогою JavaScript в Web-браузері, або в процесі попередньої обробки за допомогою інструментарію JavaScript на стороні сервера. LESS використовується в багатьох інших проектах, включаючи популярний інструментарій Twitter Bootstrap. У цій статті я познайомлю вас з LESS (буде розглядатися версія 1.4) і покажу, як використовувати його для створення удобочитаем і добре обслуговується коду CSS для сучасних Web-сайтів. Приклад коду, що розглядається в цій статті, ви знайдете в розділі Завантаження .
Завантажте останню версію LESS (на момент написання цієї статті це була версія 1.4; див. Розділ ресурси ) І можна приступати до вивчення цієї мови. Консорціум W3C розмістив на своїх вікі-сторінках деякі матеріали, присвячені вивченню CSS. Я вивчав представлені керівництва в потрібному порядку і можу сказати, що при необхідності ви можете вивчати основи CSS і LESS в зв'язці.
У лістингу 1 представлений перший приклад з керівництва W3C.
Лістинг 1. Приклад базового коду CSS (listing1.css)
p {color: red; font-size: 12px; background-color: green; }
У лістингу 2 представлений HTML-код, що змушує працювати вищенаведений CSS-код:
Лістинг 2. HTML-код, пов'язані з кодом CSS з лістингу 1 (listing2.html)
<Head> <link rel = "stylesheet" type = "text / css" href = "listing1.css"> </ head> <body> <p> This is a paragraph </ p> </ body>
На малюнку 1 зображено результат відкриття сторінки listing2.html в браузері Safari операційної системи Mac OS X.
Малюнок 1. Відображення результатів коду CSS з лістингу 1 в браузері
Позбавляємося від магічних чисел
Подивившись на код з лістингу 1, будь-який розробник, ймовірно, відразу ж зверне увагу на те, що значення в CSS жорстко задані. Цей підхід, над яким часто знущаються програмісти, іноді називають "магічними числами". Однією з найбільш важливих можливостей мови LESS є змінні. У лістингу 3 представлена версія приклади з лістингу 1 з використанням змінних.
Лістинг 3. Приклад базового коду CSS з використанням змінних LESS (listing3.less)
@ Main-text-color: red; @ Main-text-size: 12px; @ Main-text-bg: green; p {color: @ main-text-color; font-size: @ main-text-size; background-color: @ main-text-bg; }
Синтаксис лістингу 3 не є коректним кодом CSS, тому не можна просто замінити в HTML-коді файл listing1.css на файл listing3.less. Необхідно одночасно оновити HTML-код на сервері і викликати компілятор JavaScript, як показано в лістингу 4.
Лістинг 4. HTML-код, який використовує LESS-версію базового CSS-коду (listing4.html)
<Head> <link rel = "stylesheet / less" type = "text / css" href = "listing3.less"> </ head> <body> <p> This is a paragraph </ p> <script src = " less.js "type =" text / javascript "> </ script> </ body>
Зверніть увагу на те, що в лістингу 4 я розмістив тег script в розділі body. Традиційно більшість розробників розміщує теги script в розділі head. Проте, можна поміщати їх і в розділі body - перевага при цьому полягає в тому, що (цитуючи специфікацію HTML 4) "елементи script обробляються послідовно в міру завантаження документа". Сьогодні у багатьох Web-сайтів сценарії розміщуються в кінці файлів, тому основний вміст завантажується без зайвих затримок, зумовлених обробкою сценаріїв.
Компіляція на стороні сервера
Способи створення коду LESS і його розгортання для швидкого відображення в браузерах, показані раніше, цілком підходять для використання, проте такий підхід вимагає певних витрат. Кожен раз при відкритті Web-сторінки в браузері користувача виконується компіляція JavaScript, що вимагає обчислювальних ресурсів і призводить до невеликих затримок при завантаженні сторінок. При завантаженні коду з лістингу 4 в мій браузер я бачу наступне повідомлення в консолі JavaScript: "less: css generated in 36ms" (т. Е. Генерація CSS займає 36 мс.). Звичайно, 36 мілісекунд - це небагато, але це непотрібна витрата обчислювальних ресурсів і часу. Швидке завантаження сторінок є важливим фактором при роботі в Інтернеті.
Після перенесення вашого коду в робоче середовище слід перейти на використання компіляції коду LESS в CSS за допомогою інструментів JavaScript на стороні сервера. Популярним методом, описаним на Web-сайті LESS, є використання сценарію Node.js. Я вважаю за краще використовувати Rhino - самостійну JavaScript-бібліотеки, розроблену Mozilla Foundation. Щоб почати використовувати Rhino разом з LESS, необхідно завантажити та проинсталлировать Rhino (див. Розділ ресурси ). Скопіюйте файл js.jar в установчу директорію збірки. Вам буде потрібна спеціальна версія less.js, яку можна отримати, завантаживши повну версію LESS з Web-сайту GitHub (див. Розділ ресурси ). У цій статті використовується версія less.js-master / dist / less-rhino-1.4.0.js. Скопіюйте файл less-rhino-1.4.0.js в директорію з JAR-архівом Rhino, і тепер можна компілювати код LESS в CSS.
Для компіляції файлу listing3.less перейдіть в директорію, в якій він знаходиться, і виконайте наступну команду:
java -jar js.jar less-rhino-1.4.0.js listing3.less> listing3.css
Після компіляції згенерований CSS-код буде перебувати в файлі listing3.css. Нижче наводиться його вміст:
p {color: # ff0000; font-size: 12px; background-color: # 008000; }
У файлі listing3.css всі змінні LESS замінені їх значеннями, а назви кольорів - їх RGB-еквівалентами (наприклад, # ff0000 замість red). Тепер можна використовувати файл listing3.css на сервері в якості звичайного CSS-файлу.
Альтернативний синтаксис коментарів в LESS
Одним з переваг LESS є можливість більш зручного створення однорядкових коментарів. У лістингу 5 наведено приклад стандартного коментаря відповідно до керівництвом CSS консорціуму W3C.
Лістинг 5. Приклад CSS з використанням коментаря (listing 5.css)
p {color: red; / * This is a comment * / font-size: 12px; }
Нижче наведено той же самий приклад, написаний на LESS.
Лістинг 6. Попередній приклад з використанням спрощеного коментаря (listing6.less)
p {color: red; // This is a comment font-size: 12px; }
Синтаксис, який використовується в лістингу 6, більш звичний для програмістів і більш зручний для набору. Однак в силу особливостей обробки LESS-коду такі коментарі будуть відсутні в створеному CSS-коді. Якщо потрібно забезпечити відображення коментарів в браузері (наприклад, це можуть бути попередження про авторські права), необхідно використовувати стандартний синтаксис CSS.
У решти керівництва W3C детально розглядаються синтаксис селекторів і загальні властивості CSS. На цьому я перейду до розгляду більш загального випадку використання LESS, який все більш широко застосовується на практиці Web-розробниками.
Розробка адаптивного дизайну
У 2010 році багато Web-дизайнери почали використовувати підхід до створення Web-сторінок, відомий як адаптивний дизайн. При такому підході Web-сторінки спочатку проектуються таким чином, щоб їх можна було переглядати на екранах будь-яких пристроїв - від екранів невеликих мобільних пристроїв до екранів з дозволом, що перевершує дозвіл звичайних комп'ютерних моніторів.
В основі адаптивного дизайну лежать медіа-запити (media queries) CSS3, що забезпечують застосування правил CSS в залежності від типу користувацького пристрою і особливо від його розміру екрана. LESS спрощує розробку адаптивного дизайну в CSS і використанням медіа-запитів. В якості демонстрації я розгляну відмінний приклад коду адаптивного дизайну, автором якого є учасник developerWorks Боб Лі (Bob Leah), і скомпілюйте його LESS-версію. Посилання на завантаження файлу responsive.less ви знайдете в розділі Завантаження .
Оператори
Одним з ключових прийомів, використовуваних в прикладі responsive.less, є завдання основних розмірів екранів за допомогою змінних і їх подальше масштабування відповідно до розміру робочої області екрану. Як збільшувати або зменшувати я використовую оператори LESS. Наприклад, фрагмент коду в лістингу 7 містить оператори множення, за допомогою яких виконується масштабування зображення заголовка сторінки.
Лістинг 7. Використання множення в LESS
#banner img {max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); }
Змінні @bannerwidth і @mainheight в лістингу 7 є значеннями за замовчуванням, які множаться на значення змінної @scale. Щоб уникнути плутанини в синтаксисі поточна версія LESS вимагає, щоб всі вирази, що містять оператори, були укладені в дужки.
вкладені правила
Однією з найбільш корисних можливостей LESS є вкладені правила CSS. Вкладені правила допомагають створювати легко читається код. У лістингу 8 (змінений фрагмент коду responsive.less) я розмістив загальні правила CSS таким чином, що вони виявилися вкладеними в медіа-запити.
Лістинг 8. Використання вкладених правил в LESS
@media (min-width: 401px) and (max-width: 800px) {@scale: 0.75 #banner {width: (@bannerwidth * @scale); } #Banner img {max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); } #Main {width: (@mainwidth * @scale - @extrabuffer); } # Main-content {width: (@maincontentwidth * @scale * 0.75 - @extrabuffer); float: left; }}
Код з лістингу 8, що містить вкладені правила, еквівалентний нижчеподаному коду з лістингу 9, який містить кілька невложенних правил CSS.
Лістинг 9. Попередній приклад без використання вкладених правил
@scale: 0.75 @media (min-width: 401px) and (max-width: 800px) and #banner {width: (@bannerwidth * @scale); } @Media (min-width: 401px) and (max-width: 800px) and #banner img {{max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); } @Media (min-width: 401px) and (max-width: 800px) and #main {width: (@mainwidth * @scale - @extrabuffer); } @Media (min-width: 401px) and (max-width: 800px) and # main-content {width: (@maincontentwidth * @scale * 0.75 - @extrabuffer); float: left; }
У прикладі з лістингу 9 схожі правила не згруповані; крім того, при багаторазовому визначенні медіа-запиту порушується правило DRY (do not repeat yourself - не повторювати).
міксини
Інший прийом LESS, що допомагає зменшити кількість повторень, полягає в можливості створювати набори правил, які можна додавати в інші правила. Такий підхід, що отримав назву mixin - міксини - я використовую в файлі responsive.less, де ставлю за допомогою Міксини загальні правила для двох різних медіа-запитів, як показано в лістингу 10.
Лістинг 10. Використання Міксини в LESS
.media-body (@scale: 0.75) {#banner {width: (@bannerwidth * @scale); } #Banner img {max-width: (@bannerwidth * @scale); max-height: (@mainheight * @scale); } #Main {width: (@mainwidth * @scale - @extrabuffer); } # Main-content {width: (@maincontentwidth * @scale * 0.75 - @extrabuffer); float: left; } # Widget-container {width: (@widgetoutwidth * @scale * 0.75 - @extrabuffer); float: right; } .Widget-content {width: (@widgetinwidth * @scale * 0.75 - @extrabuffer); }} // Правила для перегляду на екранах шириною від 401 до 800 пікселів @media (min-width: 401px) and (max-width: 800px) {.media-body; } // Правила для перегляду на екранах шириною менше 400 пікселів @media (max-width: 400px) {.media-body (0.3); // Додаткові дії інших правил # main-content {padding: 0px; } # Widget-container {width: padding: 0px; } .Widget-content {margin: 5px; } .Widget-text {display: none; }}
У міксини можна передавати параметри - наприклад, коефіцієнт масштабування для екранів з лістингу 10. За замовчуванням коефіцієнт масштабування дорівнює 0.75. У лістингу 10 цей коефіцієнт за замовчуванням використовується для перегляду на екранах шириною від 401 до 800 пікселів. Для перегляду на екранах шириною менше 400 пікселів коефіцієнт масштабування змінюється на 0.3, а також додаються додаткові правила.
На малюнку 2 показаний вигляд сторінки responsive.html з використанням коду responsive.less у вікні браузера. Я звузив вікно браузера, щоб його ширина стала менш 400 пікселів, і ви можете подивитися, як буде виглядати сторінка на мобільних пристроях з невеликими екранами.
Малюнок 2. Форма сторінки responsive.html в браузері пристрою з вузьким екраном
У браузері Safari на комп'ютері Mac медіа-запит для екрану шириною менше 400 пікселів спрацьовує тоді, коли ширина вікна браузера наближається до 500 пікселям. Така поведінка є важливим фактором. Медіа-запити засновані на концепції вікна перегляду (viewport). Вікно перегляду - це видима область браузера, що задається в CSS в пікселях і визначається пристроєм і браузером. Пікселі CSS можуть відрізнятися від пікселів пристрої; така різниця може виникати, наприклад, при масштабуванні сторінки в браузері (див. розділ ресурси ). Крім того, розміри відображення зображення, заданий пристроєм або браузером, може відрізнятися від того, що є розміром фактичного вікна. Ця ситуація зображена на малюнку 2: ширина вікна становить приблизно 500 пікселів, але CSS сприймає її як вікно перегляду шириною 400 пікселів. Цей приклад підкреслює той факт, що адаптивний дизайн, як і всі технології Web-розробки, вимагає всебічного тестування на самих різних пристроях.
висновок
Я - архітектор і розробник програмного забезпечення, але не Web-дизайнер. LESS дозволяє мені використовувати для швидкої розробки CSS мої навички програмування, яких у мене набагато більше. Змінні і міксини дозволяють швидко змінювати необхідні настройки і дивитися, що з цього вийде, замість того щоб переглядати весь CSS-файл і шукати потрібні фрагменти коду для заміни.
Адаптивний дизайн є відомим засобом для створення доступних і керованих мобільних Web-проектів. Також він корисний при розробці альтернативних режимів перегляду, наприклад, режиму перегляду для друку. А оскільки управління різними стилями, застосовуваними для різних медіа-запитів, може виявитися дуже громіздким, то можливості LESS для спрощення і структурування CSS-коду є ще більш цінними.
Ресурси для скачування
Схожі теми
- Оригінал статті: Do more in CSS with LESS (EN).
- Дізнайтеся більше про LESS (EN) на офіційному Web-сайті проекту.
- код проекту LESS або його альтернативні версії на Web-сайті GitHub (EN). Користувачам Mac можуть стати в нагоді додаткові інструкції (EN).
- Короткий посібник W3C CSS tutorial (EN) допоможе вам вивчити основи CSS.
- Стаття Деніела Льюїса (Daniel J. Lewis) " Get started with CSS "(EN) (developerWorks, травень 2011 року) познайомить вас зі стандартними прийомами створення CSS-стилів у відповідності зі специфікаціями CSS 2.1 і CSS3.
- Зі статті Джеффа Бейла (Jeff Bail) " Використання CSS-медіазапросов для створення динамічних веб-сайтів "(DeveloperWorks, жовтень 2012 року) ви дізнаєтеся, як використовувати медіа-запити при створенні Web-сайтів, призначених для перегляду з ПК, мобільних телефонів і планшетів.
- Серія статей " A tale of two viewports "(EN) на Web-порталі QuirksMode розкриває взаємозв'язок між пікселями пристроїв і пікселями CSS.
- Дізнайтеся більше про адаптивний Web-дизайні зі статті Етана Маркотт (Ethan Marcotte) " Responsive Web Design "(EN) (A List Apart, травень 2010 р.)
- вивчіть приклади коду адаптивного Web-дизайну з використанням медіа-запитів CSS3 (EN), на яких засновані приклади цієї статті.
- У статті Алекса Старостіна (Alex Starostin) " Improve CSS development with Sass "(EN) (developerWorks, травень 2013) докладно розповідається про Saas - іншою мовою, що є альтернативою LESS.
- завантажте інструментарій Rhino (EN) для роботи з JavaScript в режимі командного рядка.
- прочитайте інші статті автора (EN) (developerWorks, листопад 2000 року - по теперішній час), присвячені CSS, XML, Python, XSLT, XHTML і іншим Open Source Web-технологіям.
- Розділ Web-розробки сайту developerWorks містить численні матеріали, присвячені різним Web-технологіям та рішенням на їх основі. В розділі Web-розробки нашої технічної бібліотеки ви знайдете технічні статті, поради, керівництва, стандарти і документи IBM Redbooks.
- Оцініть продукти IBM (EN) будь-яким зручним для вас способом: завантажте ознайомчі версії продуктів, попрацюйте з ними в онлайновому режимі або використовуйте їх в хмарному середовищі.
Підпишіть мене на повідомлення до коментарів
