SASS 면접 질문 및 답변 상위 40개(2025)

꿈의 직업을 얻기 위한 신입생과 경력 지원자를 위한 SASS 및 SCSS 인터뷰 질문과 답변은 다음과 같습니다.

1) Sass가 무엇인지 설명해주세요. 어떻게 사용할 수 있나요?

Sass는 Syntactically Awesome Stylesheets의 약자로 Hampton Catlin이 만들었습니다. 이는 CSS3의 확장으로 중첩 규칙, 믹스인, 변수, 선택기 상속 등을 추가합니다.

Sass는 세 가지 방법으로 사용될 수 있습니다

명령줄 도구로
독립형 Ruby 모듈로
Rack 지원 프레임워크용 플러그인

무료 PDF 다운로드: SASS 인터뷰 질문 및 답변

2) Sass의 주요 기능을 나열해 보세요.

Sass의 주요 기능은 다음과 같습니다.

완전한 CSS3 호환
중첩, 변수, 믹스인과 같은 언어 확장
색상 및 기타 값을 조작하는 데 유용한 많은 기능
라이브러리에 대한 제어 지시문과 같은 고급 기능
올바른 형식의 사용자 정의 가능한 출력

3) SassScript가 지원하는 데이터 유형을 나열해 보세요.

SassScript는 XNUMX가지 주요 데이터 유형을 지원합니다.

숫자(예: 1,5 ,10px)
텍스트 문자열(예: "foo", 'bar' 등)
색상(파란색, #04a3f9)
부울(참 또는 거짓)
Null(예: Null)
공백이나 쉼표로 구분된 값 목록(예: 1.5em, Arial, Helvetica 등)
한 값에서 다른 값으로 매핑(예: (키 1: 값1, 키 2: 값 2))

4) Sass에서 변수를 정의하는 방법을 설명해주세요.

Sass의 변수는 ($) 기호로 시작하고 변수 할당은 콜론(:)으로 수행됩니다.

5) Sass와 SCSS의 차이점을 설명해주세요.

Sass와 SCSS의 차이점은 다음과 같습니다.

사스는 CSS 향상된 구문과 CSS3 확장 기능을 갖춘 전처리기
Sass에는 두 가지 구문이 있습니다
첫 번째 구문은 "SCSS"이며 .scss 확장자를 사용합니다.
다른 구문은 들여쓰기 구문 또는 "Sass"이며 .sass 확장자를 사용합니다.
Sass는 공백이 있고 세미콜론이 없는 느슨한 구문을 갖고 있지만 SCSS는 CSS와 더 유사합니다.

확장자를 .CSS에서 .SCSS로 변경하기만 하면 유효한 CSS 문서를 Sass로 변환할 수 있습니다.

6) Sass의 선택기 중첩은 어떤 용도로 사용됩니까?

Sass에서 선택기 중첩은 스타일시트 작성자가 더 짧은 선택기를 서로 중첩하여 긴 선택기를 계산할 수 있는 방법을 제공합니다.

7) Sass에서 사용되는 @extend 함수가 무엇인지 설명해주세요.

Sass에서 @EXTEND 지시문은 선택기가 다른 선택기의 스타일을 상속할 수 있도록 하는 간단한 방법을 제공합니다. 이는 선택기 A가 선택기 B의 스타일을 확장하는 방법을 제공하는 것을 목표로 합니다. 그렇게 하면 선택기 A가 선택기 B에 추가되어 둘 다 동일한 선언을 공유하게 됩니다. @EXTEND는 동일한 스타일을 공유하는 선택기를 하나의 규칙으로 그룹화하여 코드 팽창을 방지합니다.

8) Sass에서 @IMPORT 함수의 용도가 무엇인지 설명해주세요.

Sass의 @IMPORT 함수

SCSS 및 Sass 파일 가져오기를 활성화하여 CSS 가져오기 규칙을 확장합니다.
가져온 모든 파일은 단일 출력 CSS 파일로 병합됩니다.
모든 파일을 가상으로 혼합하고 일치시킬 수 있으며 모든 스타일을 확신할 수 있습니다.
@IMPORT는 가져올 파일 이름을 사용합니다.

9) Sass가 LESS보다 나은 것으로 간주되는 이유는 무엇입니까?

