Вы хорошо знаете упражнение. Хотите придать какой-то раздел вашего сайта закругленным углам с помощью CSS3? Тогда вам потребуются только три префикса вендора: webkit, moz и рекомендованная форма W3C. Разве это не огромная трата времени — не говоря уже о пространстве экрана? Что если вместо этого мы можем использовать файл класса ? Ну, мы можем! Я покажу вам, как сегодня.
Ключ
Если мы используем такой инструмент, как LESS или SASS, мы можем довольно легко создавать собственные файлы классов . Понятия не имею, о чем я говорю? Ну, во-первых, просмотрите этот быстрый совет . Это научит вас, как начать работать с Less.
Файл классов
Далее нам нужно создать файл базовых классов, который будет использоваться в каждом проекте. Не стесняйтесь хранить этот файл где угодно, хотя в приведенном выше видео я использую наше популярное (и эксклюзивное) приложение Structurer.
Мы сделаем первый вместе, но не забудьте просмотреть скринкаст для более подробной информации.
|
1
2
3
4
5
|
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
|
С точки зрения соглашений об именах, я обнаружил, что наиболее разумно использовать официально рекомендуемое имя для имени вашего класса — в данном случае, « border-radius ». Чтобы объявить переменные с помощью Less, мы предваряем их символом @ . В этом случае мы устанавливаем значение по умолчанию 3 3px , однако, если нам нужно переопределить это значение в нашем проекте, это просто!
|
1
2
3
|
#someElement {
.border-radius(10px);
}
|
Несколько примеров
На этом этапе просто промойте и повторите для каждого свойства, которое требует нескольких префиксов поставщика. Вот несколько примеров для начала:
Box Shadow
|
01
02
03
04
05
06
07
08
09
10
11
|
.box-shadow(
@x : 2px,
@y : 2px,
@blur : 5px,
@spread : 0,
@color : rgba(0,0,0,.6)
) {
-webkit-box-shadow: @x @y @blur @spread @color;
-moz-box-shadow: @x @y @blur @spread @color;
box-shadow: @x @y @blur @spread @color;
}
|
переход
|
01
02
03
04
05
06
07
08
09
10
|
.transition(
@what : all,
@length : 1s,
@easing : ease-in-out
) {
-webkit-transition: @what @length @easing;
-moz-transition: @what @length @easing;
-o-transition: @what @length @easing;
transition: @what @length @easing;
}
|
коробка
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
.box(
@orient : horizontal,
@pack : center,
@align : center
) {
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: @orient;
-moz-box-orient: @orient;
box-orient: @orient;
-webkit-box-pack: @pack;
-moz-box-pack: @pack;
box-pack: @pack;
-webkit-box-align: @align;
-moz-box-align: @align;
box-align: @align;
}
|
сгибать
|
1
2
3
4
5
|
.flex( @val : 1 ) {
-webkit-box-flex: @val;
-moz-box-flex: @val;
box-flex: @val;
}
|
Вывод
Я хотел бы услышать ваши мысли по этому поводу. Если вам понравилась идея, давайте сделаем турбонаддув этой таблицы стилей.