少ない CSS で関数を使用する方法

関数を使用すると、プログラミング エクスペリエンスが大幅に簡素化されます。これは、CSS コードを作成する場合にも当てはまります。

Less CSS は、近年大きな注目と人気を集めている堅牢で動的な CSS プリプロセッサです。 プリプロセッサとして、全体的なスタイリング エクスペリエンスを向上させる一連の追加機能を提供することにより、Web 開発で使用される従来の CSS スタイリング言語である「Vanilla CSS」の拡張機能として機能します。

標準 CSS の作成に精通している場合は、急な学習曲線を必要とせずに、Less CSS の使用にシームレスに移行できます。 この互換性により、Less の高度な機能を活用しながら、既存の CSS 知識を維持することが容易になります。

プログラミングにおける関数とは、特定のタスクを実行するコードのブロックです。 プログラム内の別の場所で再利用することもできます。 通常、関数はデータを取り込んで処理し、結果を返します。

これらにより、プログラム内の重複コードを簡単に減らすことができます。 たとえば、ユーザーが入力した価格に基づいて割引を計算するプログラムがあるとします。 JavaScript のような言語では、次のように実装できます。

次に、関数を呼び出して、価格そしてそのしきい値。

割引をチェックするロジックを抽象化することで、プログラムが読みやすくなっただけでなく、割引を処理して結果を返す再利用可能なコード ブロックが得られます。 関数でできることは他にもたくさんありますが、これは基本的なものにすぎません。

従来の CSS では、開発者が使用できる機能のセットは非常に限られています。 CSS で最も人気のある関数の 1 つは calc() です。見た目どおりの処理を行う数学関数。計算を実行し、その結果を CSS のプロパティ値として使用します。

Less CSS には、単なる算術演算以上の機能を実行する関数がいくつかあります。 Less で遭遇する可能性のある関数の 1 つは、もし関数。 のもしこの関数は、条件と 2 つの値という 3 つのパラメーターを受け取ります。 以下のコード ブロックは、この関数の使用方法を示しています。

上記のコード ブロックでは、Less コンパイラは変数が幅(によって定義されます)@記号) が変数より大きい身長 。 条件が true の場合、関数は条件の後の最初の値 (10px) を返します。 それ以外の場合、関数は 2 番目の値 (20px) を返します。

コンパイル後の CSS 出力は次のようになります。

ブール値は、次の 2 つの可能な値を持つ変数です。真実または間違い 。 とともにブール値() Less の関数を使用すると、式の true または false の値を変数に保存して、後で使用することができます。 仕組みは次のとおりです。

上記のコード ブロックでは、Less コンパイラは次のことをチェックします。テキストの色赤い。 そうして背景色変数には値が格納されます。

上記のコード ブロックは次のようにコンパイルされます。

の構文は、交換する（）関数は次のようになります。

弦は検索および置換する文字列を表します。パターンは検索する文字列です。パターン正規表現も使用できますが、通常は文字列です。 一致が成功すると、Less CSS コンパイラーがそれを置き換えます。パターンとともに交換。

オプションで、交換する（）関数には以下を含めることもできますフラグ正規表現フラグのパラメータ。

上記のコード ブロックは、コンパイル後に次のようになります。

Less CSS では、カンマまたはスペースを使用して値のリストを定義します。 例えば：

使用できます長さ（）リスト内の要素の数を評価する関数。

を使用することもできます。抽出する（）特定の位置の値を抽出する関数。 たとえば、次の 3 番目の要素を取得したい場合、