SASS 面接の質問と回答トップ 40 (2025)

ここでは、新人だけでなく経験豊富な候補者も夢の仕事に就くための、SASS および SCSS の面接の質問と回答を紹介します。

1) Sass とは何ですか? どのように使用できますか?

Sass は Syntactical Awesome Stylesheets の略で、Hampton Catlin によって作成されました。これは CSS3 の拡張機能であり、ネストされたルール、ミックスイン、変数、セレクターの継承などが追加されています。

Sass は XNUMX つの方法で使用できます

コマンドラインツールとして
スタンドアロンの Ruby モジュールとして
ラック対応フレームワークのプラグインとして

無料 PDF ダウンロード: SASS インタビューの質問と回答

2) Sass の主な機能を列挙しますか?

Sass の主な機能は次のとおりです。

CSS3完全互換
ネスト、変数、ミックスインなどの言語拡張機能
色やその他の値を操作するための多くの便利な関数
ライブラリの制御ディレクティブなどの高度な機能
適切にフォーマットされたカスタマイズ可能な出力

3) SassScript がサポートするデータ型を列挙しますか?

SassScript は XNUMX つの主要なデータ型をサポートしています

数字 (例; 1,5、10、XNUMXpx)
テキストの文字列 (例、「foo」、「bar」など)
色 (青、#04a3f9)
ブール値 (true または false)
Null (例: null)
スペースまたはカンマで区切られた値のリスト (例、1.5em、Arial、Helvetica など)
ある値から別の値へのマッピング (例、( キー 1: 値 1、キー 2: 値 2))

4) Sass で変数を定義する方法を説明しますか?

Sass の変数は ($) 記号で始まり、変数の割り当てはコロン (:) で行われます。

5) Sass と SCSS の違いを説明してください。

Sass と SCSS の違いは次のとおりです。

サスは、 CSS 構文の進歩と CSS3 の拡張を備えたプリプロセッサ
Sass には XNUMX つの構文があります
最初の構文は「SCSS」で、.scss 拡張子が使用されます。
もう XNUMX つの構文は、インデントされた構文または単に「Sass」であり、.sass 拡張子が使用されます。
Sass の構文は空白でセミコロンがありませんが、SCSS は CSS に似ています。

拡張子を .CSS から .SCSS に変更するだけで、CSS が有効なドキュメントを Sass に変換できます。

6) Sass のセレクターのネストは何に使用されますか?

Sass では、セレクターのネストは、スタイルシート作成者が短いセレクターを相互にネストすることで長いセレクターを計算する方法を提供します。

7) Sass で @extend 関数が何に使用されるのか説明してください。

Sass では、@EXTEND ディレクティブは、セレクターが別のセレクターのスタイルを継承できるようにする簡単な方法を提供します。これは、セレクター A がセレクター B のスタイルを拡張する方法を提供することを目的としています。これを行うと、セレクター A がセレクター B に追加されるため、両者は同じ宣言を共有します。 @EXTEND は、同じスタイルを共有するセレクターを XNUMX つのルールにグループ化することで、コードの肥大化を防ぎます。

8) Sass の @IMPORT 関数の用途を説明してください。

Sass の @IMPORT 関数

SCSS および Sass ファイルのインポートを有効にして CSS インポートルールを拡張します。
インポートされたすべてのファイルは、単一の出力 CSS ファイルにマージされます。
あらゆるファイルを仮想的に組み合わせて一致させることができ、すべてのスタイルを確実に把握できます
@IMPORT はインポートするファイル名を受け取ります

9) Sass が LESS よりも優れていると考えられるのはなぜですか?

Saas を使用すると、再利用可能なメソッドを記述し、ロジックステートメント (ループ、条件文など) を使用できます。
Saas ユーザーは Compass ライブラリにアクセスし、動的なスプライトマップの生成、レガシーブラウザハック、CSS3 機能のクロスブラウザサポートなどの素晴らしい機能を使用できます。
Compass では、Blueprint、Foundation などの外部フレームワークを追加することもできます。ブートストラップ上に
LESS では、「ガードされたミックスイン」を使用して基本的なロジックステートメントを作成できます。これは Sass if ステートメントと同等です。
LESS では、再帰関数を使用して数値をループできますが、Sass ではあらゆる種類のデータを反復できます。
Sass では、独自の便利な関数を作成できます

10) Sass の Mixin 機能の用途を説明してください。ミックスインを DRY する意味は何ですか?

Mixin を使用すると、.float-left などの非セマンティッククラスに頼ることなく、スタイルシート全体で再利用できるスタイルを定義できます。

ミキシングを DRY するということは、ミキシングを動的部分と静的部分に分割することを意味します。動的ミックスインはユーザーが実際に呼び出すもので、静的ミックスインは複製される情報です。

11) Sass Maps とは何か、また Sass Maps の用途について説明してください。

Sass マップは、単なる変数の束ではなく、階層的な構造化データです。コードを整理するのに役立ちます。 Sass の優れた使い方としては、次のようなものがあります。

プロジェクト内の要素のレイヤーを扱う場合に非常に便利です。
さまざまな色や色合いの長いリストがある場合、カラー管理に役立ちます。
さまざまなソーシャルメディアアイコンのアイコンマップを使用します。例: facebook: '\e607' または twitter: '\e602'
他のプログラミングライブラリとは異なり、Sass マップは使用されるコードのみで構成されます。

