กำหนดธีมด้วย Sass: บทช่วยสอน SCSS
เผยแพร่แล้ว: 2022-03-11การพัฒนาสไตล์ชีตด้วย Sass แม้ในขณะที่ใช้คุณสมบัติพื้นฐานที่สุด เช่น คุณสมบัติการซ้อนหรือตัวแปร ช่วยประหยัดเวลาอันมีค่าและทำให้ชีวิตง่ายขึ้นสำหรับนักพัฒนาส่วนหน้า ไม่น่าแปลกใจที่ CSS พรีโปรเซสเซอร์ได้รับการยอมรับอย่างกว้างขวางว่าเป็นวิธีการสร้างสไตล์สำหรับเว็บไซต์และแอปพลิเคชันโดยพฤตินัย เราไม่สามารถอยู่ได้โดยปราศจากพวกเขาอีกต่อไป
เมื่อพูดถึง ธีม ; นั่นคือการเปลี่ยนรูปลักษณ์และความรู้สึกของเว็บไซต์ของคุณในขณะที่ยังคงการจัดวาง ฟีเจอร์ของ Sass เช่นมิกซ์อินหรือฟังก์ชันต่างๆ จะรู้สึกเหมือนนั่งเครื่องบินแทนการเดิน! ในบทช่วยสอน SCSS นี้ เราจะสร้างธีมขั้นต่ำและใช้ SCSS เพื่อให้โปรแกรม CSS มีพลังพิเศษ
แนวทางการผสมแบบพื้นฐาน
สมมติว่าเรามีเค้าโครงต่อไปนี้:
<body class="theme-1"> <div class="container"> <div class="left"> Left </div> <div class="right"> Right <button class="button">Button</button> </div> </div> </body> </html> เราถูกขอให้สร้างหลายธีมสำหรับมัน ธีมต้องเปลี่ยนสีสำหรับคอนเทนเนอร์ทั้งหมด (รวมถึงคอนเทนเนอร์หลัก) และปุ่ม และธีมจะถูกกำหนดโดยคลาสในเนื้อหา หรืออาจเป็นคอนเทนเนอร์ "ภายนอก" เช่นกัน:
<body class="theme-1">มาสร้างมิกซ์อินชื่อ “ธีมได้” ซึ่งจะมีชุดสีของเราเป็นพารามิเตอร์
@mixin themable($theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg) { .#{$theme-name} { .container { background-color: $container-bg; border: 1px solid #000; display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; * { color: $innertext; font-size: 2rem; } .left { background-color: $left-bg; height: 100%; width: 69%; } .right { background-color: $right-bg; height: 100%; position: relative; width: 29%; } .button { background-color: $button-bg; border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } } } }จากนั้นใช้เพื่อสร้างธีมของเรา:
@include themable(theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49); @include themable(theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16); ณ จุดนี้ เราได้ประหยัดเวลาไปได้มากแล้ว แต่วิธีนี้มีปัญหาบางประการ:
ธีมมักจะมีคุณสมบัติที่แตกต่างกันมากมายนอกเหนือจากสี ตัวอย่างเช่น หากเราต้องการแก้ไขธีม Bootstrap การเขียนมิกซ์อินตาม "สูตร" ก่อนหน้านี้จะรักษาได้ยากและโค้ดอ่านยาก นอกจากนี้ เราไม่ได้ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดของ Sass เช่น การป้อนรหัสสีฐานสิบหกลงในมิกซ์อินโดยตรง
ออกแบบชุดรูปแบบด้วย Sass Maps
ด้วยความช่วยเหลือของแผนที่ ซึ่งส่วนใหญ่เหมือนกับอาร์เรย์ที่จัดทำดัชนีหลัก เราสามารถสร้างชุดสไตล์ที่มีความหมายและมีความหมายมากขึ้นสำหรับธีมของเรา ซึ่งจะง่ายต่อการดูแลรักษาและทำความเข้าใจโดยนักพัฒนาที่เป็นเพื่อนร่วมงานของเรา เราสามารถใช้ รายการ ได้เช่นกัน แต่โดยส่วนตัวแล้ว ฉันพบว่าแผนที่เหมาะสำหรับจุดประสงค์นี้มากกว่า รายการไม่มีคีย์ในขณะที่คีย์สามารถอธิบายตนเองได้
แผนที่สำหรับแนวทางใหม่ของเราจะเป็นแผนที่ที่ ซ้อนกัน :
$theme-1: ( container: ( bg: #e4ada7, color: #000, border-color: #000 ), left: ( bg: #d88880, color: #fff, height: 100%, width: 69% ), right: ( bg: #cc6359, color: #fff, height: 100%, width: 29% ), button: ( bg: #481b16, color: #fff ) ); หากเราต้องการเข้าถึงแต่ละส่วนของชุด theme-1 และแผนที่ย่อย เราจะใช้ คำสั่ง @each เพื่อวนซ้ำแต่ละส่วน:
@each $section, $map in $theme-1 $section จะคืนค่า คีย์ ของส่วนปัจจุบัน และ $map จะส่งคืนแผนที่ที่ซ้อนกันซึ่งสอดคล้องกับคีย์นั้น
จากนั้น เราสามารถเข้าถึงคุณสมบัติของแต่ละแผนที่ได้ สมมติว่าคุณสมบัติพื้นหลัง (bg) โดยใช้ ฟังก์ชัน map-get :
map-get($map, bg)สุดท้าย ด้วยการรวมมิกซ์อินใหม่ของเราตามโครงสร้างแผนที่ของเรา เราสามารถสร้างธีมได้มากเท่าที่ต้องการ:
@mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { .left, .right { font-size: 2rem; } } .container .right { position: relative } .button { border: 0; border-radius: 10px; bottom: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 1em 2em; position: absolute; right: 10px; } // Loop through each of the keys (sections) @each $section, $map in $theme-map { @if ($section == container) { .container { background-color: map-get($map, bg); border: 1px solid map-get($map, border-color); display: flex; height: 500px; justify-content: space-between; margin: 0 auto; padding: 1em; width: 50%; } } @else { .#{$section} { background-color: map-get($map, bg); color: map-get($map, color); @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } } } } } } @include themable(theme-1, $theme-1); @include themable(theme-2, $theme-2); … … โปรดทราบว่าเรายังใช้ คำสั่ง @if เพื่อแยกคุณสมบัติสำหรับส่วนที่ไม่ใช่ปุ่ม
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); }ด้วยวิธีนี้ เราสามารถเพิ่มคุณสมบัติที่แตกต่างกันสำหรับบางส่วนเพื่อสร้างคุณสมบัติเฉพาะหรือแม้แต่กฎ หรือเราสามารถแยกความแตกต่างระหว่างคีย์ที่มีค่าเดียวจากค่าอื่นด้วยแผนที่ที่ซ้อนกัน
ธีมของเรายังอาจประกอบด้วยแผนที่จำนวนมากที่ใช้โดยมิกซ์อินต่างๆ นำไปใช้ในส่วนต่างๆ ของสไตล์ชีตของเรา ทั้งหมดขึ้นอยู่กับความซับซ้อนของเค้าโครงพื้นฐานของเรา และแน่นอน วิธีการส่วนบุคคลของเรา
การเพิ่มประสิทธิภาพเพิ่มเติม
Sass นำเสนอฟังก์ชันในตัวที่มีประโยชน์เพื่อช่วยให้เราไม่ต้องทำงานมากขึ้น ตัวอย่างเช่น ฟังก์ชัน hsl เช่น ทำให้การคำนวณ lighten ขึ้นหรือ darken เช่น สีของปุ่มเมื่อวางเมาส์เหนือปุ่มนั้น
เราสามารถแก้ไขรหัสปุ่มเพื่อทำให้พื้นหลังสว่างขึ้นเมื่อวางเมาส์ โดยไม่คำนึงถึงสีพื้นหลังดั้งเดิม ด้วยวิธีนี้ เราไม่ต้องเพิ่มสีอื่นสำหรับสถานะนี้
@if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } }นอกจากนี้ ด้วยการใช้โมดูล Sass โค้ดของเราสามารถอ่านออกและปรับขนาดได้มากขึ้น แต่ละธีมแมปสามารถมีอยู่ในโมดูลแล้วนำเข้าไปยังสไตล์ชีตหลักของเรา
@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …สิ่งนี้จะต้องวางโมดูลในโครงการเป็น:
/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss
หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Sass เพื่อทำให้ CSS ของคุณแห้ง เพื่อน Toptaler Justin Brazeau และผู้ที่ชื่นชอบ Sass จะพูดคุยถึงเรื่องนี้ในบทความที่ยอดเยี่ยมของเขา Sass Mixins: Keep Your Stylesheets DRY