Возможно, вы знакомы с такими сервисами, как LESS и Sass. Они обеспечивают гораздо большую гибкость при создании таблиц стилей, включая использование переменных, операторов, встроенных модулей и даже вложенных селекторов. Однако, поскольку LESS изначально создавался с Ruby, многие разработчики PHP, несмотря на то, что есть доступные версии PHP, никогда не использовали его.
Полный скринкаст
Шаг 1. Ссылка LESS.js
|
1
|
<script src=»http://lesscss.googlecode.com/files/less-1.0.18.min.js»></script>
|
Шаг 2. Импорт таблицы стилей
|
1
|
<link rel=»stylesheet/less» href=»style.less» />
|
Обратите внимание, что мы установили для атрибута rel значение «stylesheet / less» и что наши фактические таблицы стилей имеют расширение .less , а не .css . Кроме того, мы должны ссылаться на эту таблицу стилей до Less.js.
Шаг 3. Веселитесь!
С этим минимальным объемом работы у вас теперь есть доступ ко всему: от переменных до дополнений. Обязательно посмотрите четырехминутное видеоурок выше для полных примеров, но вот несколько быстрых подсказок.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
/*
Variables!
*/
@primary_color: green;
/*
Mix-ins are like functions for commonly used operations,
such as apply borders.
the @ symbol.
*/
.rounded(@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#container {
/* References the variable we created above.
background: @primary_color;
/* Calls the .rounded mix-in (function) that we created, and overrides the default value.
.rounded(20px);
/* Nested selectors inherit their parent’s selector as well.
a {
color: red;
}
}
|
Важно помнить, что LESS.js не закончен; надеюсь, это будет скоро. Тем не менее, до сих пор это работает чудесно. Как вы думаете?