วิธีการเริ่มต้นกับ Sass

Sep 14, 2025
วิธีการ

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

ในบทช่วยสอนนี้เราจะสร้างไอคอนโซเชียลโดยใช้ลูป Sass, Mixins และ Functions นอกจากนี้เรายังจะใช้การทำรังที่ทรงพลังใน Sass

  • Sass คืออะไร

เราจะสร้างรายการใน SASS เพื่อสร้างไอคอนโซเชียลของเราซึ่งจะประกอบด้วยชื่อคลาสการอ้างอิงแบบอักษรและสีก่อน - และต่อมา Tooltip

และเราจะใช้ Mixins เพื่อสร้างแบบสอบถามสื่อที่ใช้ซ้ำได้และสร้างฟังก์ชั่นเพื่อเปลี่ยนค่าพิกเซลเป็นค่า EM ในการทำเช่นนี้เราจะสร้างตัวแปรสำหรับขนาดฟอนต์ฐานของเรา

มีหลายวิธีในการติดตั้งและใช้ SASS ขึ้นอยู่กับระบบของคุณและต้องการเครื่องมือสร้าง - รายละเอียดเพิ่มเติมสามารถพบได้ ที่นี่ - อย่างไรก็ตามเราจะใช้ codepen เพื่อรวบรวม Sass ของเราเป็น CSS เพื่อให้สิ่งต่าง ๆ ง่ายที่สุดเท่าที่จะทำได้

เพื่อควบคุมพลังของ SASS อย่างแท้จริงและไม่ได้รับความผิดพลาดของความจำเพาะและความซับซ้อนที่มีความเข้าใจที่มั่นคงของ CSS รสชาติเฉพาะของ Sass ที่เราจะใช้คือ SCSS (Sassy CSS) ซึ่งหมายความว่าเราจะยังคงใช้วงเล็บปีกกา {} ในรหัส SASS ของเรา

รับไฟล์การสอน

ในการดาวน์โหลดตัวอย่างไฟล์สำหรับบทช่วยสอนนี้ให้ไปที่ filesilo เลือกเนื้อหาฟรีและเนื้อหาฟรีถัดจากการกวดวิชา หมายเหตุ: ผู้ใช้ครั้งแรกจะต้องลงทะเบียนเพื่อใช้ Filesilo

01. ตั้งค่า css codepen ของคุณ

Getting your CodePen CSS set up correctly is key

การตั้งค่า CODEPEN CSS ของคุณติดตั้งอย่างถูกต้องเป็นกุญแจสำคัญ

สิ่งแรกที่เราต้องทำคือ สร้างปากกาใหม่ และเปลี่ยนการตั้งค่าเริ่มต้นบางอย่างสำหรับตัวแก้ไข CSS ใน codepen เราจะเปลี่ยน preprocessor CSS เป็น SCSS และเปิดใช้งานปกติและ autoprefixer

02. เริ่มเขียนรหัส

ตอนนี้เราได้ตั้งค่าทุกอย่างที่เราสามารถเริ่มเขียนรหัสได้ ภายในตัวแก้ไข HTML เราจะสร้างคอนเทนเนอร์และจำนวนรายการภายในที่มีลิงก์และไอคอนสำหรับแต่ละไอคอนของเรา

ชื่อที่ใช้ที่นี่จะถูกใช้ในรายการ SASS ของเราเป็นข้อมูลอ้างอิงใน CSS นอกจากนี้เรายังจะใช้อนุสัญญาการตั้งชื่อ BEM สำหรับชื่อชั้นเรียนของเรา 

 & lt; div class = "social__container" & gt;
  & lt; div class = "social _Item" & gt;
  & lt; เป้าหมาย = "_ ว่างเปล่า" href = "... "
  Class = "Social__Con - Twitter" & GT;
  & lt; i class = "icon - twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt;

03. ตั้งรูปแบบพื้นฐาน

