40 câu hỏi phỏng vấn SASS hàng đầu và câu trả lời (2025)

Dưới đây là những câu hỏi và câu trả lời phỏng vấn SASS và SCSS dành cho cả ứng viên mới và ứng viên có kinh nghiệm để có được công việc mơ ước của mình.

1) Giải thích Sass là gì? Nó có thể được sử dụng như thế nào?

Sass là viết tắt của Syntactically Awesome Stylesheets và được Hampton Catlin tạo ra. Đây là phần mở rộng của CSS3, thêm các quy tắc lồng nhau, mixin, biến, kế thừa bộ chọn, v.v.

Sass có thể được sử dụng theo ba cách

Là một công cụ dòng lệnh
Là một mô-đun Ruby độc lập
Là một plugin cho bất kỳ khung hỗ trợ Rack nào

Tải xuống PDF miễn phí: Câu hỏi và câu trả lời phỏng vấn SASS

2) Liệt kê các tính năng chính của Sass?

Các tính năng chính của Sass bao gồm

Tương thích hoàn toàn với CSS3
Các phần mở rộng ngôn ngữ như lồng nhau, biến và mixin
Nhiều chức năng hữu ích để thao tác màu sắc và các giá trị khác
Các tính năng nâng cao như chỉ thị điều khiển cho thư viện
Đầu ra được định dạng tốt, có thể tùy chỉnh

3) Liệt kê các Kiểu dữ liệu mà SassScript hỗ trợ?

SassScript hỗ trợ bảy kiểu dữ liệu chính

Số (ví dụ: 1,5, 10px)
Chuỗi văn bản (ví dụ: “foo”, 'bar', v.v.)
Màu sắc (xanh lam, #04a3f9)
Boolean (đúng hoặc sai)
Null (ví dụ: null)
Danh sách các giá trị, được phân tách bằng dấu cách hoặc dấu phẩy (ví dụ: 1.5em, Arial, Helvetica, v.v.)
Ánh xạ từ giá trị này sang giá trị khác (ví dụ: (khóa 1: giá trị 1, khóa 2: Giá trị 2))

4) Giải thích cách định nghĩa biến trong Sass?

Các biến trong Sass bắt đầu bằng dấu ($) và việc gán biến được thực hiện bằng dấu hai chấm (:).

5) Giải thích sự khác biệt giữa Sass và SCSS?

Sự khác biệt giữa Sass và SCSS là,

Sass là một CSS bộ xử lý trước với những cải tiến về cú pháp và phần mở rộng của CSS3
Sass có hai cú pháp
Cú pháp đầu tiên là “SCSS” và nó sử dụng phần mở rộng .scss
Cú pháp khác là cú pháp thụt lề hoặc chỉ là “Sass” và nó sử dụng phần mở rộng .sass
Trong khi Sass có cú pháp lỏng lẻo với khoảng trắng và không có dấu chấm phẩy, SCSS giống với CSS hơn

Bất kỳ tài liệu CSS hợp lệ nào cũng có thể được chuyển đổi sang Sass bằng cách chỉ cần thay đổi phần mở rộng từ .CSS thành .SCSS.

6) Selector Nesting trong Sass được sử dụng để làm gì?

Trong Sass, lồng bộ chọn cung cấp cho tác giả bảng định kiểu một cách để tính toán bộ chọn dài bằng cách lồng các bộ chọn ngắn hơn vào nhau.

7) Giải thích chức năng @extend trong Sass được sử dụng để làm gì?

Trong Sass, chỉ thị @EXTEND cung cấp một cách đơn giản để cho phép một bộ chọn kế thừa các kiểu của một bộ chọn khác. Nó nhằm mục đích cung cấp một cách để một bộ chọn A mở rộng các kiểu từ một bộ chọn B. Khi thực hiện như vậy, bộ chọn A sẽ được thêm vào bộ chọn B để cả hai đều chia sẻ cùng một khai báo. @EXTEND ngăn chặn sự phình to của mã bằng cách nhóm các bộ chọn chia sẻ cùng một kiểu thành một quy tắc.

8) Giải thích công dụng của hàm @IMPORT trong Sass?

Hàm @IMPORT trong Sass

Mở rộng quy tắc nhập CSS bằng cách cho phép nhập các tệp SCSS và Sass
Tất cả các tệp đã nhập được hợp nhất thành một tệp CSS đầu ra duy nhất
Có thể kết hợp và ghép nối hầu như bất kỳ tệp nào và đảm bảo tất cả các kiểu của bạn
@IMPORT lấy tên tệp để nhập

9) Tại sao Sass được coi là tốt hơn LESS?