Saas를 사용하면 재사용 가능한 메서드를 작성하고 논리 문(예: 루프 및 조건문)을 사용할 수 있습니다.
SaaS 사용자는 Compass 라이브러리에 액세스하여 동적 스프라이트 맵 생성, 레거시 브라우저 핵 및 CSS3 기능에 대한 크로스 브라우저 지원과 같은 몇 가지 멋진 기능을 사용할 수 있습니다.
Compass를 사용하면 Blueprint, Foundation 또는 같은 외부 프레임워크를 추가할 수도 있습니다. 부트 스트랩 위에
LESS에서는 Sass if 문과 동일한 'guarded mixin'을 사용하여 기본 논리 문을 작성할 수 있습니다.
LESS에서는 재귀 함수를 사용하여 숫자 값을 반복할 수 있지만 Sass에서는 모든 종류의 데이터를 반복할 수 있습니다.
Sass에서는 자신만의 편리한 함수를 작성할 수 있습니다

10) Sass에서 Mixin 기능의 용도가 무엇인지 설명해주세요. 믹스인을 건조시킨다는 것은 무엇을 의미합니까?

Mixin을 사용하면 .float-left와 같은 의미가 없는 클래스에 의지할 필요 없이 스타일시트 전체에서 재사용할 수 있는 스타일을 정의할 수 있습니다.

믹싱을 건조한다는 것은 믹싱을 동적 부분과 정적 부분으로 나누는 것을 의미합니다. 동적 믹스인은 사용자가 실제로 호출하려는 것이고, 정적 믹스인은 그렇지 않으면 복제될 정보 조각입니다.

11) Sass Maps가 무엇인지, Sass Maps의 용도는 무엇인지 설명하세요.

Sass 맵은 단순한 변수 묶음이 아닌 계층적 방식으로 구조화된 데이터입니다. 코드를 정리하는 데 도움이 될 수 있습니다. Sass를 잘 활용하는 방법은 다음과 같습니다.

프로젝트의 요소 레이어를 처리할 때 매우 유용합니다.
다양한 색상과 음영 목록이 있을 때 색상 관리에 도움이 될 수 있습니다.
다양한 소셜 미디어 아이콘에 아이콘 맵을 사용하세요. 예: facebook: '\e607' 또는 twitter: '\e602'
다른 프로그래밍 라이브러리와 달리 Sass 맵은 사용될 코드로만 구성됩니다.

12) Sass 주석이 일반 CSS와 어떻게 다른지 설명해주세요.

일반 CSS의 주석 구문은 /* 주석…*/으로 시작하는 반면, SASS에는 두 가지 유형의 주석, 즉 한 줄 주석 //과 /* */로 된 여러 줄 CSS 주석이 있습니다.

13) Sass는 인라인 주석을 지원합니까?

한 줄 주석은 // .scss 전처리기에 의해 제거되며 .css 파일에 표시되지 않습니다.

주석 */은 유효한 CSS이며 .scss에서 .css 파일로 번역되는 사이에 유지됩니다.

14) Sass에서는 보간법이 어떻게 사용되나요?

Sass에서는 변수에 요소를 정의하고 이를 Sass 코드 내부에 삽입할 수 있습니다. 모듈을 별도의 파일에 보관할 때 유용합니다.

15) Sass에서 % 자리 표시자를 언제 사용할 수 있는지 설명해주세요.

Sass의 %placeholders는 확장할 스타일을 작성하고 싶지만 기본 스타일이 출력 CSS 스타일에 표시되는 것을 원하지 않을 때 유용합니다.

16) Sass의 변수 내에 변수를 중첩하는 것이 가능합니까?

현재 Sass에서는 변수 이름 보간이 불가능합니다. 그러나 자리 표시자의 보간을 사용할 수 있습니다.

17) Sass의 단점과 장점은 무엇입니까?

장점:

Sass는 특히 Python, Ruby 또는 Coffescript에 대한 배경 지식이 있고 함수를 사용하고 믹스인을 작성하는 사람들에게 배우기 쉽습니다.
CSS를 Sass로 쉽게 변환할 수 있습니다.
프로젝트 전체에서 @extend 속성을 사용하여 유사한 CSS 문을 반복할 필요가 없습니다.
전체 프로젝트에서 사용할 수 있는 변수를 정의할 수 있습니다.
반응형 프로젝트를 더욱 체계적으로 유지합니다.

단점:

사용하기 전에 전처리기의 새로운 기능을 배우는 시간이 필요합니다.
브라우저에 내장된 요소 검사기 기능을 사용하지 못할 수도 있습니다.
문제 해결이 어려울 수 있습니다.

18) LESS가 무엇인지 설명해주세요.

LESS는 동적 스타일 시트 생성 언어입니다. LESS는 CSS 전처리기이며 동적 동작으로 CSS를 확장합니다. 변수, 믹스인, 작업 및 함수를 허용합니다. LESS는 서버 측과 클라이언트 측 모두에서 실행됩니다.

