Сделайте ваш CSS динамичным с силой МЕНЬШЕ

1. Предположения
2. Что МЕНЬШЕ?
3. Настройка и использование LESS
4. Вариант 1. Использование файла LESS Javascript
5. Вариант 2. Компиляция файла LESS в CSS
6. Переменные Ключ к МЕНЬШЕ
7. Математические операции
8. Управление цветом
9. Вложение класса
10. Меньше Mixins
11. Параметрические миксины
12. Добавление значений по умолчанию в ваш параметрический миксин
13. Импорт файлов и комментирование в LESS
14. Завершение

Как дизайнер и эксперт по темам в течение почти последнего десятилетия, я видел много итераций того, как наша индустрия идет о создании темы. Единственной константой для дизайнеров и разработчиков тем является использование CSS (Cascading Style Sheets). Хотя да, было много версий и дополнений к CSS, но в программировании мы остались относительно такими же. Моя самая большая жалоба всегда заключалась в том, что CSS является статическим языком и не содержит переменных. Это не похоже на проблему до тех пор, пока в файлы не будут внесены изменения.

Позвольте мне проиллюстрировать мою точку зрения на примере. Вместо того, чтобы использовать # FF0000, чтобы получить флуоресцентный красный цвет и использовать его сотни раз в своей таблице стилей, не будет ли проще сохранить это значение цвета внутри переменной и просто использовать эту переменную во всех этих местах? Таким образом, если вы хотите перекрасить свою веб-страницу из этого флуоресцентного красного в менее оскорбительный цвет, вы можете просто изменить значение переменной в одном месте, и все.

Ну, друзья мои, радуйтесь! LESS здесь, чтобы сделать ваш CSS гораздо более приятным.

Предположения

Приятно отметить, что некоторые из обсуждаемых ниже тем предназначены для читателей, имеющих базовые знания HTML и CSS, а также знания о структурах кодирования. Если вы совершенно новый, я очень рекомендую посетить http://www.w3schools.com/ чтобы узнать больше о более простых методах, чтобы вы начали. Это сказал ...

Что МЕНЬШЕ?

Меньше - это препроцессор CSS, что означает, что он расширяет язык CSS, добавляя функции, которые позволяют использовать переменные, миксины, функции и многие другие методы, которые позволяют сделать CSS более удобным, расширяемым и расширяемым.

LESS - это расширенный набор CSS. Это означает, что весь код CSS является допустимым кодом LESS, но в LESS есть дополнительные элементы, которые не будут действительны в CSS. Это замечательно, потому что ваш существующий CSS уже является допустимым кодом LESS, сводя к минимуму обучение для использования LESS.

LESS добавляет очень необходимые динамические свойства в CSS. Он вводит переменные, операции, функциональные элементы, даже Javascript в смесь. Это сделает вашу жизнь проще, позволив вам писать таблицы стилей с модульным мышлением.

Настройка и использование LESS

Есть два способа использовать LESS. Вы можете создать файл LESS и конвертировать его по требованию, используя файл Javascript, или вы можете предварительно скомпилировать его и использовать полученный CSS-файл в своей теме.

Вариант 1. Использование файла LESS Javascript

Первый вариант очень похож на добавление jQuery на ваш сайт. Сначала посетите LESS сайт и возьмите файл Javascript, расположенный в разделе загрузки. Если у вас есть все, что вам нужно сделать, это связать его со своей страницей, как и любой другой файл Javascript.

<script src = "js / less.js" type = "text / javascript"> </ script>

Затем создайте файл с расширением .less и свяжите его со своей страницей с кодом ниже:

<link rel = "stylesheet / less" type = "text / css" href = "css / style.less">

Убедитесь, что вы связали свой файл LESS перед файлом Javascript. В противном случае он попытается обработать файлы .less перед их загрузкой.

Если у вас есть эта настройка, вы можете вставить любой ранее существующий код CSS в файл LESS или добавить дополнительную ссылку на CSS, поскольку LESS и CSS совместимы. Хотя этот метод является самым простым для разработки, я бы порекомендовал использовать второй метод для ваших окончательных рабочих файлов.

