CSS: группировка свойств

Question

.myclass {
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    background: #F2F2F2;
}

Можно ли сгруппировать свойства, которые имеют общее определение, например border-top и border-bottom в приведенном выше примере.

Что-то вроде:

.myclass {
    border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
    background: #F2F2F2;
}

ТИА

Answer 1

Вы можете использовать LESS или SASS (я полагаю), но если вы не хотите их использовать, вы можете вместо этого группировать селекторы, которые будут иметь такое же свойство:

.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
 {
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
    background: #F2F2F2;
}

Это будет применятьсястиль для всех элементов.

Answer 2

Мне кажется, я вижу, что вы пытаетесь сделать здесь,

Это единственная сокращенная граница, которую я знаю, без использования SASS / LESS.

.myclass {
    border-color: red blue green coral;
    border-width: 1px 2px 3px 4px;
    border-style: solid;
}

Это те же сокращения, что и для полей и полей (TOP, RIGHT, BOTTOM, LEFT)

Answer 3

К сожалению, граница не имеет сокращенной версии (как, например, скажем, margin / padding), она должна быть одинаковой для всех или разной.

Однако, что вы можете сделать - это сказать, что вы хотите уникально стилизовать одну сторону, это указать все поля, затем под ним переопределить их с индивидуальным стилем.Вот небольшая скрипка того, что я имею в виду.

http://jsfiddle.net/XxWwn/