less を使用して css_html/css_WEB-ITnose を開発する

最近、CSS コードを効率的に書く方法について友達と話し合ったので、CSS 前処理言語を使用することを思いつきました。たとえば、(少ない、sass など)。最終的には、使用する言語を減らすことにしました (他の CSS 前処理言語と比較して、より単純で構文が CSS に近いため)。

まず、less とは何かについて話しましょう

簡単に言えば、CSS ファイル内で変数、関数などを使用して CSS を記述することができます。

less にはどのような機能がありますか?

Mixins??クラス内のクラス;

パラメータ mixin??関数と同じようにパラメータを渡すことができるクラス;

ネストルール??クラスはクラス内でネストされているため、重複したコードが削減されます。 操作

??CSSで使用される数学;

Color関数

??色を編集できます。スタイルの

JavaScript の割り当て

??CSS で JavaScript 式の割り当てを使用します。

プロジェクトでlessを使用するにはどうすればよいですか?

1. まず、less.jsをダウンロードします。 2.less ファイル (index.less など) を作成します。 3. 上記の 2 つのファイルを

<strong>rel="stylesheet/less" type="text/css" href="css/index.less"/></strong><strong></strong>

ここで注意すべき点が 2 つあります。1 つ目は、リンク タグの rel 属性は 'stylesheet/less' である必要があり、2 つ目は、less.js である必要があります。インデックスの後に導入されます。

これで、正式に体験できる機会が減りました。 ❤️
HTMLに複数のクラスを追加する必要はなく、cssで行うだけです

.box2{.wrap}

3. パラメータの混合

jsの関数と同じようにパラメータを渡すことができ、CSSを繰り返し記述する必要はありません

1 。たとえば、CSS3 の角丸効果が必要な場合は、まずクラスを定義し、角丸値をパラメータとして渡し、デフォルト値 5px を設定します: .border(@a:5px){-webkit-border- radius:@a;-moz -border-radius:@a;border-radius:@a;}

2. 使用: .box3{.border(20px)}

4. セレクターの継承

これは良い気がします関数はミキシングに似ていますが、それほど多くはありません

5. 操作

これはより実用的で、数値または変数を使用して操作を実行します

@base_margin: 10px;

@double_margin: @base_margin * 2;

使用: .box5{.border(10px);border: @base_width / 2 Solid #ccc}

6.color 関数

lighten 関数: パーセントで色を明るくします。less は、他の暗くしたり、色の彩度を調整したりする関数も提供します

lighten( @gray、10%)、実際には @gray の色のうち 90% のみが表示されます

他の機能については 1 つずつ紹介しません。さらに詳しく知りたい場合は、オンラインで詳細を検索してください。

less の主な利点は次の 3 つです:

カラー スタイルが均一に定義される

使用されるすべてのカラー距離がファイル内の変数の形式で均一に定義され、直接使用されるカラーと距離をファイル内に表示することはできません。他のコードのピクセル値は定義された変数を使用する必要があります

一部の CSS ルールの組み合わせはミックスインとして定義され、他の要素内で使用されます

可読性、再利用性が向上し、メンテナンスの困難さが軽減されます

HTML/CSS セマンティック/スタイルの分離

カスケード構造ミックスインの利点名前空間を使用すると、HTML のセマンティクスが完全に実現されます。

開発効率が向上します。

レイヤーに制限されることなく、CSS を手書きできます。複雑なセレクター構造のレイヤーを考慮する必要はありません。コード セグメントの繰り返しとさまざまな関数型プログラミングのヒントにより、CSS の柔軟性が大幅に向上します。また、複数人による開発とプロジェクトの間でコードを再利用できます。非常にシンプルです

著作権表示: この記事はブログです これはオリジナルの記事であり、ブロガーの許可なく複製することはできません。