Вариант 2. Компиляция файла LESS в CSS

Хотя это немного более утомительно, в производственных сценариях это предпочтительнее, поскольку обработка LESS не будет выполняться браузером пользователей. LESS работает, принимая весь код LESS, который вы пишете, и конвертируя его в CSS на лету. Вместо того, чтобы наш сайт делал это по требованию, мы можем преобразовать наш LESS-файл, сохранить вывод CSS-файла и использовать его вместо преобразования по требованию при каждой загрузке страницы.

Если вы используете CMS, такую ​​как Drupal или Wordpress, вы можете найти бесплатные модули, которые позволят вам скомпилировать эти файлы непосредственно на вашем веб-сервере, а не на собственной машине, чтобы скомпилировать эти файлы.

Если вы разрабатываете плоский HTML-сайт, вы можете использовать Уинлесс небольшое локальное приложение, которое может автоматически определять все ваши файлы LESS и всякий раз, когда вы сохраняете их, оно преобразует их в файл CSS с тем же именем. Это позволяет вам продолжать ссылаться на ваш файл CSS на ваших страницах, в то же время используя потенциал LESS.

Наконец, давайте начнем изучать написание кода LESS. Как вы увидите, если вы понимаете CSS, LESS будет очень легко читать и понимать; он использует тот же стиль синтаксиса, что и CSS, поэтому он должен быть вам всем знаком. Ниже

Переменные Ключ к МЕНЬШЕ

Это, безусловно, самая основная и полезная часть LESS. Переменные в LESS работают точно так же, как в Javascript и большинстве других языков программирования. Вы можете использовать их для хранения значения, а затем использовать имя переменной вместо самого значения всякий раз, когда вам это нужно.

@ header-font: RageItalic; h1, h2, h3, h4, h5, h6 {; font-family: @ header-font; } .large {; font-family: @ header-font; }

В приведенном выше примере мы определили переменную @ header-font и присвоили ей значение «RageItalic». Теперь мы можем использовать эту переменную всякий раз, когда мы хотим использовать шрифт RageItalic. Если мы решим, что предпочли бы использовать Helvetica в качестве нашего шрифта заголовка, нам не нужно просматривать весь наш файл, мы просто изменим значение переменной.

Я нахожу большое применение для переменных при определении цветов для веб-сайта. В старые добрые времена (которые были не так давно) мы делали что-то вроде этого:

/ * Цвета для нашего сайта # ff0000 - Красный - Ссылки #cccccc - Светло-серый - Границы # 333333 - Темно-серый - Темные фоны и цвета заголовков # 555555 - Середине серый - Цвет основного текста * / body {background: # 333333; цвет: # 555555; } a {color: # ff9900; } h1, h2, h3, h4, h5, h6 {цвет: # 333333; }

Нет ничего плохого в том, чтобы документировать ваши повторно используемые цвета, как это, это хорошая практика, чтобы помочь другим дизайнерам использовать ваши таблицы стилей. Проблема в том, что, поскольку он не имеет ничего общего с функциональностью вашей таблицы стилей, он не имеет другого использования, кроме самой документации.

С LESS мы можем изменить наш рабочий процесс и фактически использовать наши комментарии вместо того, чтобы оставить его как дополнительное место в нашем файле. Таким образом, если мы хотим внести изменение, это замена одной строки вместо поиска нескольких заменяющих строк.

/ * Цвета для нашего сайта * / @ color-red: # ff0000; @ color-grey_light: #cccccc; @ color-gray_dark: # 333333; @ color-gray_medium: # 555555; body {background: @ color-grey_dark; color: @ color-grey_medium; } a {color: @ color-red; } h1, h2, h3, h4, h5, h6 {color: @ color-gray_dark; }

Важно отметить, что переменные в LESS действуют как константы. Это означает, что они могут быть определены только один раз - в отличие от переменных в других языках, которые могут быть определены столько раз, сколько вы хотите. Поэтому хорошей практикой является определение всех ваших переменных в верхней части вашей документации.

Математические операции

Еще одним забавным дополнением с меньшими затратами является возможность использовать математические операции. Это позволяет нам достичь чрезвычайно точного и точного контроля с помощью LESS. В качестве примера:

.button {@gridUnit: 5px; border: @gridUnit solid #ddd; padding: @gridUnit * 3; поле: @gridUnit * 2; }

Приведенный выше код определяет переменную @gridUnit как 5px. Эта переменная используется в 3 сегментах кода, но мы умножаем поля и отступы, чтобы получить постоянные размеры.

Операции могут быть умножением, делением, сложением и вычитанием. Иногда вам понадобятся сложные функции. Порядок операций применяется к этим математическим функциям, как в примере ниже. .box будет иметь ширину, равную 200 пикселей.

.box {@base_unit: 10px; ширина: @base_unit (20 + 20) - 2 (@base_unit + 90)}

Управление цветом

Еще несколько полезных функций LESS связаны с управлением цветом. Вы можете использовать математические операции для изменения цветов. Если вы хотите изменить значение цвета, вы можете сделать это, вычтя или добавив к нему другой цвет. ….. Чего ждать? Вы слышали меня, это означает, что мы можем смешивать цвета!

@color: # 941f1f; кнопка {фон: # 941f1f + # 222222; граница: # 941f1f - # 111111; }

Вышеуказанная операция в фоновом режиме увеличивает каждое значение HEX на 2. В результате получается «B64141», что является более легким изменением исходного цвета. Операция на границе уменьшит каждое значение HEX на 1, что приведет к более темному цвету: «830E0E».

Вложение класса

При написании CSS вы используете каскадный стиль. То есть мы каскадируем классы в строке, чтобы указать конкретные элементы, которые мы хотим стилизовать. Чтобы изменить поля абзацев внутри тизеров постов блога и только на странице статьи, вы можете использовать следующий код.

.article.teaser p {margin: 0 0 12px 0; } .article.post p {margin: 0 0 12px 0; }

В этом подходе нет ничего плохого, но когда вы также хотите изменить ссылки, блок-кавычки, заголовки, предварительно отформатированный текст и т. Д. Внутри одного и того же элемента, вам нужно будет поставить перед каждым префикс «.article.teaser» и «.article. сообщение". Это делает наш код более трудоемким для написания, большим и трудным для чтения.

В LESS мы можем вложить эти правила, что дает более короткую и логичную версию нашей таблицы стилей. Обратите внимание.

.article {.teaser, .post {p {margin: 0 0 12px 0; } a {цвет: синий; } a: hover {color: green; } img {padding: 20px; }}}

Видишь, что я там сделал? Я вложил теги A, P и IMG в два класса статей. Кстати, табуляция не обязательна, но делает ее более разборчивой и удобной для чтения. Вы можете вложить сколько угодно правил, что впоследствии избавит вас от многих неприятностей. Вы когда-нибудь хотели изменить отступы чего-либо, но получили травмы, потому что не знали точно, на какие элементы это может повлиять? Используя вложение, вы можете избавиться от множества догадок из своего CSS.

Меньше Mixins

Mixins в LESS - это не только экономия времени, но и просто отличная организация! Вы когда-нибудь создавали закругленную границу только в двух верхних углах всех ваших элементов? Это ужасный беспорядок.

.tab {-webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6 пикселей; -moz-border-radius-topleft: 6 пикселей; -moz-border-radius-topright: 6 пикселей; border-top-left-radius: 6px; border-top-right-radius: 6 пикселей; }

Вы заканчиваете с кодом выше на ВСЕХ! С LESS вы можете изменить все это, создав миксин. Миксины - это многократно используемые элементы, которые вы можете добавить как правило стиля к любому другому элементу. Прелесть их в том, что нет дополнительного синтаксиса для изучения. Вы просто называете имя класса.

.ounded_corners {-webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6 пикселей; -moz-border-radius-topleft: 6 пикселей; -moz-border-radius-topright: 6 пикселей; border-top-left-radius: 6 пикселей; border-top-right-radius: 6 пикселей; } .tab {background: # 333; цвет: #fff; .закругленные углы; } .submit {.ounded_corners; }

В приведенном выше коде мы определили элемент .ounded_corners, чтобы закругленные углы были сверху. Когда мы добавляем это к любому другому элементу как миксин (см. .Tab), мы в основном импортируем правила, которые мы создали для него. Из-за синтаксиса mixin вы можете использовать любой ранее определенный элемент в качестве mixin.

.ounded_corners {-webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6 пикселей; -moz-border-radius-topleft: 6 пикселей; -moz-border-radius-topright: 6 пикселей; border-top-left-radius: 6px; border-top-right-radius: 6 пикселей; } .tab {background: # 333; цвет: #fff; .закругленные углы; } .submit {.tab; фон: красный; }

Правила CSS для элемента .submit теперь будут вызывать закругленные углы сверху, белый цвет и красный фон (оригинал # 333 заменяется красным). Миксины также могут принимать аргументы, которые являются переменными, передаваемыми блоку селекторов, когда он смешивается. Они известны как параметрические миксины.

Параметрические миксины

Параметрические миксины звучат чрезвычайно сложно, но они решают проблему очень простым способом. В приведенных выше примерах вы видели, как мы можем определить элемент с радиусом 6 пикселей в его верхних углах. Как насчет того, чтобы элемент имел радиус 3 пикселя? Должны ли мы объявлять новые миксины для каждого нового случая? Конечно, нет, мы можем добиться того же с параметрическими миксинами.

Они напоминают функции, потому что вы создаете не только миксин, но и добавляете переменную, которую можно передать при вызове. Давайте перепишем пример с радиусом границы, чтобы посмотреть, как это делается.

.ounded_corners (@radius) {-webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab {background: # 333; цвет: #fff; .rounded_corners (6px); } .submit {.ounded_corners (3px); }

Приведенный выше код даст нашему элементу tab радиус 6px, а элемент submit получит радиус 3px.

Добавление значений по умолчанию в ваш параметрический миксин

В том же духе, иногда 95% ваших применений будет включать только один размер, и у вас есть исключение. В нашем случае давайте скажем все, что мы используем mixin значение по умолчанию.

.ounded_corners (@radius: 6px) {-webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .tab {background: # 333; цвет: #fff; .закругленные углы; } .submit {.ounded_corners (3px); }

В этом примере элемент tab получит радиус границы по умолчанию 6px, а элемент submit получит 3px по мере необходимости.

Импорт файлов и комментирование в LESS

К счастью, как и в обычном CSS, вы можете импортировать файлы. Это отлично подходит для организации разделов стилей. LESS позволяет импортировать как CSS, так и LESS файлы со следующим синтаксисом с тем же вызовом, который вы бы сделали из CSS:

@import "reset.min.css"; @import "framework.less"; @import "widgets";

Важно отметить, что, хотя в этом нет необходимости, вы должны включить расширение .css, например .css или .less, чтобы помочь другим пользователям узнать, какой тип файла он ищет. Если вы не включите расширение, LESS будет считать, что это файл .less. Таким образом, в приведенном выше примере 2 и 3 будут искать файлы .less, а 1 будет пытаться загрузить файл .css.

Как и ожидалось, многострочные комментарии доступны в LESS так же, как они используются в CSS. Кроме того, LESS позволяет использовать однострочные комментарии, как в PHP; используя двойную косую черту.

/ * Это мой основной файл LESS. Он определяет, как выглядит большая часть сайта. * body {padding: 0px; // Это сбрасывает заполнение тела}

Завершение

Несмотря на то, что мы только слегка коснулись того, что может сделать LESS, эти простые функции помогут любому, кто работает в CSS, сделать его не только менее трудоемким, но и более легким для изменения в процессе разработки и производства. Для начинающих LESS помните, что это похоже на CSS, поэтому вы можете медленно изучать описанные выше приемы и интегрировать их по одному в свои таблицы стилей.

Для получения дополнительной информации не забудьте взглянуть на меньший веб-сайт и документацию, расположенную по адресу http://lesscss.org , Надеюсь, вам понравилась эта статья, и вы скоро вернетесь, чтобы более подробно рассмотреть LESS.

Идти от Сделайте ваш CSS динамичным с силой LESS для блога

Вернуться к Unleashed Technologies Домашняя страница

Похожие

Комментарии