19) LESS 파일을 생성하는 방법과 이를 저장하고 컴파일할 위치를 설명해주세요.

LESS 파일을 생성하거나 저장하는 것은 CSS 파일을 생성/저장하는 것과 유사합니다. .less 확장자를 사용하여 새 LESS 파일을 생성하거나 기존 .css 파일의 이름을 .less 파일로 바꿀 수 있습니다. 기존 CSS 코드를 사용하여 LESS 코드를 작성할 수 있습니다.

~/content/ 또는 ~/Styles/ 폴더 안에 생성하는 가장 좋은 방법

20) LESS는 어떤 방법으로 사용될 수 있나요?

npm을 통해 LESS를 명령줄에서 사용할 수 있습니다.
브라우저용 스크립트 파일로 다운로드
타사 도구의 경우 사용됩니다.

21) LESS에서는 변수가 어떻게 표현되나요?

LESS를 사용하면 변수를 정의할 수 있습니다. LESS에서는 변수가 @sing으로 표현됩니다. 반면 변수 할당은 다음을 사용하여 수행됩니다. (콜론) 노래. 변수 값은 CSS 출력 파일과 축소된 파일에 삽입됩니다.

22) Mixins가 어떻게 유용한지 설명해주세요.

믹스인을 사용하면 클래스 이름을 속성 중 하나로 포함하여 클래스의 모든 속성을 다른 클래스에 포함할 수 있습니다. 변수와 비슷하지만 전체 클래스에 적용됩니다.

23) LESS.js를 실행할 때 watch 모드에서 코드를 설정하는 방법을 설명하세요. HTML5 브라우저?

HTML5 브라우저에서 LESS.js를 실행하면 로컬 저장소를 사용하여 생성된 CSS를 캐시합니다. 그러나 개발자의 관점에서는 변경 사항을 즉시 확인할 수 없습니다. 변경 사항을 즉시 확인하려면 JavaScript를 따라 개발 및 감시 모드에서 프로그램을 로드할 수 있습니다.

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) LESS 프로그래밍에서 중첩의 의미가 무엇인지 설명하세요.

LESS에 중첩하는 것은 다른 문 안에 문을 클러스터링하는 것이므로 관련 코드 그룹을 형성합니다. 즉, 코드 조각을 추가하고 그 안에 다른 코드를 추가하면 해당 코드 조각을 중첩이라고 합니다.

25) LESS에서 사용되는 컬러 채널 기능이 무엇인지 언급해 주세요.

색조
채도
hsvhue
채도
스와루에
빨간
녹색
푸른
알파
루마
휘도

26) LESS에서 data-uri가 무엇인지 설명해주세요.

CSS에서 데이터 URI는 최고의 기술 중 하나입니다. 이를 통해 개발자는 외부 이미지 참조를 피하고 대신 스타일시트에 직접 포함할 수 있습니다. 데이터 URI는 HTTP 요청을 줄이는 훌륭한 방법입니다.

27) "소스 맵 레스 인라인"이 무엇인지 설명해주세요.

"Source Map Less Inline" 옵션은 모든 CSS 파일을 소스맵에 포함해야 함을 나타냅니다. 이는 원본 소스에 도달하려면 맵 파일만 필요하다는 의미입니다.

28) LESS에서 "all" 확장의 용도가 무엇인지 설명하세요.

확장 인수의 마지막에 all 키워드를 지정하면 해당 선택기를 다른 선택기의 일부로 일치시키도록 LESS에 지시합니다.

29) LESS에서 "StrictImports"가 무엇인지 설명해주세요.

strictImports는 컴파일러가 @media 블록이나 다른 선택기 블록 내에서 @import를 허용할지 여부를 제어합니다.

30) LESS와 Sass의 차이점을 나열해 보세요.

각 스타일시트 언어는 그 관점과 사용 면에서 훌륭합니다. 그러나 사용법에는 약간의 차이가 있습니다.

적게	말대꾸
– LESS는 JavaScript를 사용하고 클라이언트 측에서 처리됩니다.	– Sass는 Ruby로 코딩되어 서버 측에서 처리됩니다.
– 변수 이름 앞에는 @symbol이 붙습니다.	– 변수 이름 앞에는 $ 기호가 붙습니다.
– LESS는 하나의 속성 집합으로 여러 선택기를 상속하지 않습니다.	– Sass는 하나의 속성 세트로 여러 선택기를 상속합니다.
– LESS는 "알 수 없는" 단위에서는 작동하지 않으며 호환되지 않는 단위 또는 수학 관련 구문 오류에 대한 구문 오류 알림도 반환하지 않습니다.	– Sass를 사용하면 "알 수 없는" 단위로 작업할 수 있으며 호환되지 않는 단위에 대한 구문 오류 알림도 반환합니다.