ย้ายไปที่ตัวแก้ไข CSS เราจะเริ่มต้นด้วยการรวมแบบอักษรที่ยอดเยี่ยมการตั้งค่าตัวแปรสำหรับขนาดฟอนต์ฐานของเราและสไตล์พื้นฐานบางอย่างสำหรับหน้า 

 @import URL (http://srt.lt/w8yt8);
// ตัวแปร
$ base-font-size: 16px;
// สไตล์พื้นฐาน
ร่างกาย {
  ขนาดตัวอักษร: $ Base-Font-Size;
  ...
}

04. สร้างฟังก์ชั่นพื้นฐาน

ต่อไปเราจะสร้างฟังก์ชั่นพื้นฐานเพื่อเปลี่ยนค่าพิกเซลเป็นค่า EM โดยใช้ตัวแปร '$ base-font-size' ของเรา

ฟังก์ชั่นใน Sass ถูกสร้างขึ้นโดยใช้ '@function' ตามด้วยชื่อของฟังก์ชั่นและอินพุตที่ใช้ในการทำงาน

จากนั้นภายในการประกาศเราใช้ '@return' เพื่อส่งออกค่าเมื่อใช้ฟังก์ชั่น '# {}' รอบการคำนวณใช้สำหรับ การแก้ไข . 

 // ฟังก์ชั่น
@Function PX-to-em ($ พิกเซล) {
@return # {$ pixels / $ base-font-size} em;
}

05. ทำ mixins

ดำเนินการต่อด้วยการตั้งค่าของเราเราจะสร้าง Mixins สำหรับข้อความค้นหาสื่อมือถือที่เรียบง่ายโดยใช้ฟังก์ชั่น 'px-to-em' ของเราซึ่งเราจะส่งผ่านค่า PX เพื่อส่งคืนค่า EM

Mixins ถูกสร้างขึ้นโดยใช้ '@Mixin' ตามด้วยชื่อสำหรับ Mixin จากนั้นภายในการประกาศเราใช้ '@content' เพื่อส่งออกรหัสที่เราใส่เข้าไปใน Mixin เมื่อเรียกมันในภายหลังในโค้ดของเรา 

 @Mixin Viewport - ขนาดใหญ่ {
  @Media หน้าจอเท่านั้นและ
  (ความกว้างขั้นต่ำ: PX-to-em (1680px)) {
  @เนื้อหา;
}}
@Mixin Viewport - ปานกลาง {
  @Media หน้าจอเท่านั้นและ
  (ความกว้างขั้นต่ำ: PX-to-em (1080px)) {
  @เนื้อหา;
}}

06. ตั้งค่ารายการ SASS

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

ภายในตัวแปรเราจะกำหนดชื่อคลาสค่า Unicode และสีสำหรับแต่ละไอคอนแยกพวกเขาด้วยเครื่องหมายจุลภาคภายในวงเล็บ 

 $ ไอคอนรายการ: (
  Vimeo "\ F27D" # 1AB7EA,
  Twitter "\ F099" # 1DA1F2
  ...
  GitHub "\ F113" # 333
  RSS "\ F09E" # F26522
);

07. แสดงไอคอนของคุณในแถว

เพื่อให้ไอคอนโซเชียลของเราปรากฏในแถวเราจะเพิ่ม CSS อย่างง่าย ๆ ให้กับแต่ละตู้คอนเทนเนอร์ของพวกเขา 

 .Social__Item {
  จอแสดงผล: บล็อกแบบอินไลน์;
  มาร์จิ้นขวา: 0.05em;
}

08. สร้างไอคอนสไตล์ที่ใช้ร่วมกัน

หากต้องการลดปริมาณ CSS ที่เราเอาต์พุตเราจะใช้ตัวเลือก CSS3 เพื่อค้นหาคลาสทั้งหมดที่เริ่มต้นด้วย 'ไอคอน' และสร้างสไตล์ที่ใช้ร่วมกันสำหรับพวกเขา 

 [คลาส ^ = "ไอคอน"] {
  ตัวอักษรตระกูล: 'fontawesome';
  พูด: ไม่มี;
  แบบอักษรสไตล์: ปกติ;
  ฟอนต์ - น้ำหนัก: ปกติ;
  ตัวแปรแบบอักษร: ปกติ;
  ข้อความเปลี่ยน: ไม่มี;
  บรรทัดความสูง: 1;
  -Webkit-font-smoothing: antialiased;
  -Moz-OSX-font-Smoothing: Grayscale; }

09. สไตล์พื้นหลังปุ่มขึ้น

การใช้วิธีการเดียวกันเราจะทำเช่นเดียวกันสำหรับปุ่มที่กำหนดค่าของเราใน 'EM' ทำให้เราสามารถปรับขนาดได้โดยใช้คอนเทนเนอร์ 

 [คลาส ^ = "Social__icon"] {
  ขนาดตัวอักษร: 1em; ความกว้าง: 2em; ความสูง: 2em;
  พื้นหลัง - สี: # 333;
  สี: ขาว;
  ข้อความตกแต่ง: ไม่มี;
  รัศมีชายแดน: 100%;
  จัดเรียงข้อความ: กึ่งกลาง;
  จอแสดงผล: Flex;
  จัดเรียงรายการ: ศูนย์;
  แสดงให้เห็นถึงเนื้อหา: ศูนย์;
}

10. @Each ลูปสำหรับไอคอนของเรา

We’ve used our loop to generate the icons for each of our social icons

เราใช้ลูปของเราเพื่อสร้างไอคอนสำหรับแต่ละไอคอนสังคมของเรา

ตอนนี้เรามีรูปแบบฐานทั้งหมดของเราเราสามารถใช้รายการของเราเพื่อสร้าง CSS ที่เฉพาะเจาะจงกับแต่ละไอคอน

ในการสร้างลูปใน Sass เราใช้ '@Each' ตามด้วยชื่อสำหรับแต่ละค่าของแต่ละรายการ - 'ไอคอน $', '$ unicode' และ '$ icon-background' - ตามด้วยคำว่า 'ใน' แล้วชื่อ ของรายการ

ภายในลูปเราจะใช้ค่า '$ unicode' เป็นองค์ประกอบหลอก 'ก่อน' ของแต่ละไอคอนที่เราสร้างขึ้นใน HTML ช่วยให้สไตล์ที่ใช้ร่วมกันที่เราสร้างขึ้นก่อนหน้านี้เพื่อดูแลสไตล์อื่น ๆ ทั้งหมดที่จำเป็น 

 @Each $ ไอคอน, $ unicode, $ icon-background
ใน $ ไอคอนรายการ {
  .ICon - # {ไอคอน $} {
  & amp; :: ก่อน {
  เนื้อหา: $ Unicode;
  }
  }
}