Saas cho phép bạn viết các phương thức có thể tái sử dụng và sử dụng các câu lệnh logic, ví dụ như vòng lặp và điều kiện
Người dùng Saas có thể truy cập thư viện Compass và sử dụng một số tính năng tuyệt vời như tạo bản đồ sprite động, các thủ thuật trình duyệt cũ và hỗ trợ đa trình duyệt cho các tính năng CSS3
Compass cũng cho phép bạn thêm một khuôn khổ bên ngoài như Blueprint, Foundation hoặc bootstrap trên đầu trang
Trong LESS, bạn có thể viết một câu lệnh logic cơ bản bằng cách sử dụng 'guarded mixin', tương đương với các câu lệnh if của Sass
Trong LESS, bạn có thể lặp qua các giá trị số bằng các hàm đệ quy trong khi Sass cho phép bạn lặp lại bất kỳ loại dữ liệu nào
Trong Sass, bạn có thể viết các hàm tiện dụng của riêng mình

10) Giải thích công dụng của hàm Mixin trong Sass? Ý nghĩa của DRY-ing trong mixin là gì?

Mixin cho phép bạn xác định các kiểu có thể được sử dụng lại trong toàn bộ bảng định kiểu mà không cần phải dùng đến các lớp phi ngữ nghĩa như .float-left.

DRY-ing ra khỏi một bản phối nghĩa là chia nó thành các phần động và tĩnh. Bản phối động là bản phối mà người dùng thực sự sẽ gọi, và bản phối tĩnh là các phần thông tin nếu không sẽ bị trùng lặp.

11) Giải thích Sass Maps là gì và công dụng của Sass Maps là gì?

Bản đồ Sass là dữ liệu có cấu trúc theo cách phân cấp chứ không chỉ là một loạt các biến. Nó có thể giúp tổ chức mã. Một số cách sử dụng tuyệt vời của Sass là

Nó rất hữu ích khi xử lý các lớp phần tử trong dự án của bạn
Nó có thể hữu ích trong việc quản lý màu sắc khi có danh sách dài các màu sắc và sắc thái khác nhau
Sử dụng bản đồ biểu tượng cho nhiều biểu tượng phương tiện truyền thông xã hội khác nhau, ví dụ: facebook: '\e607' hoặc twitter: '\e602'
Không giống như các thư viện lập trình khác, bản đồ Sass sẽ chỉ bao gồm mã sẽ được sử dụng

12) Giải thích sự khác biệt giữa chú thích Sass và CSS thông thường?

Cú pháp cho chú thích trong CSS thông thường bắt đầu bằng /* comments…*/, trong khi trong SASS có hai loại chú thích, chú thích một dòng // và chú thích CSS nhiều dòng với /* */.

13) Sass có hỗ trợ chú thích nội tuyến không?

Bình luận dòng đơn // sẽ bị bộ xử lý trước .scss xóa và sẽ không xuất hiện trong tệp .css của bạn

Trong khi chú thích */ là CSS hợp lệ và sẽ được giữ nguyên giữa bản dịch từ .scss sang tệp .css của bạn

14) Nội suy được sử dụng như thế nào trong Sass?

Trong Sass, bạn có thể định nghĩa một phần tử trong một biến và nội suy nó bên trong mã Sass. Điều này hữu ích khi bạn giữ các mô-đun của mình trong các tệp riêng biệt.

15) Giải thích khi nào bạn có thể sử dụng %placeholders trong Sass?

%placeholders trong Sass hữu ích khi bạn muốn viết các kiểu được cho là mở rộng, nhưng bạn không muốn các kiểu cơ sở được nhìn thấy trong các kiểu CSS đầu ra

16) Có thể lồng các biến trong biến trong Sass không?

Hiện tại không thể nội suy tên biến trong Sass. Tuy nhiên, bạn có thể sử dụng nội suy của trình giữ chỗ.

17) Ưu và nhược điểm của Sass là gì?

Ưu điểm:

Sass rất dễ học, đặc biệt là đối với những người có nền tảng về Python, Ruby hoặc Coffescript và sử dụng các hàm, viết mixin
CSS có thể dễ dàng chuyển đổi sang Sass
Trong suốt dự án, bạn không phải lặp lại các câu lệnh CSS tương tự bằng cách sử dụng thuộc tính @extend
Nó cho phép xác định các biến có thể sử dụng trong toàn bộ dự án
Nó giúp dự án phản hồi của bạn được tổ chức tốt hơn

Nhược điểm:

Cần thời gian để tìm hiểu các tính năng mới của bộ tiền xử lý trước khi sử dụng
Bạn có thể không sử dụng được tính năng kiểm tra phần tử tích hợp của trình duyệt
Việc khắc phục sự cố có thể khó khăn

