คำถามและคำตอบสัมภาษณ์ SASS 40 อันดับแรก (2025)

ต่อไปนี้เป็นคำถามและคำตอบในการสัมภาษณ์ของ SASS และ SCSS สำหรับนักศึกษาใหม่และผู้สมัครที่มีประสบการณ์เพื่อให้ได้งานในฝัน

1) อธิบายว่า Sass คืออะไร? มันสามารถใช้งานได้อย่างไร?

Sass ย่อมาจาก Syntacically Awesome Stylesheets และถูกสร้างขึ้นโดย Hampton Catlin มันเป็นส่วนขยายของ CSS3, การเพิ่มกฎที่ซ้อนกัน, มิกซ์อิน, ตัวแปร, การสืบทอดตัวเลือก ฯลฯ

Sass สามารถใช้ได้สามวิธี

เป็นเครื่องมือบรรทัดคำสั่ง
เป็นโมดูล Ruby แบบสแตนด์อโลน
เป็นปลั๊กอินสำหรับเฟรมเวิร์กที่เปิดใช้งาน Rack

ดาวน์โหลดไฟล์ PDF ฟรี: คำถามและคำตอบสัมภาษณ์ SASS

2) แสดงรายการคุณสมบัติที่สำคัญของ Sass?

คุณสมบัติที่สำคัญสำหรับ Sass ได้แก่

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

3) แสดงรายการประเภทข้อมูลที่ SassScript รองรับ?

SassScript รองรับประเภทข้อมูลหลักเจ็ดประเภท

ตัวเลข ( เช่น 1,5 ,10px)
สตริงข้อความ ( ก., “foo”, 'bar' ฯลฯ)
สี (น้ำเงิน #04a3f9)
บูลีน (จริงหรือเท็จ)
Nulls (เช่น; null)
รายการค่า คั่นด้วยช่องว่างหรือลูกน้ำ (เช่น 1.5em, Arial, Helvetica ฯลฯ)
แผนที่จากค่าหนึ่งไปยังอีกค่าหนึ่ง (g., ( คีย์ 1: value1, คีย์ 2: ค่า 2))

4) อธิบายวิธีการกำหนดตัวแปรใน Sass?

ตัวแปรใน Sass เริ่มต้นด้วยเครื่องหมาย ($) และการกำหนดตัวแปรจะกระทำด้วยเครื่องหมายทวิภาค (:)

5) อธิบายว่า Sass และ SCSS แตกต่างกันอย่างไร

ความแตกต่างระหว่าง Sass และ SCSS ก็คือ

สัสเป็น CSS โปรเซสเซอร์ล่วงหน้าพร้อมความก้าวหน้าทางไวยากรณ์และส่วนขยายของ CSS3
Sass มีสองไวยากรณ์
ไวยากรณ์แรกคือ “SCSS” และใช้นามสกุล .scss
ไวยากรณ์อื่นเป็นไวยากรณ์เยื้องหรือเพียงแค่ “Sass” และใช้ส่วนขยาย .sass
แม้ว่า Sass จะมีไวยากรณ์หลวมที่มีช่องว่างและไม่มีอัฒภาค แต่ SCSS จะมีลักษณะคล้ายกับ CSS มากกว่า

เอกสารที่ถูกต้องของ CSS ใดๆ สามารถแปลงเป็น Sass ได้โดยเพียงแค่เปลี่ยนนามสกุลจาก.CSS เป็น.SCSS

6) Selector Nesting ใน Sass ใช้ทำอะไร?

ใน Sass การซ้อนตัวเลือกเสนอวิธีการสำหรับผู้เขียนสไตล์ชีทในการคำนวณตัวเลือกแบบยาวโดยการซ้อนตัวเลือกที่สั้นกว่าไว้ภายในกันและกัน

7) อธิบายว่าฟังก์ชัน @extend ใช้ใน Sass คืออะไร

ใน Sass คำสั่ง @EXTEND จัดเตรียมวิธีง่ายๆ ในการอนุญาตให้ตัวเลือกสืบทอดสไตล์ของอีกอันหนึ่ง โดยมีจุดมุ่งหมายเพื่อให้ตัวเลือก A ขยายสไตล์จากตัวเลือก B เมื่อทำเช่นนั้น ตัวเลือก A จะถูกเพิ่มให้กับตัวเลือก B เพื่อให้ทั้งสองมีการประกาศเดียวกัน @EXTEND ป้องกันการขยายโค้ดโดยการจัดกลุ่มตัวเลือกที่แชร์สไตล์เดียวกันให้เป็นกฎเดียว

