Главная > Образование и Изучение, CSS/Style Sheets > Изучаем LESS: Разделяй и властвуй!
Изучаем LESS: Разделяй и властвуй!9 июля 2012, 13:25. Разместил: Design FactoRy |
Мы медленно но верно продвигаемся к завершению нашей серии статей о LESS, и на этой части нам хотелось бы заострить внимание. Одно из лучших свойств LESS заключается в том, насколько модульным и организованным может быть ваш код, и как он не вынуждает нас добавлять веб-сайтам вес и лишние запросы (если вы компилируете код локально посредством LESS.app, CodeKit или как-либо другим компилятором). Снарядитесь чашечкой кофе, вашим любимым текстовым редактором, и давайте же приступим к изучению того, как разделять наш LESS-код таким образом, чтобы все было чисто и аккуратно. Если вы не читали 5 наших предыдущих статей, то мы настоятельно рекомендуем вам ознакомиться с ними: Изучаем LESS: введение Изучаем LESS: Использование переменных Изучаем LESS: Mixin'ы Изучаем LESS: Вложенные правила Изучаем LESS: Использование функций Настройка проекта Когда бы мы ни начинали проект с нуля при помощи LESS, мы всегда создаем простенькую структуру каталогов. Как видно, наши коды LESS и CSS находятся в отдельных папках. Следующим этапом всегда идет добавление сайта в LESS.app (или CodeKit, если пожелаете). LESS.app автоматически произведет поиск всех LESS-файлов в каталоге вашего сайта и подготовит их к компилированию. Перед тем как сделать это, давайте создадим несколько LESS-файлов, и научимся модулировать код таким образом, чтобы в конце мы могли все аккуратно собрать вместе. Создание файлов LESS Абсолютно всегда мы первым делом создаем LESS-файл style.less. Этот файл будет компилироваться в style.css, и выполнять задачи основного CSS-файла для всего проекта. Важно запомнить, что комментарии в LESS определяются двойным слешем (//), и не компилируются в финальный файл CSS. Обычные комментарии CSS (*/ … /*) компилируются как комментарии, и могут быть использованы для организации обычных комментариев. Итак, давайте перейдем к отправной точке – файлу style.less.
Не так уж и много идет в этот файл… пока что. Переходя к нашему следующему LESS-файлу, мы открываем проект Энди Кларка 320 and Up для того, чтобы получить файл сброса LESS, который он разработал.
А теперь давайте перейдем к красоте LESS. Нам нужно включить файл сброса в финальный CSS, правильно? Все, что нам нужно сделать, это импортировать его при помощи строчки кода. Теперь наш обновленный файл style.less выглядит следующим образом:
Вы можете видеть, как отдельное хранение файлов LESS ускоряет процесс разработки, так как у нас уже есть файл сброса, который можно использовать в каждом проекте. Теперь вам не придется каждый раз искать файл сброса, когда вам нужно будет начинать новый проект, просто импортируйте файл reset.less! Создание дополнительных файлов LESS Для данного примерного проекта мы создали два дополнительных файла LESS, variables.less и typography.less. Variables.less
и Typography.less
Создав два этих файла, все, что нам останется сделать, это импортировать их в наш style.less, сохранить, и тогда наши файлы волшебным образом скомпилируются вместе в один style.css. Вот наш обновленный файл style.less с необходимыми включениями:
Наша финальная скомпилированная версия оказалась немного объемной для того, чтобы опубликовать ее на странице, поэтому мы включили все файлы примеров в архив для скачивания. Надеемся, что вам понравилась эта часть нашей серии, посвященной изучению LESS. Последняя часть раскроет вам секреты применения LESS на практике. До встречи! * Скачать zip-архив Внимание! У вас нет прав для просмотра скрытого текста.
Вернуться назад |