12) Sass コメントが通常の CSS とどのように違うのか説明してください。

通常の CSS のコメントの構文は /* comments…*/ で始まりますが、SASS には XNUMX 種類のコメントがあります。XNUMX 行のコメント // と /* */ を含む複数行の CSS コメントです。

13) Sass はインラインコメントをサポートしていますか?

単一行のコメント // は .scss プリプロセッサによって削除され、.css ファイルには表示されません

コメント */ は有効な CSS であり、.scss から .css ファイルへの変換の間も保持されます。

14) Sass では補間がどのように使用されますか?

Sass では、変数に要素を定義し、それを Sass コード内で補間できます。モジュールを別のファイルに保存する場合に便利です。

15) Sass で %placeholders をいつ使用できるか説明してください。

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 として表されます。一方、変数の代入は: (コロン) sing で行われます。変数の値は、圧縮されたファイルだけでなく CSS 出力ファイルにも挿入されます。

22) Mixins がどのように役立つかを説明してください。

ミックスインを使用すると、クラス名をプロパティの XNUMX つとして含めることで、クラスのすべてのプロパティを別のクラスに埋め込むことができます。これは変数と似ていますが、クラス全体が対象です。

23) LESS.js を実行するときにウォッチモードでコードを設定する方法を説明します。 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 は最良のテクニックの XNUMX つであり、これにより開発者は外部画像の参照を回避し、代わりにスタイルシートに直接埋め込むことができます。データ URI は HTTP リクエストを削減する優れた方法です

27) 「ソースマップレスインライン」とは何ですか?

「Source Map Less Inline」オプションは、すべての CSS ファイルをソースマップに含める必要があることを示します。つまり、元のソースにアクセスするためにのみマップファイルが必要になります。

28) LESS での Extend "all" の用途を説明してください。

extend 引数ですべてのキーワードを最後に指定すると、そのセレクターを別のセレクターの一部として照合するように LESS に指示します。

29) LESS の「StrictImports」とは何ですか?

strictImports は、コンパイラーが @media ブロックまたは他のセレクターブロック内で @import を許可するかどうかを制御します。

30) LESS と Sass の違いを列挙してください。

各スタイルシート言語は、その観点と使用法において優れています。ただし、使用方法にはほとんど違いがありません。

もっと少なく	サス
– LESS は JavaScript を使用し、クライアント側で処理されます	– Sass は Ruby でコーディングされているため、サーバー側で処理されます
– 変数名の先頭には @ 記号が付きます	– 変数名は $ 記号で始まります
– LESS は、XNUMX セットのプロパティを持つ複数のセレクターを継承しません。	– Sass は XNUMX セットのプロパティを持つ複数のセレクターを継承します
– LESS は「不明な」単位では機能せず、互換性のない単位や数学関連の構文エラーに関する構文エラー通知も返しません。	– Sass では「不明な」ユニットを扱うことができ、互換性のないユニットについては構文エラー通知も返されます

31) LESS と Sass の類似点は何ですか?

LESS と Sass の類似点は次のとおりです。

名前空間
色の関数
ミックスインとパラメトリックミックスイン
ネスト機能
JavaScriptの評価

32) &combinator の用途を説明してください。

&combinator は、ネストされたセレクターを親セレクターと連結します。 :hover や :focus などの疑似クラスに便利です。

33) LESS での演算の用途を説明してください。

オペレーションは次のような機能を実行するために使用できます。

単純な数学演算子: +、–、*、/
色の関数
波形演算
任意のサイズまたは色の変数を操作できます

34) エスケープの用途を説明してください。

LESS でのエスケープの使用

有効な CSS 構文ではない CSS を出力する必要がある場合
独自の構文が LESS で認識されない
LESS コンパイラは使用しないとエラーをスローします
~ 記号を接頭辞として引用符で囲む単純な形式

35) LESS 要素には何が含まれますか?

以下のような一般的に使用されるミックスインが含まれる要素が少なくなります。

。勾配
.丸められた
.不透明度
.box-shadow
.inner-shadow

36) LESS に対する代替案をリストアップしますか?

SASS: 構文的に素晴らしいスタイルシート
SCSS: SASS のバージョン 2
スタイラス

37) コマンドラインからコンパイラを呼び出す方法を説明してください。

LESS のコマンドラインからコンパイラを呼び出すことができます。

$lesscstyles.less

これにより、コンパイルされた CSS が出力されます 標準出力; その後、選択したファイルにリダイレクトできます

$lesscstyles.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 ユーザー向けの無料ツールです。このツールは Mac ユーザーを CSS ファイルに自動コンパイルします。

40) LESS でマージ関数がどのように使用されるかを説明してください。

複数のプロパティの値を単一のプロパティの下のスペースまたはカンマ区切りのリストに集約するには、LESS が使用されます。変換や背景などのプロパティに便利です。

41) LESS でループ構造を作成するにはどうすればよいですか?

mixin は LESS で自分自身を呼び出すことができます。このような再帰的ミックスインをパターンマッチングやガード式と組み合わせると、さまざまな反復/ループ構造を作成するために使用できます。

42) LESS ではなぜパラメトリックミックスインが必要なのでしょうか?

パラメトリックミックスインは標準のミックスインと同じです。唯一の違いは、パラメトリックミックスインが JavaScript の関数と同様にパラメーターを取ることです。ミックスインのパラメーターを決定すると、ミックスインをより詳細に制御できるようになります。