8) อธิบายว่าฟังก์ชัน @IMPORT ใน Sass คืออะไร

ฟังก์ชัน @IMPORT ใน Sass

ขยายกฎการนำเข้า CSS โดยเปิดใช้งานการนำเข้าไฟล์ SCSS และ Sass
ไฟล์ที่นำเข้าทั้งหมดจะรวมเป็นไฟล์ CSS ที่ส่งออกเพียงไฟล์เดียว
สามารถมิกซ์แอนด์แมตช์ไฟล์ใดก็ได้และมั่นใจในสไตล์ของคุณทั้งหมด
@IMPORT ใช้ชื่อไฟล์ในการนำเข้า

9) เหตุใด Sass จึงถือว่าดีกว่า LESS

Saas ช่วยให้คุณสามารถเขียนวิธีการที่นำมาใช้ซ้ำได้ และใช้คำสั่งตรรกะ เช่น ลูป และเงื่อนไข
ผู้ใช้ Saas สามารถเข้าถึงไลบรารี Compass และใช้คุณสมบัติที่ยอดเยี่ยม เช่น การสร้างแผนที่สไปรท์แบบไดนามิก การแฮ็กเบราว์เซอร์รุ่นเก่า และการสนับสนุนข้ามเบราว์เซอร์สำหรับคุณสมบัติ CSS3
Compass ยังให้คุณเพิ่มเฟรมเวิร์กภายนอก เช่น Blueprint, Foundation หรือ บูต ด้านบน
ใน LESS คุณสามารถเขียนคำสั่งตรรกะพื้นฐานโดยใช้ 'guarded mixin' ซึ่งเทียบเท่ากับคำสั่ง Sass if
ใน LESS คุณสามารถวนซ้ำค่าตัวเลขได้โดยใช้ฟังก์ชันแบบเรียกซ้ำ ในขณะที่ Sass อนุญาตให้คุณวนซ้ำข้อมูลประเภทใดก็ได้
ใน Sass คุณสามารถเขียนฟังก์ชันที่มีประโยชน์ของคุณเองได้

10) อธิบายว่าฟังก์ชัน Mixin ใน Sass คืออะไร? การทำให้มิกซ์อินแห้งหมายความว่าอย่างไร

Mixin ช่วยให้คุณสามารถกำหนดสไตล์ที่สามารถนำมาใช้ซ้ำได้ทั่วทั้งสไตล์ชีต โดยไม่จำเป็นต้องใช้คลาสที่ไม่ใช่ความหมาย เช่น .float-left

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

11) อธิบายว่า Sass Maps คืออะไร และ Sass Maps มีประโยชน์อย่างไร

Sass map เป็นข้อมูลที่มีโครงสร้างในลักษณะลำดับชั้น ไม่ใช่แค่ตัวแปรหลายตัว สามารถช่วยจัดระเบียบโค้ดได้ การใช้งาน Sass ที่ยอดเยี่ยมบางประการคือ

มันมีประโยชน์มากเมื่อต้องจัดการกับเลเยอร์ขององค์ประกอบในโครงการของคุณ
การจัดการสีจะมีประโยชน์เมื่อมีรายการสีและเฉดสีต่างๆ จำนวนมาก
ใช้แผนผังไอคอนสำหรับไอคอนโซเชียลมีเดียต่างๆ เช่น facebook: '\e607' หรือ twitter: '\e602'
ต่างจากไลบรารีการเขียนโปรแกรมอื่นๆ Sass map จะประกอบด้วยโค้ดที่จะใช้เท่านั้น

12) อธิบายว่าความคิดเห็นของ Sass แตกต่างจาก CSS ทั่วไปอย่างไร

ไวยากรณ์สำหรับความคิดเห็นใน CSS ปกติจะเริ่มต้นด้วย /* comment…*/ ในขณะที่ SASS มีความคิดเห็นสองประเภท ความคิดเห็นบรรทัดเดียว // และความคิดเห็น CSS หลายบรรทัดด้วย /* */

13) Sass รองรับความคิดเห็นแบบอินไลน์หรือไม่

