Lessの基本的な使い方
序章
Less は CSS 前処理言語で、CSS 言語を拡張し、変数、ミックスイン、関数などの機能を追加して、より強力で開発しやすくします。
作業過程
Less には一連のカスタム構文とパーサーが含まれています. Less コードは最初に CSS にコンパイルされるため、ブラウザーによって認識され、コンパイルされた CSS ファイルが参照されて要素にスタイルが追加されます.
知らせ
1. Less はサーバー側とブラウザ側で参照できます;
2. ブラウザ側で外部の less ファイルを参照すると、クロスドメインの問題が発生します* html で直接 less* を使用するか、ライブ サーバーを使用してローカルサービス。
3. less 内のコメント ※ // で始まるコメントは css ファイルにコンパイルされません ※ /**/ で囲まれたコメントは css ファイルにコンパイルされます
基本的な使い方
1.変数を定義する
(1) @ から始める> @color:pink ファイル内のすべてのピンクを deeppink に変更する必要がある場合は、定義を直接変更するだけです; >属性/セレクター変数/クラス名も設定できます> @m:margin: use margin から margin までのどこでも
@{m}使用; > @selector:#wrap@{selector}は #wrap から #wrap までのどこでも使用できます; > @url: path からこのパスまでのどこでも@{url}使用. > (2) $ で始まる> color : ピンク > background − color : color:pink > background-color:色または_:pインク>バックグラウンド_ _ _ _ _ _−色または_:色;
2.変数の遅延ロード
@var:0;
.class{@var:1;.brass:{@var:2; /* 编译后是3 当某一个位置需要@var这个变量的值时 他会解析一整个作用域中间的@var,再确定@var的值 */three:@var;@var:3;}// 编译后是1one:@var;
}
3. less の入れ子規則
- CSS はコードのネストをサポートしていませんが、Less はサポートしています. ネストはセレクターの親子関係を表します.
- & (make level) &の使用は、外側のレイヤーの親要素を表します
#wrap{.inner{/*直接写:hover时由于嵌套把hover当成inner的子元素去解析，hover没有效果 */&:hover{}}
}
4.ミキシングが少ない
重複するスタイルがある場合は、あらかじめスタイルを書いてクラスに入れておけば、以下に引用するときにスタイルコードのクラス名を直接書くことができます。
// (1)普通混合：
.juzhong{xxxxx
}
// 下面有需要用到重复代码时可以这样
.a{.juzhong
}
/*普通混合的样式编译之后会在css文件中出现但其实我们不想要这个编译结果，我们要的是.a的样式能够编译即可
*/
// (2)不带输出的混合:
.juzhong(){xxxxx
}
// 与上述类似,区别在于加了个括号,该部分样式不会出现在编译后的css文件里面
// (3)带参数混合:
.juzhong(@w,@h,@color){width:@w;height:@h;background-color:@color;
}
// 使用时记得传参
.a{.juzhong(100px,50px,pink);
}
// (4)带参数且有默认值的混合:
// 与上述类似，只是在调用时如果不传参就有默认参数
.juzhong(@w:10px,@h:10px;@color:pink){
}
// (5)命名参数混合:
// 当形参和实参个数不匹配时可以使用命名参数
.juzhong(@w,@h,@color){
}
.a{// 只给color赋值,若不指定@color,只传一个参数,默认会给第一个形参即width赋值.juzhong(@color:black);
}
// (6)匹配模式
.triangle(L,@w,@c){
}
.triangle(R,@w,@c){
}
// 调用时 .triangle(L,40px,pink); .triangle(R,30px,black)
// (7)还有第7种arguments变量，不过以上6种已经满足大部分的开发需求。
5. 少ないコンピューティング
足し算、引き算、掛け算、割り算は以下で実行できます > 幅: (100+100px) 計算の 2 つの辺のいずれかに単位がある限り、結果には単位があります。
6.継承が少ない
.p1{display:inline-block;color:red;}.p2:extend(.p1){font-size:12px;}
// 相当于p2继承了p1的样式,p2还有新的样式font-size:12px
7.機能
例: > 色の中間値を取る関数: average(red,yellow) > 暗い色を取る darken(#bfa,15%) #bfa より 15% 暗い色を取る
8. @import 同様に、外部の Less ファイルも導入できます。
やっと
75のJSの高頻度インタビュー質問を整理し、回答と分析を提供しました.これは、JSに関するインタビューアーの質問に基本的に対処できることを保証できます.
困っている友達は、下のカードをクリックして無料で受け取り、共有できます