18) Giải thích LESS là gì?

LESS là ngôn ngữ tạo ra bảng định dạng động. LESS là bộ xử lý trước CSS và mở rộng CSS với hành vi động. Nó cho phép các biến, mixin, hoạt động và hàm. LESS chạy trên cả phía máy chủ và phía máy khách.

19) Giải thích cách tạo tệp LESS và nơi lưu trữ cũng như biên dịch tệp này?

Tạo hoặc lưu trữ tệp LESS tương tự như tạo/lưu trữ tệp CSS. Có thể tạo tệp LESS mới với phần mở rộng .less hoặc bạn có thể đổi tên tệp .css hiện có thành tệp .less. Bạn có thể viết mã LESS bằng mã CSS hiện có.

Cách tốt nhất để tạo nó bên trong thư mục ~/content/ hoặc ~/Styles/

20) LESS có thể được sử dụng theo những cách nào?

Thông qua npm LESS có thể được sử dụng trên dòng lệnh
Tải xuống dưới dạng tệp tập lệnh cho trình duyệt
Đối với các công cụ của bên thứ ba, nó được sử dụng

21) Biến đổi được biểu diễn như thế nào trong LESS?

LESS cho phép định nghĩa các biến. Trong LESS, biến được biểu diễn dưới dạng @sing. Trong khi đó, việc gán biến được thực hiện bằng: (dấu hai chấm) sing. Các giá trị của biến được chèn vào tệp đầu ra CSS cũng như tệp đã thu nhỏ.

22) Giải thích tại sao Mixins lại hữu ích?

Mixin cho phép nhúng tất cả các thuộc tính của một lớp vào một lớp khác bằng cách bao gồm tên lớp như một trong các thuộc tính của nó. Nó giống như các biến nhưng dành cho toàn bộ các lớp.

23) Giải thích cách có thể thiết lập mã ở chế độ theo dõi khi bạn chạy LESS.js trong HTML5 trình duyệt?

Nếu bạn chạy LESS.js trong trình duyệt HTML5, nó sẽ sử dụng bộ nhớ cục bộ để lưu trữ đệm CSS được tạo. Tuy nhiên, theo quan điểm của nhà phát triển, họ không thể thấy những thay đổi họ đã thực hiện ngay lập tức. Để thấy những thay đổi của bạn ngay lập tức, bạn có thể tải chương trình ở chế độ phát triển và theo dõi bằng cách làm theo JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Giải thích ý nghĩa của lồng nhau trong lập trình LESS?

Lồng nhau trong LESS là nhóm các câu lệnh bên trong các câu lệnh khác, do đó nó tạo thành một nhóm mã có liên quan. Nói cách khác, khi chúng ta thêm một đoạn mã và thêm một đoạn mã khác vào bên trong nó, thì đoạn mã đó được gọi là lồng nhau.

25) Hãy kể tên những chức năng kênh màu được sử dụng trong LESS?

sắc
bão hòa
hsvhue
bão hòa
hswalue
đỏ
màu xanh lá
màu xanh da trời
alpha
luma
độ chói

26) Giải thích data-uri trong LESS là gì?

Trong CSS, Data URI là một trong những kỹ thuật tốt nhất, nó cho phép các nhà phát triển tránh tham chiếu hình ảnh bên ngoài và thay vào đó nhúng chúng trực tiếp vào một bảng định kiểu. Data URI là cách tuyệt vời để giảm yêu cầu HTTP

27) Giải thích “Source Map Less Inline” là gì?

Tùy chọn “Source Map Less Inline” cho biết chúng ta nên đưa tất cả các tệp CSS vào sourcemap. Điều đó có nghĩa là bạn chỉ cần tệp bản đồ của mình để truy cập vào nguồn gốc của bạn.

28) Giải thích mục đích sử dụng của Extend “all” trong LESS là gì?

Khi bạn chỉ định tất cả từ khóa cuối cùng trong đối số mở rộng, nó sẽ yêu cầu LESS khớp với bộ chọn đó như một phần của bộ chọn khác.

29) Giải thích “StrictImports” trong LESS là gì?

strictImports kiểm soát xem trình biên dịch có cho phép @import bên trong khối @media hay các khối chọn khác không

30) Liệt kê những điểm khác biệt giữa LESS và Sass?

Mỗi ngôn ngữ bảng định kiểu đều tốt theo góc nhìn và cách sử dụng riêng; tuy nhiên có một số khác biệt trong cách sử dụng.

