color schemer
v0.2.8
Color Schemer เป็นชุดเครื่องมือสีที่มีประสิทธิภาพสำหรับ Sass โดยจะขยายฟังก์ชันสี Sass ที่มีอยู่ และเพิ่มสิ่งต่างๆ เช่น การปรับแต่ง RYB, * set-hue, * set-lightness, โทนสี, เฉดสี และอื่นๆ นอกจากนี้ยังใช้ประโยชน์จากเครื่องมือเหล่านี้โดยเพิ่มเครื่องมือกำหนดโครงร่างสีที่มีคุณสมบัติครบถ้วน ซึ่งช่วยให้คุณสามารถตั้งค่าสีหลักสีเดียวและสร้างโทนสีทั้งหมดรอบๆ สีนั้นได้
gem install color-schemer ในเทอร์มินัลของคุณ
require 'color-schemer' ในไฟล์กำหนดค่า Compass ของคุณ
@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) — จะค้นหาเฉดสีบนวงล้อสี RYBset-ryb-hue($color, $hue) - ตั้งค่าเฉดสีตามวงล้อสี RYBryb-adjust-hue($color, $degrees) — จะปรับเฉดสีรอบวงล้อสี RYBryb-complement($color) - ค้นหาส่วนเสริม RYB ของสีryb-invert($color) - เปลี่ยนสีรอบวงล้อสี RYB cmyk($cyan, $magenta, $yellow, $black) — กำหนดสีโดยใช้ค่า CMYK วางฟังก์ชันเหล่านี้ในตำแหน่งที่คุณต้องการใช้สีจากโครงร่าง คุณสามารถปรับแต่งเพิ่มเติมเพื่อให้เข้ากับการออกแบบของคุณได้ สิ่งเหล่านี้ควรถือเป็นจุดเริ่มต้นที่ดีเนื่องจากคุณอาจต้องการปรับแต่งเพิ่มเติมอีกเล็กน้อย
cs-primary() - สีหลักcs-secondary() — สีรองcs-tertiary() - สีตติยภูมิcs-quadrary() - สีรูปสี่เหลี่ยม คุณสามารถเปลี่ยนผลลัพธ์ของฟังก์ชันด้านบนได้โดยการตั้งค่าตัวแปรร่วมเหล่านี้:
$cs-primary - ตั้งค่าสีหลักในรูปแบบสี$cs-scheme - โมโน, ส่วนประกอบ, ไตรแอด, เตตราด, อะนาล็อก, เน้นเสียงอะนาล็อก$cs-hue-offset - จำนวนการปรับเฉดสีในรูปแบบ$cs-brightness-offset - จำนวนการปรับความสว่างในรูปแบบ$cs-color-model — rgb, ryb โปรแกรมกำหนดสีมีโหมด SCSS Blend ซึ่งช่วยให้คุณสามารถผสมสีสไตล์ 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)
อนุญาตให้บุคคลใดก็ตามที่ได้รับสำเนาของซอฟต์แวร์นี้และไฟล์เอกสารที่เกี่ยวข้อง ("ซอฟต์แวร์") อนุญาตโดยไม่เสียค่าใช้จ่าย เพื่อจัดการกับซอฟต์แวร์โดยไม่มีข้อจำกัด รวมถึงแต่ไม่จำกัดเพียงสิทธิ์ในการใช้ คัดลอก ปรับเปลี่ยน ผสาน เผยแพร่ แจกจ่าย ให้อนุญาตช่วง และ/หรือขายสำเนาของซอฟต์แวร์ และอนุญาตให้บุคคลที่ได้รับซอฟต์แวร์นี้สามารถทำได้ ภายใต้เงื่อนไขต่อไปนี้:
ประกาศเกี่ยวกับลิขสิทธิ์ข้างต้นและประกาศการอนุญาตนี้จะรวมอยู่ในสำเนาทั้งหมดหรือส่วนสำคัญของซอฟต์แวร์
ซอฟต์แวร์นี้มีให้ "ตามที่เป็น" โดยไม่มีการรับประกันใดๆ ทั้งโดยชัดแจ้งหรือโดยนัย ซึ่งรวมถึงแต่ไม่จำกัดเพียงการรับประกันความสามารถในการซื้อขาย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ และการไม่ละเมิด ไม่ว่าในกรณีใดผู้เขียนหรือผู้ถือลิขสิทธิ์จะต้องรับผิดต่อการเรียกร้องค่าเสียหายหรือความรับผิดอื่นใดไม่ว่าในการกระทำของสัญญาการละเมิดหรืออย่างอื่นที่เกิดขึ้นจากหรือเกี่ยวข้องกับซอฟต์แวร์หรือการใช้งานหรือข้อตกลงอื่น ๆ ใน ซอฟต์แวร์.