11. @Each ลูปสำหรับสีพื้นหลังของเรา

We’ve added the background colours as well as the icons to our '@each' loop

เราได้เพิ่มสีพื้นหลังรวมถึงไอคอนไปยังวง '@Each' ของเรา

ตอนนี้ไอคอนตอนนี้ทำงานได้ทั้งหมด แต่เรายังมีสีพื้นหลังที่ล้มลง เราจะเพิ่มรหัสเพิ่มเติมให้กับรายการของเราเพื่อแก้ไข การใช้วิธีการเดียวกันกับข้างต้นเราจะส่งออกชื่อ 'ไอคอน $' แต่คราวนี้ในคลาส 'Social__icon' และภายในสี 'ไอคอนไอคอนพื้นหลัง' 

 @Each $ ไอคอน, $ unicode, $ icon-background
ใน $ ไอคอนรายการ {
  ...
  .social__icon - # {ไอคอน $} {
  พื้นหลัง - สี: $ ไอคอน - พื้นหลัง;
  }
}

12. ใช้ mixins

Using our mixins we've updated the font size of the container to change the icons size depending on the viewport width

การใช้ Mixins ของเราเราได้อัปเดตขนาดตัวอักษรของคอนเทนเนอร์เพื่อเปลี่ยนขนาดไอคอนขึ้นอยู่กับความกว้างของวิวพอร์ต

การใช้ Mixins ที่เราสร้างขึ้นก่อนหน้านี้และเนื่องจากเราจัดรูปแบบไอคอนโดยใช้ค่า 'em' เราสามารถใช้ขนาดตัวอักษรกับคอนเทนเนอร์และเพิ่มการใช้ mixin แบบสอบถามสื่อของเราโดยใช้ '@include' และชื่อของ Mixin ตามด้วย รหัสที่เราต้องการรวมไว้ในแบบสอบถามสื่อ 

. โซโคล __container {
  ขนาดตัวอักษร: 1em;
  @include viewport - ปานกลาง {
  แบบอักษรขนาด: 1.5EM;
  }
  @include วิวพอร์ต - ขนาดใหญ่ {
  ขนาดตัวอักษร: 2EM;
  }}

13. เพิ่มสถานะการโต้ตอบและฟังก์ชั่นในตัว

เราสามารถเพิ่มการโต้ตอบกับปุ่มของเราโดยการเปลี่ยนสีพื้นหลังเมื่อปุ่มมีปฏิสัมพันธ์กับการใช้เมาส์หรือแป้นพิมพ์

