ส่วนหน้าของเว็บ

การจัดธีมด้วย Sass: บทช่วยสอน SCSS

การพัฒนาสไตล์ชีตด้วย Sass แม้ว่าจะใช้คุณสมบัติพื้นฐานที่สุดเช่นคุณสมบัติการซ้อนหรือตัวแปรจะช่วยประหยัดเวลาอันมีค่าและทำให้ชีวิตง่ายขึ้น นักพัฒนาส่วนหน้า . ไม่น่าแปลกใจที่ CSS พรีโปรเซสเซอร์ได้รับการยอมรับอย่างกว้างขวางว่าเป็นวิธีการสร้างสไตล์สำหรับเว็บไซต์และแอปพลิเคชันโดยพฤตินัย เราไม่สามารถอยู่ได้โดยปราศจากพวกเขาอีกต่อไป

เมื่อมันมาถึง ธีม ; นั่นคือการเปลี่ยนรูปลักษณ์ของเว็บไซต์ของคุณในขณะที่ยังคงรูปแบบคุณลักษณะของ Sass เช่นมิกซ์อินหรือฟังก์ชั่นต่างๆให้ความรู้สึกเหมือนนั่งเครื่องบินแทนการเดิน! ในบทแนะนำ SCSS นี้เราจะสร้างธีมที่เรียบง่ายและใช้ SCSS เพื่อให้การเขียนโปรแกรม CSS ของเรามีพลังพิเศษ

วิธีการผสมขั้นพื้นฐาน

สมมติว่าเรามีเค้าโครงต่อไปนี้:

ตัวอย่างการประมาณต้นทุนการพัฒนาซอฟต์แวร์

Left Right Button

รูปภาพของเค้าโครงธีม css เปล่า

เราถูกขอให้สร้างหลายธีมสำหรับมัน ธีมต้องเปลี่ยนสีสำหรับคอนเทนเนอร์ทั้งหมด (รวมถึงคอนเทนเนอร์หลัก) และปุ่มและธีมจะถูกกำหนดโดยคลาสในเนื้อหาหรืออาจเป็นคอนเทนเนอร์ 'ด้านนอก' ก็ได้เช่นกัน:

@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);

จากนั้นใช้เพื่อสร้างธีมของเรา:

$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 ) );

การเปรียบเทียบธีม -1 และธีม -2 ที่สร้างโดยใช้ Sass

ในตอนนี้เราประหยัดเวลาไปได้มากแล้ว แต่มีปัญหาบางอย่างกับแนวทางนี้:

โดยปกติธีมจะมีคุณสมบัติที่แตกต่างกันมากมายนอกเหนือจากสี ตัวอย่างเช่นหากเราต้องการแก้ไขธีม Bootstrap การเขียนมิกซ์อินตาม 'สูตรอาหาร' ก่อนหน้านั้นยากที่จะดูแลรักษาและอ่านโค้ดได้ยาก นอกจากนี้เรายังไม่ปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดของ Sass เช่นการป้อนรหัสสีฐานสิบหกลงในมิกซ์อินโดยตรง

ออกแบบ Styles Scheme ด้วย Sass Maps

ด้วยความช่วยเหลือของแผนที่ซึ่งส่วนใหญ่เป็นเหมือนอาร์เรย์ที่จัดทำดัชนีหลักเราสามารถสร้างชุดรูปแบบที่มีความหมายและมีความหมายมากขึ้นสำหรับธีมของเราซึ่งจะง่ายต่อการดูแลรักษาและทำความเข้าใจโดยนักพัฒนาร่วมงานของเรา เราสามารถใช้ รายการ เช่นกัน แต่โดยส่วนตัวแล้วฉันพบว่าแผนที่เหมาะกับจุดประสงค์นี้มากกว่า รายการไม่มีคีย์ในขณะที่คีย์อธิบายได้เอง

แผนที่สำหรับแนวทางใหม่ของเราจะเป็น ซ้อนกัน แผนที่:

theme-1

หากเราต้องการเข้าถึงแต่ละส่วนของโครงการของเรา @each และแผนที่ย่อยเราใช้ @each $section, $map in $theme-1 คำสั่ง ในการวนซ้ำแต่ละรายการ:

$section

$map จะส่งคืนไฟล์ สำคัญ ของส่วนปัจจุบันและ map-get จะส่งคืนแผนที่ซ้อนที่ตรงกับคีย์นั้น

จากนั้นเราสามารถเข้าถึงคุณสมบัติของแต่ละแผนที่สมมติว่าคุณสมบัติพื้นหลัง (bg) โดยใช้ 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); } คำสั่ง เพื่อแยกคุณสมบัติสำหรับส่วนที่ไม่ใช่ปุ่ม

lighten

ด้วยวิธีนี้เราสามารถเพิ่มคุณสมบัติที่แตกต่างกันสำหรับบางส่วนเพื่อสร้างคุณสมบัติเฉพาะหรือแม้แต่กฎหรือเราสามารถแยกแยะระหว่างคีย์ที่มีค่าเดียวจากอีกค่าหนึ่งด้วยแผนที่ที่ซ้อนกัน

ชุดรูปแบบของเราอาจประกอบด้วยแผนที่จำนวนมากที่ใช้โดยมิกซ์อินหลายรายการซึ่งนำไปใช้ในส่วนต่างๆของสไตล์ชีตของเรา ทั้งหมดขึ้นอยู่กับความซับซ้อนของเค้าโครงฐานของเราและแน่นอนว่าแนวทางส่วนตัวของเรา

การเพิ่มประสิทธิภาพเพิ่มเติม

Sass นำเสนอฟังก์ชันในตัวที่มีประโยชน์เพื่อช่วยให้เราประหยัดงานได้มากขึ้น ตัวอย่างเช่นฟังก์ชัน hsl เช่น darken หรือ @if ($section != button) { height: map-get($map, height); width: map-get($map, width); } @else { &:hover { background-color: lighten(map-get($map, bg), 20%); } } ในการคำนวณเช่นสีของปุ่มเมื่อวางเมาส์เหนือปุ่ม

เราสามารถแก้ไขโค้ดปุ่มเพื่อทำให้พื้นหลังสว่างขึ้นเมื่อวางเมาส์โดยไม่คำนึงถึงสีพื้นหลังเดิม ด้วยวิธีนี้เราไม่ต้องเพิ่มสีอื่นสำหรับสถานะนี้

@import 'theme-1'; @import 'theme-2'; @import 'theme-3'; … … @mixin themable($theme-name, $theme-map) { .#{$theme-name} { .container { … …

นอกจากนี้ด้วยการใช้โมดูล Sass โค้ดของเรายังสามารถอ่านและปรับขนาดได้มากขึ้น แต่ละแผนที่ธีมสามารถอยู่ในโมดูลแล้วนำเข้าสู่สไตล์ชีตหลักของเรา

/ ├── _theme-1.scss ├── _theme-2.scss └── _theme-2.scss

สิ่งนี้จะต้องวางโมดูลในโครงการเป็น:

โหนด js เรียกส่วนที่เหลือ api

|_+_|

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ Sass เพื่อทำให้ CSS ของคุณแห้งเพื่อน ๆ ApeeScapeer Justin Brazeau และ ผู้ที่ชื่นชอบ Sass กล่าวถึงเรื่องนี้ในบทความที่ยอดเยี่ยมของเขา Sass Mixins: เก็บสไตล์ชีตของคุณให้แห้ง .