LESS での操作の用途は何ですか?

LESS (Less-Based Style Sheets) は、CSS (Cascading Style Sheets) を追加機能で拡張する動的スタイルシート言語です。 CSS 値に対して数学的計算を実行するためのさまざまな操作が提供されるため、開発者はより柔軟で動的なスタイルを作成できます。

このチュートリアルでは、これらの操作を LESS で実行し、さまざまな画面サイズやデバイスに適応するスタイルを作成する方法を説明します。

LESS でのさまざまな操作

以下は、LESS -

で使用できるいくつかの操作です。

加算 ( ) と減算 (-)−これらの演算を使用すると、値を相互に加算または減算できます。

乗算 (*) と除算 (/)−これらの演算により、値を乗算または除算することができます。

Calc() 例外

CSS の calc() 関数を使用すると、CSS で使用できる値に対して数学的演算を実行できます。この関数を使用すると、他の値に基づいて要素の幅または高さを計算でき、レスポンシブ デザインで非常に役立ちます。

注意すべき重要な点は、calc() はデフォルトでは数式を評価しないことです。一部のブラウザでは特定の数学関数をサポートしていない可能性があるため、これは CSS 互換性の理由から行われます。ただし、calc() は入れ子関数内の変数と計算を計算するため、ユーザーはより複雑な計算を実行できます。

たとえば、変数 @width があるとします。この変数を calc() 関数で使用すると、次のように要素の幅を計算できます。 リーリー

結果の値は calc(50% (50vh - 20px)) です。

＃＃＃例＃＃＃

この例では、@base-size 変数を定義し、加算演算と減算演算を使用して 2 つの新しい変数 @large-size と @small-size を作成します。 @large-size 変数は基本サイズに 4 ピクセルを追加し、@small-size 変数は基本サイズから 2 ピクセルを減算します。次に、これらの変数を使用して、h1 要素と p 要素のフォント サイズを設定します。

リーリー ＃＃＃出力＃＃＃ リーリー ＃＃＃例＃＃＃

この例では、変数を使用してレイアウトの基本幅と列数を設定します。次に、基本幅を列数で割って各列の幅を計算します。最後に、メディア クエリでは、半角列の幅を乗算によって計算された列幅の 6 倍に設定します。

リーリー ＃＃＃出力＃＃＃ リーリー ＃＃＃例＃＃＃

この例では、最初に数学設定を Always に変更し、次にタイトルとナビゲーション要素の高さの変数を定義します。 calc() 関数を使用して、以前に定義した変数を使用してメイン要素の高さを計算します。

次に、計算設定をデフォルト値にリセットし、ボックスの幅とそのパディングの新しい変数を定義します。数学演算を使用してボックスの幅を計算し、それに応じて幅を設定します。

[数学] 設定を [常に] に変更すると、複雑な数学演算を最も単純な形に縮小することなく実行できるため、スタイルをより詳細に制御できるようになります。

リーリー ＃＃＃出力＃＃＃ リーリー ＃＃＃例＃＃＃

この例では、2 つの色 (@color-1 と @color-2) を定義し、LESS を使用してそれらに対して異なる算術演算を実行します。 2 つの色を加算し、最初の色から 2 番目の色を減算し、最初の色に 50% を乗算して、各色の 50% のウェイトで 2 つの色をブレンドします。

ユーザーは、各操作によって CSS プロパティの値として使用できる新しい色が生成されることを出力で確認できます。

リーリー ＃＃＃出力＃＃＃ リーリー ＃＃＃結論は＃＃＃

ユーザーは、加算、減算、乗算、除算など、LESS でさまざまな算術演算を使用する方法を学習しました。また、calc() 関数を使用して複雑な数学的計算を実行する方法も学びました。

値の算術演算に加えて、ユーザーは色の算術演算についても学習します。これには、RGB、HEX、HSL 値などのカラー値の加算または減算が含まれます。

以上がLESS での操作の用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。