SASS มีจำนวนของ ฟังก์ชั่นสีในตัว ช่วยให้เราสามารถใช้สีพื้นหลังที่เราตั้งไว้ในรายการของเราและผสมกับสีดำเพื่อทำให้ปุ่มมืดลง - เมื่อมีปฏิสัมพันธ์กับ 

 ไอคอน - # {ไอคอน $} {
  พื้นหลัง - สี: $ ไอคอน - พื้นหลัง;
  & amp;: โฮเวอร์
  & amp;: โฟกัส,
  & amp;: ใช้งาน {
  สีพื้นหลัง:
  ผสม (สีดำไอคอน $ - พื้นหลัง 15%);
  }}

14. การเปลี่ยนสีพื้นหลัง

นอกจากนี้เรายังสามารถใช้คุณสมบัติ 'การเปลี่ยนแปลง' ใน CSS เพื่อสร้างความแตกต่างระหว่างสีพื้นหลัง เราสามารถใช้ค่า 'ทั้งหมด' แต่มีราคาแพงทั้งในแง่ของประสิทธิภาพและจะไม่อนุญาตให้เราเปลี่ยนค่าที่แตกต่างกันในเวลาที่แตกต่างกันและฟังก์ชั่นการจับเวลา 

 [คลาส ^ = "Social__icon"]{
  ...
  การเปลี่ยนแปลง: พื้นหลังสี
  150ms ease-out
  ;
}

15. เพิ่มเอฟเฟกต์การเปลี่ยนแปลงเพิ่มเติม

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

 [คลาส ^ = "Social__icon"] {
  ตำแหน่ง: ญาติ;
  ด้านบน: 0;
  ...
  การเปลี่ยนแปลง: พื้นหลังสี
   150ms ease-out
    เชิงเส้น 250ms ยอดนิยม
  ; }

16. เลื่อนปุ่มขึ้นมาเมื่อมีปฏิสัมพันธ์

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

 [คลาส ^ = "Social__icon"] {
  ...
  & amp;: โฮเวอร์
  & amp;: โฟกัส,
  & amp;: ใช้งาน {
  โครงร่าง: ไม่มี;
  ด้านบน: -0.25em;
  }}

17. เพิ่มเงาวาง

Using transition properties we’ve animated any interaction with the buttons – moving them up, darkening the background and adding a drop shadow

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

นอกจากนี้เรายังสามารถใช้วิธีการเดียวกันในการสร้างและเคลื่อนไหว 'Box-Shadow' - เพิ่มความลึกให้กับการมีปฏิสัมพันธ์อีกเล็กน้อย - การเปลี่ยนความสูงในแนวตั้งของเงาในเวลาเดียวกันกับค่าสูงสุด 

 กล่องเงา:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0.2);
& amp;: โฮเวอร์
& amp;: โฟกัส,
& amp;: ใช้งาน {
  ...
  กล่อง - เงา:
  0 0.5EM 0.25EM -0.25EM RGBA (0,0,0,0.3);
}

18. เพิ่มเคล็ดลับเคล็ดลับ

เราสามารถเพิ่ม Tooltips ด้วย CSS ได้อย่างง่ายดายเพื่อเพิ่มความคมชัดเพิ่มเติมสำหรับผู้ใช้ของเรา สิ่งแรกที่เราจะทำคือการเพิ่มค่าเครื่องมือให้กับรายการ ทำให้แน่ใจว่าได้เขียนไว้ในเครื่องหมายคำพูดเพื่อให้การใช้พื้นที่หากจำเป็น 

 $ ไอคอนรายการ: (
  Vimeo "Vimeo" "\ F27D" # 1AB7EA,
  Twitter "Twitter" "\ F099" # 1DA1F2
  ...
  GitHub "GitHub" "\ F113" # 333
  RSS "RSS" "\ F09E" # F26522
);

19. ปรับเปลี่ยนการวนรอบ @Each

เนื่องจากการเพิ่มในรายการของเราเราจะต้องปรับเปลี่ยนวง '@Each' ของเราเพื่อรวมค่า tooltip ('$ name') จากนั้นเราสามารถส่งออกชื่อเป็นเนื้อหาขององค์ประกอบ 'ก่อนหลอก' บนปุ่มของเรา 

 @Each $ ไอคอน, $ unicode $ unicode,
  $ icon-background ในรายการไอคอน $ {
  ...
  .social__icon - # {ไอคอน $} {
  ...
  & amp; :: ก่อน {
  เนื้อหา: '# {$ name}';
  }
  }}

20. สไตล์ก่อนองค์ประกอบหลอก

We've added some basic styles to the tooltips again adding transitions to animate them into position

