Home-theater-designers
Less CSS は、近年大きな注目と人気を集めている堅牢で動的な CSS プリプロセッサです。プリプロセッサとして、全体的なスタイリング エクスペリエンスを向上させる一連の追加機能を提供することにより、Web 開発で使用される従来の CSS スタイリング言語である「Vanilla CSS」の拡張機能として機能します。
今日のMUOビデオ スクロールしてコンテンツを続けてください
標準 CSS の作成に精通している場合は、急な学習曲線を必要とせずに、Less CSS の使用にシームレスに移行できます。この互換性により、Less の高度な機能を活用しながら、既存の CSS 知識を維持することが容易になります。
関数とは何ですか?なぜ重要ですか?
プログラミングにおける関数とは、特定のタスクを実行するコードのブロックです。プログラム内の別の場所で再利用することもできます。通常、関数はデータを取り込んで処理し、結果を返します。
削除されたYouTubeビデオが何であったかを確認する方法
これらにより、プログラム内の重複コードを簡単に減らすことができます。たとえば、ユーザーが入力した価格に基づいて割引を計算するプログラムがあるとします。で JavaScriptのような言語 、次のように実装できます。
function checkDiscount(price, threshold){
if (price >= threshold){
let discount = 5/100 * price;
return `Your discount is $${discount}`;
} else {
return `Sorry, this item does not qualify for a discount. `
}
}
次に、関数を呼び出して、 価格 そしてその しきい値 。
let price = prompt("Enter the item price: ")
alert(checkDiscount(price, 500))
割引をチェックするロジックを抽象化することで、プログラムが読みやすくなっただけでなく、割引を処理して結果を返す再利用可能なコード ブロックが得られます。関数でできることは他にもたくさんありますが、これは基本的なものにすぎません。
少ない CSS で関数を理解する
従来の CSS では、開発者が使用できる機能のセットは非常に限られています。 CSS で最も人気のある関数の 1 つは、 計算() 数学関数 これは、見た目どおりの動作を行います。計算を実行し、結果を CSS のプロパティ値として使用します。
p{
background-color: red;
width: calc(13px - 4px);
}
Less CSS には、単なる算術演算以上の機能を実行する関数がいくつかあります。 Less で遭遇する可能性のある関数の 1 つは、 もしも 関数。の もしも この関数は、条件と 2 つの値という 3 つのパラメーターを受け取ります。以下のコード ブロックは、この関数の使用方法を示しています。
@width: 10px;
@height: 20px;
div{
margin:if((@width > @height), 10px, 20px)
}
上記のコード ブロックでは、Less コンパイラは変数が 幅 (によって定義されます) @ 記号) が変数より大きい 身長 。条件が true の場合、関数は条件の後の最初の値 (10px) を返します。それ以外の場合、関数は 2 番目の値 (20px) を返します。
コンパイル後の CSS 出力は次のようになります。
div {
margin: 20px;
}
Less でブール値を使用する方法
ブール値は、次の 2 つの可能な値を持つ変数です。 真実 また 間違い 。とともに ブール値() Less の関数を使用すると、式の true または false の値を変数に保存して、後で使用することができます。仕組みは次のとおりです。
@text-color: red;
@bg-color: boolean(@text-color = red);
上記のコード ブロックでは、Less コンパイラは次のことをチェックします。 テキストの色 赤い。そうして 背景色 変数には値が格納されます。
div{
background-color: if(@bg-color,green,yellow);
}
上記のコード ブロックは次のようにコンパイルされます。
div {
background-color: green;
}
replace() 関数を使用して文字列内のテキストを置換する
の構文は、 交換（） 関数は次のようになります。
replace(string, pattern, replacement, flags)
弦 は検索および置換する文字列を表します。 パターン は検索する文字列です。 パターン 正規表現も使用できますが、通常は文字列です。一致が成功すると、Less CSS コンパイラーがそれを置き換えます。 パターン とともに 置換 。
オプションで、 交換（） 関数には以下を含めることもできます フラグ 正規表現フラグのパラメータ。
インターネットに接続せずにwifiを取得する方法
@string: "Hello";
@pattern: "ello";
@replacement: "i";
div::before{
content: replace(@string,@pattern,@replacement)
}
上記のコード ブロックは、コンパイル後に次のようになります。
div::before {
content: "Hi";
}
少ない CSS で関数をリストする
Less CSS では、カンマまたはスペースを使用して値のリストを定義します。例えば：
@groceries: "bread", "banana", "potato", "milk";
使用できます 長さ（） リスト内の要素の数を評価する関数。
@result: length(@groceries);
を使用することもできます。 エキス（） 特定の位置の値を抽出する関数。たとえば、次の 3 番目の要素を取得したい場合、 食料品 リストを作成するには、次の操作を行います。
@third-element: extract(@groceries, 3);
リストのインデックスが 0 から始まる通常のプログラミング言語とは異なり、Less CSS のリストの開始インデックスは常に 1 です。
Less を使用して Web サイトを構築するときに便利なもう 1 つのリスト関数は、 範囲（） 関数。 3 つのパラメータを受け取ります。最初のパラメータは範囲内の開始位置を指定します。 2 番目のパラメータは終了位置を示し、最後のパラメータは範囲内の各項目間の増分値または減分値を指定します。指定しない場合、デフォルト値は 1 です。
div {
margin: range(10px, 40px, 10);
}
上記のコード ブロックは次のようにコンパイルされます。
div {
margin: 10px 20px 30px 40px;
}
ご覧のとおり、Less CSS コンパイラーは 10px から開始し、終了位置 (40px) に達するまで前の値を 10 ずつ増やします。
CSS機能を減らしてシンプルなWebサイトを構築する
学んだすべてをまとめて、CSS を減らしたシンプルなプロジェクトを作成します。フォルダーを作成して追加する インデックス.htm と スタイルレス ファイル。
を開きます インデックス.htm ファイルを開き、次の HTML コードを追加します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet/less" type="text/css" href="style.less" />
<title>Document</title>
</head>
<body>
<div class="container">
<h1>
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/less" ></script>
</body>
</html>
上記のコード ブロックには親があります。 '容器' ディビジョン 空の状態で h1 エレメント。の 送信元 の属性 脚本 タグは、Less CSS コンパイラーへのパスを指します。
これがなければ 脚本 タグを使用すると、ブラウザはコードを理解できなくなります。あるいは、次の方法で Less CSS をコンピュータにインストールすることもできます。 ノード パッケージ マネージャー (NPM) 、ターミナルで次のコマンドを実行します。
npm install -g less
コンパイルする準備ができたらいつでも、 。以下 ファイルの場合は、以下のコマンドを実行するだけです。コンパイラーが出力を書き込むファイルを必ず指定してください。
lessc style.less style.css
の中に スタイルレス ファイルで、次の 2 つの変数を作成します。 コンテナ幅 と コンテナの背景の色 の幅と背景色を表す '容器' ディビジョン それぞれ。
不和のグループを見つける方法
@container-width: 50rem;
@container-bg-color: yellow;
次に、次の 3 つの変数を作成します。 弦 、 パターン、 と 置換 。次に、スタイルを追加します。 '容器' ディビジョン そしてその h1 エレメント。
@string: "Hello from the children of planet Earth!";
@pattern: "children of planet Earth!";
@replacement: "inhabitants of Pluto!";
.container{
width: @container-width;
background-color: @container-bg-color;
padding: if(@container-width > 30rem, range(20px, 80px, 20),"");
border: solid;
}
h1:first-child::after{
content: replace(@string,@pattern,@replacement);
}
上記のコード ブロックでは、 範囲（） 関数は、 パディング のプロパティ '容器' ディビジョン 。 Less コンパイラは以下をコンパイルする必要があります。 スタイルレス ファイルを次のようにします。
.container {
width: 50rem;
background-color: yellow;
padding: 20px 40px 60px 80px;
border: solid;
}
h1:first-child::after {
content: "Hello from the inhabitants of Pluto!";
}
開くと、 インデックス.htm ブラウザーでこのファイルを開くと、次のように表示されます。
CSS プリプロセッサで生産性を向上
通常のプログラミング言語では、関数を使用すると、作成する必要があるコードの量が減り、エラーが最小限に抑えられます。 Less のような CSS プリプロセッサは、CSS コードの作成を容易にするいくつかの機能を提供します。
CSS プリプロセッサは、大きなファイルを扱う場合に便利です。これらにより問題のデバッグが容易になり、開発者の生産性が向上します。