Color Schemer는 Sass를 위한 강력한 색상 도구 세트입니다. 이는 기존 Sass 색상 기능을 확장하고 RYB 조작, * 색조 설정, * 밝기 설정, 색조, 음영 등과 같은 항목을 추가합니다. 또한 하나의 기본 색상을 설정하고 그 주위에 전체 색상 구성표를 만들 수 있는 모든 기능을 갖춘 색상 구성 도구를 추가하여 이러한 도구를 활용합니다.
gem install color-schemer
.
Compass 구성 파일에 require 'color-schemer'
.
@import 'color-schemer'
스타일시트로 가져옵니다.
tint($color, $amount)
— 색상을 흰색과 혼합합니다. 대부분의 디자이너는 lighten()
보다 이것이 훨씬 더 편합니다.shade($color, $amount)
— 위와 동일하지만 검정색을 추가합니다. 디자이너는 darken()
보다 이를 선호할 수 있습니다.equalize($color)
— 완전히 채도가 높은 색상을 반환합니다.set-red($color, $red)
— 색상의 빨간색 양을 설정합니다.set-green($color, $green)
— 색상의 녹색 양을 설정합니다.set-blue($color, $blue)
— 색상의 파란색 양을 설정합니다.set-hue($color, $hue)
— 색상의 색조를 설정합니다.set-saturation($color, $saturation)
— 색상의 채도를 설정합니다.set-lightness($color, $lightness)
— 색상의 밝기를 설정합니다.set-alpha($color, $alpha)
— 색상의 알파를 설정합니다. 색상 구성기는 빨간색, 노란색 및 파란색 색상환을 조작하는 여러 기능을 추가합니다. 컴퓨터 색상은 빨간색, 녹색 및 파란색으로 계산되며 이는 기술적으로 더 정확하지만 아티스트와 디자이너는 더 나은 색상 관계를 찾기 위해 오랫동안 RYB를 사용해 왔습니다.
ryb-hue($color)
— RYB 색상환에서 색상의 색조를 찾습니다.set-ryb-hue($color, $hue)
— RYB 색상환을 기반으로 색상의 색조를 설정합니다.ryb-adjust-hue($color, $degrees)
— RYB 색상환 주위의 색상 색조를 조정합니다.ryb-complement($color)
— 색상의 RYB 보완을 찾습니다.ryb-invert($color)
— RYB 색상환 주위의 색상을 반전합니다. cmyk($cyan, $magenta, $yellow, $black)
— CMYK 값을 사용하여 색상을 정의합니다. 구성표의 색상을 사용하려는 곳에 이러한 기능을 놓습니다. 디자인에 맞게 작동하도록 추가로 조작할 수 있습니다. 조금 더 조정하고 싶을 수도 있으므로 이는 좋은 출발점으로 간주되어야 합니다.
cs-primary()
— 기본 색상.cs-secondary()
— 보조 색상.cs-tertiary()
— 3차 색상.cs-quadrary()
— 사각형 색상. 다음 전역 변수를 설정하여 위 함수의 결과를 변경할 수 있습니다.
$cs-primary
— 색 구성표의 기본 색상을 설정합니다.$cs-scheme
— 모노, 보수, 트라이어드, 테트라드, 유추, 악센트-유추$cs-hue-offset
— 구성표의 색조 조정량입니다.$cs-brightness-offset
— 구성표의 밝기 조정 정도입니다.$cs-color-model
— rgb, ryb 색상 구성표에는 SCSS 혼합 모드가 포함되어 있어 Photoshop 스타일의 색상 혼합을 수행할 수 있습니다.
이러한 기능을 기본적으로 사용할 수 있지만 좀 더 세부적으로 조정하고 싶을 수도 있습니다. 있는 그대로 의존하는 대신 조정/이동을 원할 경우를 대비해 변수를 생성하는 것이 좋습니다.
$primary : cs-primary ();
$secondary : darken ( cs-secondary (), 10 % ); // too light, darkening this up a bit.
$tertiary : cs-tertiary ();
$quadrary : cs-quadrary ();
또한 색상 구성표를 테스트할 수 있는 편리한 믹스인도 포함되어 있습니다. 색상 목록과 함께 포함시키면 페이지 위에 색상 막대가 추가됩니다.
@include cs-test ( red green blue );
저작권 (c) 2011 Scott Kellum(@scottkellum) 및 Mason Wendell(@canarymason)
본 소프트웨어 및 관련 문서 파일("소프트웨어")의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.
위의 저작권 고지와 본 허가 고지는 소프트웨어의 모든 사본 또는 상당 부분에 포함됩니다.
소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이든 묵시적이든 어떠한 종류의 보증 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 작성자나 저작권 보유자는 계약, 불법 행위 또는 기타 행위로 인해 소프트웨어나 사용 또는 기타 거래와 관련하여 발생하는 모든 청구, 손해 또는 기타 책임에 대해 책임을 지지 않습니다. 소프트웨어.