Компас CSS3 Border Colors - PullRequest
Новая
       27

Компас CSS3 Border Colors

1 голос
/ 10 марта 2011

Я начинаю с SASS / Compass и сейчас у меня проблемы.

Я хочу перевести этот код CSS 

-moz-border-top-colors: #c2c2c2 #d3d3d3 #ebebeb 
-moz-border-right-colors: #c2c2c2 #d3d3d3 #ebebeb
-moz-border-bottom-colors: #c2c2c2 #d3d3d3 #ebebeb
-moz-border-left-colors: #c2c2c2 #d3d3d3 #ebebeb

В какой-нибудь красивый код SASS / Compass.Я думаю, что это должно быть что-то вроде 

border: 3px solid @inclue linear-gradient(#c2c2c2, #ebebeb)

Я искал документацию Compass, но не смог найти ответ.Кто-нибудь?

Спасибо!

1 Ответ

4 голосов
/ 15 марта 2011

Сначала убедитесь, что вы включили линейный градиентный миксин, добавив следующую строку в ваш файл scss: 

@import "compass/css3/gradient"

Затем вы можете использовать миксин с линейным градиентом для любого свойства в стиле, например: 

@include: linear-gradient($color-stops, [$start], [$image]);

Например: 

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb));

Получил бы границу, идущую сверху вниз, начиная с c2 ..., проходя через d3 ... и заканчивая eb ....

Вы также можете переместить границу снизу вверх, передав значение bottom параметру start: 

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb), bottom);

Или слева направо (или наоборот) 

@include linear-gradient(color-stops(#c2c2c2, #d3d3d3, #ebebeb), left)

Вы также можете передать URL-адрес изображения для наложения границы на фоновое изображение.

См. Эту страницу для рабочего примера с примером кода:

http://compass -style.org / документы / примеры / компас / CSS3 / градиент / # СКС

...