เราได้เพิ่มสไตล์พื้นฐานบางอย่างให้กับเคล็ดลับการเพิ่มการเปลี่ยนภาพเพื่อเคลื่อนไหวเป็นตำแหน่ง

ตอนนี้เรามีชื่อของแต่ละองค์ประกอบที่แสดงบนหน้าจอเราต้องสไตล์องค์ประกอบเพิ่มสีพื้นหลังการขยายและองค์ประกอบการจัดแต่งทรงผมอื่น ๆ - รวมถึงการวางตำแหน่งองค์ประกอบและการอ่านสำหรับการเปลี่ยนและแก้ไขความทึบและการแก้ไขค่าความทึบและการแก้ไขค่านิยมและค่าสูงสุดเมื่อมีปฏิสัมพันธ์ . 

 & amp; :: ก่อน {...
  ด้านบน: -3.5em;
  ความทึบ: 0;
  การเปลี่ยนแปลง:
  เชิงเส้น 250ms สูงสุดความทึบแสง 150ms 150ms;
}
& amp;: โฮเวอร์, ... {...
  & amp; :: ก่อน {
  ความทึบแสง: 1;
  ด้านบน: -2.5em; }
}

21. สไตล์ขององค์ประกอบหลอกเทียม

เราจะใช้ css สามเหลี่ยม ในการสร้างด้านล่างของเครื่องมือเคล็ดลับของเรา - วางตำแหน่งองค์ประกอบอีกครั้งในการอ่านเพื่อการเปลี่ยน - โดยการเปลี่ยนความทึบและค่าสูงสุดในเวลาที่แตกต่างกัน

โดยการเพิ่มความล่าช้าเราได้รับภาพเคลื่อนไหวที่ประกอบด้วยเครื่องมือที่ซีดจางและเคลื่อนที่ลง 

 & amp; :: หลังจาก {...
  ด้านบน: -1.9em;
  ความทึบ: 0;
  การเปลี่ยนแปลง:
  เชิงเส้น 250ms สูงสุดความทึบแสง 150ms 150ms;
}
& amp;: โฮเวอร์, ... {...
  & amp; :: หลังจาก {
  ความทึบแสง: 1;
  ด้านบน: -0.9em; }
}

คอลเลกชัน codepen ของขั้นตอนการสอนสามารถพบได้ ที่นี่ .

บทความนี้ปรากฏในฉบับนิตยสาร Web Designer 264 ซื้อที่นี่ .

อ่านเพิ่มเติม:

  • Sass คืออะไร
  • 8 คุณสมบัติโค้ดที่คุณไม่รู้
  • 5 เคล็ดลับสำหรับ CSS ที่รวดเร็วสุด ๆ

วิธีการ - บทความยอดนิยม

วิธีการแก้ไขวิดีโอบน Tiktok

วิธีการ Sep 14, 2025

(เครดิตภาพ: Mabel Wynne) การเรียนรู้วิธีการแก้ไขว�..

เริ่มต้นด้วย Flame Painter

วิธีการ Sep 14, 2025

Painter Flame เป็นแพคเกจสีแบบสแตนด์อโลนและเอฟเฟกต์อนุภาคที่ช่วยให้คุณสามา..

วิธีการถ่ายภาพหน้าจอบน Mac

วิธีการ Sep 14, 2025

(เครดิตภาพ: Creative Bloq) หากคุณต้องการจับภาพทั้งห..

5 คุณสมบัติ CSS ใหม่สุดฮอตและวิธีใช้

วิธีการ Sep 14, 2025

หน้า 1 จาก 2: สำรวจ 5 คุณสมบัติ CSS ใหม่: ขั้�..

วิธีการออกแบบการพิมพ์สามมิติ

วิธีการ Sep 14, 2025

มุมมองคือทุกสิ่งในการออกแบบ หากสิ่งที่คุณวา�..

วิธีการวาดด้วยภาพความสัมพันธ์สำหรับ iPad

วิธีการ Sep 14, 2025

ภาพความสัมพันธ์สำหรับ iPad เป็นสิ่งที่ยอดเย..

พัฒนาทักษะการล้อเลียนของคุณ

วิธีการ Sep 14, 2025

เมื่อฉันตัดสินใจที่จะเป็นนักวาดภาพประกอบอิส..

พลังที่เหลือเชื่อของ Flexbox

วิธีการ Sep 14, 2025

Flexbox หรือเค้าโครงกล่องที่ยืดหยุ่นเป็นโมดูลเค้�..

หมวดหมู่