31) LESS와 Sass의 유사점은 무엇입니까?

LESS와 Sass 사이의 유사점은 다음과 같습니다.

네임 스페이스
색상 기능
믹스인과 파라메트릭 믹스인
중첩 기능
자바스크립트 평가

32) &combinator의 용도가 무엇인지 설명해주세요.

&combinator는 중첩된 선택자와 상위 선택자를 연결합니다. :hover 및 :focus와 같은 의사 클래스에 유용합니다.

33) LESS에서 연산의 용도가 무엇인지 설명해주세요.

작업은 다음과 같은 기능을 수행하는 데 사용될 수 있습니다.

간단한 수학 연산자: +, – , *, /
색상 기능
연산 함수
모든 크기 또는 색상 변수에 따라 작동 가능

34) 탈출의 용도가 무엇인지 설명해주세요.

LESS에서 이스케이프 사용

유효한 CSS 구문이 아닌 CSS를 출력해야 하는 경우
LESS에서 인식되지 않는 독점 구문
LESS 컴파일러를 사용하지 않으면 오류가 발생합니다.
~ 기호가 있는 간단한 접두사 및 따옴표 넣기

35) LESS 요소에는 무엇이 포함되어 있나요?

더 적은 요소에 다음과 같이 일반적으로 사용되는 믹스인이 포함됩니다.

.구배
.둥근
.불투명
.box-shadow
.내부 그림자

36) LESS에 대한 대안을 나열해 보세요.

SASS: 구문적으로 멋진 스타일시트
SCSS: SASS 버전 2
첨필

37) 명령줄에서 컴파일러를 호출하는 방법을 설명해주세요.

다음과 같이 LESS의 명령줄에서 컴파일러를 호출할 수 있습니다.

$ lessc 스타일.less

그러면 컴파일된 CSS가 다음과 같이 출력됩니다. 표준출력; 그런 다음 원하는 파일로 리디렉션할 수 있습니다.

$ lessc 스타일.less > styles.css

38) e() 함수의 용도는 무엇인가요?

e() 함수의 도움으로 값을 이스케이프하여 LESS 컴파일러에서 알아차리지 않고 컴파일된 CSS로 바로 전달할 수 있습니다.

39) LESS를 CSS로 사전 컴파일하는 방법을 설명해주세요.

LESS를 CSS로 사전 컴파일하려면 다음을 사용할 수 있습니다.

Node.js를 사용하여 less.js 실행: Node.js JavaScript 프레임워크를 사용하면 브라우저 외부에서 less.js 스크립트를 실행할 수 있습니다.
lessphp 사용: PHP로 작성된 LESS 컴파일러 구현을 위해 lessphp가 사용됩니다.
온라인 컴파일러 사용: 컴파일러를 설치하지 않고도 LESS 코드를 빠르게 컴파일하려면 온라인 컴파일러를 사용하세요.
더 적은. app(Mac 사용자용): Less.app은 Mac 사용자를 위한 무료 도구입니다. 이 도구는 해당 항목을 CSS 파일로 자동 컴파일합니다.

40) LESS에서 병합 기능이 어떻게 사용되는지 설명해주세요.

여러 속성의 값을 공백이나 단일 속성 아래의 쉼표로 구분된 목록으로 집계하려면 LESS가 사용됩니다. 변환, 배경 등의 속성에 유용합니다.

41) LESS에서 루프 구조를 어떻게 만들 수 있나요?

믹스인은 LESS에서 자신을 호출할 수 있습니다. 이러한 재귀적 믹스인을 패턴 일치 및 가드 표현식과 결합하면 다양한 반복/루프 구조를 만드는 데 사용할 수 있습니다.

42) LESS에서 파라메트릭 믹스인이 필요한 이유는 무엇입니까?

파라메트릭 믹스인은 표준 믹스인과 동일합니다. 유일한 차이점은 파라메트릭 믹스인이 JavaScript의 함수와 같은 매개변수를 취한다는 것입니다. 믹스인에 대한 매개변수를 결정한 후에는 믹스인을 더 효과적으로 제어할 수 있습니다.

단점:

공백에 민감함
인라인 규칙 없음

당신은 좋아할 것입니다 :