ความคิดเห็นบรรทัดเดียว // จะถูกลบออกโดยตัวประมวลผลล่วงหน้า .scss และจะไม่ปรากฏในไฟล์ .css ของคุณ

ในขณะที่ความคิดเห็น */ เป็น CSS ที่ถูกต้อง และจะถูกเก็บไว้ระหว่างการแปลจาก .scss เป็นไฟล์ .css ของคุณ

14) Sass ใช้การแก้ไขอย่างไร

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

15) อธิบายว่าเมื่อใดที่คุณสามารถใช้ %placeholders ใน Sass ได้

%placeholders ใน Sass มีประโยชน์เมื่อคุณต้องการเขียนสไตล์ที่ตั้งใจจะขยาย แต่คุณไม่ต้องการให้มองเห็นสไตล์พื้นฐานในรูปแบบ CSS เอาท์พุต

16) เป็นไปได้ไหมที่จะซ้อนตัวแปรภายในตัวแปรใน Sass?

ขณะนี้การแก้ไขชื่อตัวแปรไม่สามารถทำได้ใน Sass อย่างไรก็ตาม คุณอาจใช้การประมาณค่าของตัวยึดตำแหน่งได้

17) Sass con และข้อดีคืออะไร?

ข้อดี:

Sass นั้นง่ายต่อการเรียนรู้โดยเฉพาะอย่างยิ่งสำหรับผู้ที่มีพื้นหลังของ Python, Ruby หรือ Coffescript และวางการใช้ฟังก์ชัน การเขียนมิกซ์อิน
CSS สามารถแปลงเป็น Sass ได้อย่างง่ายดาย
ตลอดทั้งโปรเจ็กต์ คุณไม่จำเป็นต้องทำซ้ำคำสั่ง CSS ที่คล้ายกันโดยใช้แอตทริบิวต์ @extend
อนุญาตให้กำหนดตัวแปรที่ใช้งานได้ตลอดทั้งโครงการ
ช่วยให้โครงการตอบสนองของคุณเป็นระเบียบมากขึ้น

จุดด้อย:

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

18) อธิบายว่า LESS คืออะไร?

LESS เป็นภาษาที่ใช้สร้างสไตล์ชีตแบบไดนามิก LESS เป็นตัวประมวลผลล่วงหน้า CSS และขยาย CSS ด้วยพฤติกรรมแบบไดนามิก อนุญาตให้มีตัวแปร มิกซ์อิน การดำเนินการ และฟังก์ชัน LESS ทำงานบนฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ทั้งคู่

19) อธิบายวิธีสร้างไฟล์ LESS และจะจัดเก็บและคอมไพล์ไฟล์ได้ที่ไหน?

การสร้างหรือจัดเก็บไฟล์ LESS คล้ายคลึงกับการสร้าง/จัดเก็บไฟล์ CSS คุณสามารถสร้างไฟล์ LESS ใหม่โดยใช้นามสกุล .less หรือคุณสามารถเปลี่ยนชื่อไฟล์ .css ที่มีอยู่เป็นไฟล์ .less ได้ คุณสามารถเขียนโค้ด LESS ด้วยโค้ด CSS ที่มีอยู่ได้

วิธีที่ดีที่สุดในการสร้างมันภายใน ~/content/ หรือ ~/Styles/ โฟลเดอร์

20) LESS สามารถใช้ในทางใดได้บ้าง?

สามารถใช้ผ่าน npm LESS บนบรรทัดคำสั่งได้
ดาวน์โหลดเป็นไฟล์สคริปต์สำหรับเบราว์เซอร์
สำหรับเครื่องมือของบุคคลที่สาม จะมีการใช้

21) ตัวแปรแสดงเป็น LESS ได้อย่างไร?

LESS อนุญาตให้กำหนดตัวแปรได้ ใน LESS ตัวแปรจะแสดงเป็น @sing ในขณะที่การกำหนดตัวแปรเสร็จสิ้นโดยใช้: (โคลอน) ร้องเพลง ค่าของตัวแปรจะถูกแทรกลงในไฟล์เอาต์พุต CSS เช่นเดียวกับไฟล์ที่ย่อเล็กสุด

22) อธิบายว่า Mixins มีประโยชน์อย่างไร?

