Главная → Программирование → by

Использование менее CSS Препроцессор для Smarter стилей

Как веб-дизайнер you’ Re несомненно, знакомы с CSS, язык таблиц стилей используются для форматирования разметки веб-страниц.CSS само по себе крайне простые, состоящие из наборов правил и декларации блоков, что стиль, как стиль его-и это делает в значительной степени все, что вы хотите, верно?Ну, не quite.

Видите ли, в то время как простой дизайн CSS делает его очень доступным для новичков, это также ставит ограничений на то, что вы можете делать с ним.Эти ограничения, как и неспособность установить переменные или для выполнения операций, означает, что мы неизбежно в конечном итоге повторяя те же куски стиля в разных местах.Не хороший для следующих передового опыта, в данном случае, придерживаясь сухих (don’ T повторить себя) меньше кода и проще maintenance.

Войти препроцессора CSS.Говоря простым языком, CSS предварительной обработки является метод расширения набора функций CSS, сначала написание таблиц стилей в новый расширенный язык, а затем скомпилировать код для ванильного CSS, так что он может быть прочитан веб-браузеров.Несколько препроцессоров CSS которые доступны сегодня, в первую очередь Sass __ и 7 | LESS.

What’ В чем разница?Sass был разработан как упростить и расширить CSS, поэтому такие вещи, как фигурные скобки были сняты с синтаксисом.LESS был разработан, чтобы быть как можно ближе к CSS это возможно, так что синтаксис идентичны текущий код CSS.Это означает, что вы можете использовать его сразу с существующим кодом.Недавно Sass также представила CSS-подобный синтаксис называется SCSS (Sassy CSS), чтобы сделать миграцию easier.

Если Ain’ T сломал …

К этому моменту вы, наверное, думаете: «Ну и что?Почему я должен беспокоиться об этих вещах, и как именно они будут делать мою жизнь в качестве веб-дизайнера легче “I’? Получу в том, что в момент, и я обещаю, что это будет стоит вашего времени.Во-первых, позвольте мне прояснить внимание в этом article.

В этом уроке I’ будем использовать МЕНЬШЕ, чтобы продемонстрировать, как CSS предварительной обработки может помочь вам код CSS быстрее.Но это doesn’ означает, что вы must Используйте меньше.It’ мой инструмент выбора, но вы можете обнаружить, что Sass подходит для вашего рабочего процесса лучше, так что я предлагаю дать им как выстрел.I’ поговорим немного больше об их различиях в конце article.

I’ начнем с объяснения, как менее работает и как его установить.После того, I’ буду перечислять множество проблем, которые большие файлы CSS позе, один за другим, и как именно вы можете использовать меньше решить them.

Let’! Пойдем

Установка It

Есть две части в любой препроцессор CSS: язык и компилятор.Сам язык является то, что you’ буду писать.LESS выглядит как CSS, за исключением кучей дополнительных функций.Компилятор является то, что получается, чтоМеньше кода в стандартные CSS, что веб-браузер может читать и process.

Много разных компиляторов на самом деле доступны менее, каждый запрограммированный на другом языке.There’ SA Рубин Gem, PHP version, . NET version, OS X app и одна написана на JavaScript.Некоторые из них для конкретной платформы, как приложение OS X.Для этого урока я рекомендую версию JavaScript (less.js), потому что it’ самый простой для начала with.

Использование JavaScript компилятор очень просто.Просто включите скрипт в HTML код, а затем она будет живой процесс менее при загрузке страницы.Мы можем включить наш МЕНЬШЕ файл так, как мы бы стандартные таблицы стилей.Here’ Это код, чтобы положить между <head> теги вашей наценки: 

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

Обратите внимание, что I’ м ссылкой на less.js сценарий непосредственно с сервера Google Code.С помощью этого метода, вы don’ даже не придется загружать сценарий, чтобы использовать его.Ссылка стилей становится выше сценарий, чтобы гарантировать ее загружается и готова к препроцессора.Кроме того, убедитесь, что href значение указывает на местоположение вашего .less file.

That’ все.Теперь мы можем начать писать меньше кода в наших .less файл.Let’ пойдем дальше и посмотрим, как LESS позволяет работать с CSS easier.

1.Чистое структуру с Nesting

В CSS, выпишем все правила устанавливаются отдельно, что часто приводит к длительным селекторов, которые повторяют те же вещи снова и снова.Here’ S типичный пример: 

#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}

LESS позволяет нам гнездо наборов правил в другие наборы правил, как способ показать иерархию.Let’ S переписать приведенный выше пример с вложением: 

# header {
  #nav {
    ul {
      li {
        a {}
      }
    }
  }
}

I’ ве опущены содержимое из селекторов для простоты, но вы можете видеть, как структура кода быстро меняется.Теперь вы don’ т придется повторить селекторы снова и снова, просто гнездо соответствующего набора правил в другой, чтобы указать иерархию.It’ также отличный способ сохранить код организована, потому что группы связанных элементов вместе visually.

Кроме того, если вы хотите, чтобы псевдо-классы этой структуры вложенности, вы можете сделать это с & символ.Псевдо-классы такие вещи, как :hover :active и :visited.Ваш код будет выглядеть следующим образом: 

a {
  &:hover {}
  &:active {}
  &:visited {}
}

2.Переменные для более быстрого Maintenance

Мы обычно применяется палитра цветов по всему сайту.Любая цвета могут быть использованы для нескольких элементов и так будет повторяться на протяжении всего кода CSS.Чтобы изменить цвет, you’ D должны сделать “ найти и replace.”

Но that’ не совсем это.Кроме того, можно выделить эти значения в отдельные наборы правил, но с помощью этого метода, наборы правил будут продолжать расти, как вы добавить больше цветов через веб-сайт, что приводит к раздутым селекторы.Here’ S Что I’ говорюо: 

#header, #sidebar .heading, #sidebar h2, #footer h3, .aside h3 { color: red; }

Сделать простое изменение цвета, we’ повторно столкнулся с длинными селекторов, все посвященное что одним цветом.It’ ы не очень.LESS позволяет указать переменные в одном месте, например, для бренда цвета, границы длины, боковые поля и так далее, а затем использовать переменные в других стилей.Значение переменной …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.