ÍT HƠN	Sass
– LESS sử dụng JavaScript và được xử lý ở phía máy khách	– Sass được mã hóa bằng Ruby và do đó được xử lý ở phía máy chủ
– Tên biến được bắt đầu bằng ký hiệu @	– Tên biến được bắt đầu bằng ký hiệu $
– LESS không kế thừa nhiều bộ chọn với một tập hợp các thuộc tính	– Sass kế thừa nhiều bộ chọn với một tập hợp các thuộc tính
– LESS không hoạt động với các đơn vị “không xác định” cũng như không trả về thông báo lỗi cú pháp cho các đơn vị không tương thích hoặc lỗi cú pháp liên quan đến toán học	– Sass cho phép bạn làm việc với các đơn vị “không xác định” cũng trả về thông báo lỗi cú pháp cho các đơn vị không tương thích

31) Điểm tương đồng giữa LESS và Sass là gì?

Giữa LESS và Sass có những điểm tương đồng sau

Không gian tên
Chức năng màu sắc
Mixin và mixin tham số
Khả năng lồng nhau
Đánh giá JavaScript

32) Giải thích công dụng của &combinator là gì?

&combinator nối bộ chọn lồng nhau với bộ chọn cha. Nó hữu ích cho các lớp Pseudo như :hover và :focus

33) Giải thích mục đích sử dụng của các phép toán trong LESS?

Các hoạt động có thể được sử dụng để thực hiện các chức năng như

Các toán tử toán học đơn giản: +, –, *, /
Chức năng màu sắc
Các hàm toán học
Bất kỳ kích thước hoặc màu sắc nào cũng có thể được vận hành

34) Giải thích tác dụng của Escape là gì?

Sử dụng thoát trong LESS

Khi bạn cần xuất ra CSS mà cú pháp CSS không hợp lệ
Cú pháp độc quyền không được LESS công nhận
Trình biên dịch LESS sẽ báo lỗi nếu không được sử dụng
Tiền tố đơn giản với ký hiệu ~ và đặt trong dấu ngoặc kép

35) LESS elements chứa những gì?

Ít thành phần chứa các mixin thường dùng như

.độ dốc
.tròn
.độ mờ đục
.hộp-bóng
.bóng tối bên trong

36) Liệt kê các lựa chọn thay thế cho LESS?

SASS: Các Stylesheet cú pháp tuyệt vời
SCSS: Phiên bản 2 của SASS
Stylus

37) Giải thích cách bạn có thể gọi trình biên dịch từ dòng lệnh?

Bạn có thể gọi trình biên dịch từ dòng lệnh trong LESS như

$ lessc kiểu.less

Điều này sẽ xuất ra CSS đã biên dịch đầu ra chuẩn; sau đó bạn có thể chuyển hướng nó đến một tập tin bạn chọn

$ lessc styles.less > styles.css

38) Công dụng của hàm e() là gì?

Với sự trợ giúp của hàm e(), bạn có thể thoát một giá trị để nó truyền thẳng đến CSS đã biên dịch mà không bị trình biên dịch LESS phát hiện.

39) Giải thích cách bạn có thể biên dịch trước LESS thành CSS?

Để biên dịch trước LESS thành CSS, bạn có thể sử dụng

Chạy less.js bằng Node.js: Bằng cách sử dụng khung JavaScript Node.js, bạn có thể chạy tập lệnh less.js bên ngoài trình duyệt
Sử dụng lessphp: Để triển khai trình biên dịch LESS được viết bằng PHP, lessphp được sử dụng
Sử dụng trình biên dịch trực tuyến: Sử dụng trình biên dịch trực tuyến để biên dịch nhanh mã LESS mà không cần cài đặt trình biên dịch
Less.app (dành cho người dùng Mac): Less.app là một công cụ miễn phí dành cho người dùng Mac, công cụ này tự động biên dịch chúng thành các tệp CSS

40) Giải thích cách sử dụng hàm merge trong LESS?

Để tổng hợp các giá trị từ nhiều thuộc tính vào một danh sách phân cách bằng dấu cách hoặc dấu phẩy dưới một thuộc tính duy nhất, LESS được sử dụng. Nó hữu ích cho các thuộc tính như biến đổi và nền

41) Làm thế nào để tạo cấu trúc vòng lặp trong LESS?

Một mixin có thể tự gọi trong LESS. Các mixin đệ quy như vậy, khi kết hợp với Pattern matching và Guard Expressions, có thể được sử dụng để tạo ra nhiều cấu trúc lặp/vòng lặp khác nhau.

42) Tại sao chúng ta cần mixin tham số trong LESS?

Mixin tham số giống như mixin chuẩn. Điểm khác biệt duy nhất là mixin tham số lấy tham số như hàm trong JavaScript. Sau khi xác định tham số cho mixin, bạn có thể kiểm soát mixin tốt hơn.