Mixins ช่วยให้สามารถฝังคุณสมบัติทั้งหมดของคลาสลงในคลาสอื่นโดยรวมชื่อคลาสเป็นหนึ่งในคุณสมบัติ มันเหมือนกับตัวแปรแต่สำหรับทั้งคลาส

23) อธิบายว่าจะตั้งค่าโค้ดในโหมดนาฬิกาได้อย่างไรเมื่อคุณเรียกใช้ LESS.js ใน HTML5 เบราว์เซอร์?

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

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) อธิบายความหมายของการซ้อนในโปรแกรม LESS คืออะไร?

การซ้อนใน LESS คือการรวมกลุ่มของคำสั่งภายในคำสั่งอื่นๆ ดังนั้นจึงรวมกลุ่มของโค้ดที่เกี่ยวข้องกัน กล่าวอีกนัยหนึ่งเมื่อเราเพิ่มข้อมูลโค้ดและเพิ่มโค้ดอื่นเข้าไป ข้อมูลโค้ดนั้นจะเรียกว่าการซ้อนกัน

25) พูดถึงฟังก์ชั่นช่องสีที่ใช้ใน LESS คืออะไร?

สี
ความอิ่มตัว
hsvhue
ความอิ่มตัว
สะวาลือ
ด้วยสีแดง
สีเขียว
สีน้ำเงิน
แอลฟา
ลู
ความสว่าง

26) อธิบายว่า data-uri ใน LESS คืออะไร

ใน CSS นั้น Data URI เป็นหนึ่งในเทคนิคที่ดีที่สุด โดยช่วยให้นักพัฒนาหลีกเลี่ยงการอ้างอิงรูปภาพจากภายนอก และฝังลงในสไตล์ชีตโดยตรงแทน URI ข้อมูลเป็นวิธีที่ยอดเยี่ยมในการลดคำขอ HTTP

27) อธิบายว่า “Source Map Less Inline” คืออะไร

ตัวเลือก “ Source Map Less Inline” ระบุว่าเราควรรวมไฟล์ CSS ทั้งหมดลงใน Sourcemap ซึ่งหมายความว่าคุณต้องการเพียงไฟล์แผนที่ของคุณเพื่อไปยังแหล่งที่มาดั้งเดิมของคุณ

28) อธิบายว่า Extended “all” ใน LESS คืออะไร

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

29) อธิบายว่า “StrictImports” ใน LESS คืออะไร

strictImports ควบคุมว่าคอมไพลเลอร์จะอนุญาตให้ @import ภายในบล็อก @media หรือบล็อกตัวเลือกอื่น ๆ

30) แจกแจงความแตกต่างระหว่าง LESS และ Sass?

ภาษาสไตล์ชีตแต่ละภาษามีมุมมองและการใช้งานที่ดี อย่างไรก็ตามมีความแตกต่างเล็กน้อยในการใช้งาน

น้อย	Sass
– LESS ใช้ JavaScript และประมวลผลที่ฝั่งไคลเอ็นต์	– Sass ถูกเข้ารหัสใน Ruby และประมวลผลไปยังฝั่งเซิร์ฟเวอร์
– ชื่อตัวแปรจะขึ้นต้นด้วยสัญลักษณ์ @	– ชื่อตัวแปรนำหน้าด้วยสัญลักษณ์ $
– LESS จะไม่สืบทอดตัวเลือกหลายตัวด้วยคุณสมบัติชุดเดียว	– Sass สืบทอดตัวเลือกหลายตัวด้วยคุณสมบัติชุดเดียว
- LESS ใช้ไม่ได้กับหน่วย "ไม่ทราบ" ไม่ว่าจะส่งคืนการแจ้งเตือนข้อผิดพลาดทางไวยากรณ์สำหรับหน่วยที่เข้ากันไม่ได้หรือข้อผิดพลาดทางไวยากรณ์ที่เกี่ยวข้องกับคณิตศาสตร์	- Sass ช่วยให้คุณทำงานกับหน่วยที่ "ไม่รู้จัก" และยังส่งคืนการแจ้งเตือนข้อผิดพลาดทางไวยากรณ์สำหรับหน่วยที่เข้ากันไม่ได้

31) LESS และ Sass มีความคล้ายคลึงกันอย่างไร

ระหว่าง LESS และ Sass มีความคล้ายคลึงกัน

namespaces
ฟังก์ชั่นสี
มิกซ์อินและมิกซ์อินพาราเมตริก
ความสามารถในการทำรัง
การประเมินจาวาสคริปต์

32) อธิบายว่า &combinator ใช้ทำอะไร?

&combinator เชื่อมต่อตัวเลือกที่ซ้อนกันเข้ากับตัวเลือกพาเรนต์ มันมีประโยชน์สำหรับคลาส Pseudo เช่น :hover และ :focus

33) อธิบายว่าการดำเนินการใน LESS คืออะไร?

การดำเนินการสามารถใช้เพื่อทำหน้าที่ต่างๆ เช่น

ตัวดำเนินการทางคณิตศาสตร์อย่างง่าย: +, – , *, /
ฟังก์ชั่นสี
ฟังก์ชันทางคณิตศาสตร์
สามารถดำเนินการตัวแปรขนาดหรือสีใดก็ได้

34) อธิบายว่า Escape คืออะไร?

การใช้การหลบหนีใน LESS

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

35) องค์ประกอบ LESS ประกอบด้วยอะไรบ้าง

องค์ประกอบน้อยมีมิกซ์อินที่ใช้กันทั่วไปเช่น

.ลาด
.ปัดเศษ
.ความทึบ
.box-เงา
.เงาภายใน

36) แสดงรายการทางเลือกอื่นเทียบกับ LESS?

SASS: สไตล์ชีทที่ยอดเยี่ยมทางวากยสัมพันธ์
SCSS: เวอร์ชัน 2 ของ SASS
เหล็กจาร

37) อธิบายว่าคุณสามารถเรียกใช้คอมไพเลอร์จากบรรทัดคำสั่งได้อย่างไร?

คุณสามารถเรียกใช้คอมไพเลอร์ได้จากบรรทัดคำสั่งในรูปแบบ LESS as

$ lessc รูปแบบน้อย

สิ่งนี้จะส่งออก CSS ที่คอมไพล์แล้วไปที่ มาตรฐาน; จากนั้นคุณสามารถเปลี่ยนเส้นทางไปยังไฟล์ที่คุณเลือกได้

$ lessc styles.less > styles.css

38) ฟังก์ชั่น e () มีประโยชน์อย่างไร?

ด้วยความช่วยเหลือของฟังก์ชัน e() คุณสามารถหลีกเลี่ยงค่าเพื่อส่งผ่านไปยัง CSS ที่คอมไพล์แล้วโดยตรง โดยที่คอมไพเลอร์ LESS ไม่สังเกตเห็น

39) อธิบายว่าคุณสามารถคอมไพล์ LESS ล่วงหน้าเป็น CSS ได้อย่างไร

หากต้องการคอมไพล์ LESS ล่วงหน้าเป็น CSS คุณสามารถใช้ได้

เรียกใช้ less.js โดยใช้ Node.js : โดยใช้เฟรมเวิร์ก Node.js JavaScript คุณสามารถเรียกใช้สคริปต์ less.js นอกเบราว์เซอร์
ใช้ lessphp: สำหรับการใช้งานคอมไพเลอร์ LESS ที่เขียนด้วย PHP จะใช้ lessphp
ใช้คอมไพเลอร์ออนไลน์: ใช้คอมไพเลอร์ออนไลน์เพื่อรวบรวมโค้ด LESS อย่างรวดเร็วโดยไม่ต้องติดตั้งคอมไพเลอร์
น้อย. แอพ (สำหรับผู้ใช้ Mac): Less.app เป็นเครื่องมือฟรีสำหรับผู้ใช้ Mac เครื่องมือนี้จะคอมไพล์เป็นไฟล์ CSS โดยอัตโนมัติ

40) อธิบายวิธีการใช้ฟังก์ชันผสานใน LESS?

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

41) คุณจะสร้างโครงสร้างลูปใน LESS ได้อย่างไร?

มิกซ์อินสามารถเรียกตัวเองว่า LESS ได้ มิกซ์อินแบบเรียกซ้ำดังกล่าว เมื่อรวมกับการจับคู่รูปแบบและนิพจน์ Guard สามารถใช้เพื่อสร้างโครงสร้างการวนซ้ำ/ลูปต่างๆ

42) เหตุใดเราจึงต้องมีมิกซ์อินแบบพาราเมตริกใน LESS

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