color schemer
v0.2.8
O esquema de cores é um conjunto robusto de ferramentas de cores para Sass. Ele expande as funções de cores Sass existentes e adiciona coisas como manipulação RYB, *set-hue, *set-lightness, matiz, sombra e muito mais. Ele também aproveita essas ferramentas, adicionando uma ferramenta de esquema de cores completa que permite definir uma cor primária e criar esquemas de cores completos em torno dela.
gem install color-schemer em seu terminal.
require 'color-schemer' para o arquivo de configuração do Compass.
@import 'color-schemer' para sua folha de estilo.
tint($color, $amount) — Mistura a cor com branco. A maioria dos designers se sente muito mais confortável com isso do que lighten() .shade($color, $amount) — O mesmo que acima, mas adiciona preto. Os designers podem preferir isso a darken() .equalize($color) — Retorna uma cor totalmente saturada.set-red($color, $red) — Define a quantidade de vermelho em uma cor.set-green($color, $green) — Define a quantidade de verde em uma cor.set-blue($color, $blue) — Define a quantidade de azul em uma cor.set-hue($color, $hue) — Define o matiz de uma cor.set-saturation($color, $saturation) — Define a saturação de uma cor.set-lightness($color, $lightness) — Define a luminosidade de uma cor.set-alpha($color, $alpha) — Define o alfa de uma cor. O esquema de cores adiciona uma série de funções para manipular a roda de cores vermelho, amarelo e azul. A cor do computador é calculada em vermelho, verde e azul, o que é mais tecnicamente correto, mas artistas e designers usam RYB há muito tempo para encontrar melhores relações de cores.
ryb-hue($color) — Encontrará o matiz de uma cor na roda de cores RYB.set-ryb-hue($color, $hue) — Define o matiz de uma cor com base na roda de cores RYB.ryb-adjust-hue($color, $degrees) — Ajustará o matiz de uma cor ao redor da roda de cores RYB.ryb-complement($color) — Encontra o complemento RYB de uma cor.ryb-invert($color) — Inverte uma cor ao redor da roda de cores RYB. cmyk($cyan, $magenta, $yellow, $black) — Defina cores usando valores CMYK. Coloque essas funções onde quiser usar uma cor do esquema. Você pode manipulá-los ainda mais para fazê-los funcionar com seu design. Estes devem ser considerados um bom ponto de partida, pois você pode querer ajustar um pouco mais.
cs-primary() — cor primária.cs-secondary() — cor secundária.cs-tertiary() — cor terciária.cs-quadrary() — cor do quadrário. Você pode alterar o resultado das funções acima definindo estas variáveis globais:
$cs-primary — define a cor primária em um esquema de cores.$cs-scheme - mono, complemento, tríade, tétrade, analógico, analógico acentuado$cs-hue-offset — Quantidade de ajuste de matiz nos esquemas.$cs-brightness-offset — Quantidade de ajuste de brilho nos esquemas.$cs-color-model — rgb, ryb O esquema de cores inclui modos de mesclagem SCSS que permitem fazer misturas de cores no estilo Photoshop.
Embora você possa usar essas funções imediatamente, você pode querer ajustá-las um pouco mais. Eu sugiro que você crie variáveis com elas caso queira fazer ajustes/mover coisas em vez de confiar nelas como estão.
$primary : cs-primary ();
$secondary : darken ( cs-secondary (), 10 % ); // too light, darkening this up a bit.
$tertiary : cs-tertiary ();
$quadrary : cs-quadrary ();Também está incluído um mixin útil para testar esquemas de cores. Basta incluí-lo em uma lista de suas cores e uma barra de cores será adicionada acima de sua página.
@include cs-test ( red green blue );Copyright (c) 2011 Scott Kellum (@scottkellum) e Mason Wendell (@canarymason)
É concedida permissão, gratuitamente, a qualquer pessoa que obtenha uma cópia deste software e dos arquivos de documentação associados (o "Software"), para negociar o Software sem restrições, incluindo, sem limitação, os direitos de usar, copiar, modificar, mesclar , publicar, distribuir, sublicenciar e/ou vender cópias do Software e permitir que as pessoas a quem o Software seja fornecido o façam, sujeito às seguintes condições:
O aviso de direitos autorais acima e este aviso de permissão serão incluídos em todas as cópias ou partes substanciais do Software.
O SOFTWARE É FORNECIDO "COMO ESTÁ", SEM GARANTIA DE QUALQUER TIPO, EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO SE LIMITANDO ÀS GARANTIAS DE COMERCIALIZAÇÃO, ADEQUAÇÃO A UM DETERMINADO FIM E NÃO VIOLAÇÃO. EM HIPÓTESE ALGUMA OS AUTORES OU DETENTORES DE DIREITOS AUTORAIS SERÃO RESPONSÁVEIS POR QUALQUER RECLAMAÇÃO, DANOS OU OUTRA RESPONSABILIDADE, SEJA EM UMA AÇÃO DE CONTRATO, ATO ILÍCITO OU DE OUTRA FORMA, DECORRENTE DE, OU EM CONEXÃO COM O SOFTWARE OU O USO OU OUTRAS NEGOCIAÇÕES NO SOFTWARE.
