Я использую LESS религиозно тех пор, как я наткнулся на это несколько месяцев назад.CSS никогда не был проблемой для меня, само по себе, но я был заинтригован идеей использовать переменные, чтобы создать нечто вроде цветовой палитры для моих сайтов и темы.Наличие цветовой палитре с фиксированным количеством вариантов на выбор помогает предотвратить меня от цвета ума и отклоняясь от выбранной style.
Как оказалось, меньше — и Sass на то пошло — это гораздо больше, чем это.МЕНЬШЕ и Sass имеют много сходства в синтаксисе, в том числе следующие:
- Mixins – Классы для classes.
- Параметрический Mixins – Классы, в который можно передавать параметры, как functions.
- Вложенные Правила – Классы внутри классов, которые сократить повторяющиеся code.
- Операции – Math в CSS.
- Цвет функции – Изменить colors.
- Пространства имен – Группы стилей, которые могут быть вызваны references.
- Область – Сделать локальные изменения в styles.
- наличие оценки – JavaScript выражения оценивается в CSS.
Основное различие между менее и Sass это путь, в котором они обрабатываются.Меньше, библиотеки JavaScript и, следовательно, обрабатывается клиентом side.
Sass, с другой стороны, работает на Руби и обрабатывается на стороне сервера.Многие разработчики не могли бы выбрать менее из-за дополнительного времени, необходимого для двигателя JavaScript для обработки кода и выходных изменение CSS в браузере.Есть несколько способов решить эту проблему.Как я обойти это, чтобы использовать меньше только в процессе разработки.Как только я закончил, я скопируйте и вставьте менее выход в Minifier, а затем в отдельный файл CSS должны быть включены в место, тем меньше файлов.Другим вариантом является использование LESS.app обобщить и уменьшать вашу меньше файлов.Оба варианта позволит свести к минимуму площадь вашего стиля, а также избежать любых проблем, которые могут возникнуть в результате браузер клиента не работает JavaScript.Хотя это вряд ли, это всегда possibility.
Обновление: Заявление выше, вызвало весьма бурную дискуссию и дебаты в комментариях и на Twitter.Кроме того, учитывайте ответ от Адам Stacoviak: “ реальность такова, что Sass требует Ruby, однако это не должны быть составлены в CSS на сервере.Он может быть составлен на местном уровне (так же, как МЕНЬШЕ отметил для себя) и составлен CSS можетпоставляются с вашим проектом, WordPress тема, шаблон Expression Engine, или как на сервере так же, как предыдущие файлы CSS.Так как это Smashing Magazine и читатели могут значительно варьироваться, я думаю, что большая часть из вас, читающих этот комментарий под управлением Mac.Ну, Ruby предоставляется по умолчанию на всех компьютерах Mac поэтому получать Sass установлена и запущена только команда км (sudo gem install sass).
Если у вас есть Sass установлена, вы можете скомпилировать Sass локально в CSS и отправить код с вашего проекта, как я уже упоминал.Если вы не знаете о том, как начать работу с Sass (или Компас) мы написали довольно тщательное руководство по этому вопросу под названием “ Приступая к работе с Sass и Compass“.Спасибо за освобождение его, Адам
Меньше, More
Installation
В том числе менее в то, что вы строите примерно так же легко, как он получает:
- Иди себе копию less.js;
- Создать файл положить ваши стили, такие как style.less;
- Добавить следующий код в ваш HTML в
<head>:
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
Обратите внимание на rel атрибут ссылки.Вы должны добавить /less до конца значение для того, чтобы меньше работать.Вы также должны включить сценарий сразу после ссылки на таблицу стилей.Если вы используете HTML5 синтаксис, и я не могу себе представить, почему ты не быть, Вы можете оставить type="text/css" и type="text/javascript".
Там также серверные версии LESS.Самый простой способ установки меньше на сервер с узел пакета Manager. (НПМ)
Variables
Если вы разработчик, переменными являются одним из своих лучших друзей.В случае, если вы будете использовать информацию неоднократно (в данном случае цвет), установив ее на переменной имеет смысл.Таким образом, вы гарантируете себе последовательность и, вероятно, менее прокрутки о поиске шестнадцатеричное значение для копирования и вставки.Вы даже можете сделать некоторые забавные маленькие сложения и вычитания шестнадцатеричных значений, которые вы хотите сделать.Возьмем такой пример:
@blue: #00c; @light_blue: @blue + #333; @dark_blue: @blue - #333;
Если мы применим эти стили на три дивы, мы можем увидеть gradated эффект создается путем добавления и вычитания шестнадцатеричных значений и из оригинального синего:
Переход от light_blue @ к @ синие to@dark_blue.
Разница лишь в переменных между менее и Sass является то, что, хотя и менее использовании @, Sass использует $.Есть некоторые различия сферы, как хорошо, что я доберусь до shortly.
Mixins
По случаю, мы можем создать стиль, который предназначен для многократного использования всейстилей.Ничто не мешает вам применение нескольких классов к элементам HTML, но вы также можете сделать это, не выходя из стилей, используя меньше.Чтобы проиллюстрировать это, я вставил пример кода, который можно было бы использовать для стиля двух элементов на page.
.border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
}
Это даст вам нечто похожее на то, что вы получите, если вы вернулись в HTML файл и добавить .bordered класса в двух элементов там — за исключением вы сделали это, не выходя из стилей.И это работает так же хорошо:
Обе статьи и неупорядоченный список долю границы style.
С Sass, вы объявляете @mixin до стиля идентифицировать ее как примесь.Позже, вы объявляете @include позвонить it.
@mixin border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
@include border;
}
ul.menu {
background: #ccc;
@include border;
}
Параметрический Mixins
Мне нравится имеющих функции в вашем CSS (* обморок *), они могут быть очень полезны для тех, кто, казалось бы избыточных задач современной CSS.Самый лучший и самый полезный пример их использования относится к многим префиксы поставщика, что мы боремся с этим во время перехода от CSS2 для CSS3.Nettuts имеет замечательный трансляции и article путем Джеффри, с подробной информацией о числе файл, состоящий исключительно из полезных параметрического Примеси, которые охватывают большую часть ваших любимых свойств CSS3 в соответствующие префиксы поставщика.Например, простой примесь для обработки закругленных углов в различных формах:
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
В этом случае .border-radius класса по умолчанию имеет радиус 3 пикселя, но вы можете передать любое значение вы хотели бы получить закругленный угол этого радиуса.Что-то вроде .border-radius(10px) будет закругления углов на 10 pixels.
Синтаксиса в Sass очень похож на что меньше.Просто используйте $ переменных, и называют Mixins с @mixin и @include метод упоминается earlier.
Selector Inheritance
Что-то здесь не предусмотрено в МЕНЬШЕ.С этой способностью, вы можете добавить селектор выбора ранее установленных без необходимости добавлять его в разделенных запятыми format.
.menu {
border: 1px solid #ddd;
}
.footer {
@extend .menu;
}
/* will render like so: */
.menu, .footer {
border: 1px solid #ddd;
}
Вложенные Rules
Вложенные классы и идентификаторы в CSS может быть одним из немногих методов, чтобы сохранить ваш стиль от вмешательства и от постороннего вмешательства любых других стилей, которые могут быть добавлены в пути.Но это может быть очень грязно.С помощью селектора, как #site-body .post .post-header h2 является непривлекательным и занимает много ненужного пространства.С меньшими затратами, вы можете вложить …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров