1.より少ないプリプロセッサ
Less（LeanerStyle Sheetsの略）はCSS拡張言語であり、CSSプリプロセッサにもなっています。
1.プラグインのインストール
Easy Lessプラグインをインストールして、書き込まれた.lessファイルが保存されるときに.cssファイルが自動的に生成されるようにします
2.使用法
1. .lessの構文は、CSS構文と完全に互換性があります。
2. HTMLをインポートする場合、CSSファイルをインポートする必要があります。
3. lessがcssファイルとして自動的に生成された後、lessファイルのコンパイルは時々行われるため、生成されたcssファイルを直接変更することはできません。更新して保存した後、変更されたcssファイルは存在しません。
3.ネストが少ない
1.lessネストはHTMLの構造に対応します。
//less
.father {
.son {
.sun {
font-size: 20px;
}
}
.borther {
color: #09f;
}
}
//less自动生成的css
.father .son .sun {
font-size: 20px;
}
.father .borther {
color: #09f;
}
//html
<div class="father">
父亲
<div class="son">
儿子
<div class="sun">孙子</div>
</div>
<div class="borther">
兄弟
</div>
2.＆は、親要素自体をlessで表します。
3.親要素の内部選択にアンパサンドがない場合はその子孫であり、アンパサンドがある場合はアンパサンド自体が親要素です。
// less中的嵌套与HTML结构一致
.father {
// 子代
>.son {
font-size: 50px;
//伪元素
&::before {
content: "哈哈";
}
.sun {
color: green;
font-size: 16px;
// 鼠标经过
// &代表的是less中的上一级元素
&:hover {
color: #09f;
}
}
}
}
// 交集
// &代表的是less中的上一级元素
div {
&.borther {
background-color: #f34;
}
}
4.less変数
@defineを使用して、使用したい人に電話をかけます。
//定义变量
@color_f34: #f34;
@color_09f: #09f;
@font20: 20px;
@width: 100px;
.father {
width: @width;
.son {
color: @color_f34;
.sun {
color: @color_09f;
}
}
.borther {
font-size: @font20;
}
}
1.変数を定義すると、実際には変数名に値が格納されます。
2.実際に変数を呼び出すと、変数に格納されている値が使用されます。
3.変数に格納できる値は1つだけです。
4.変数名は名前で理解する必要があり、特殊文字を含めることはできず、数字で始めることはできません。
5.少ない操作
//定义变量
@color_f34: #f34;
@color_09f: #09f;
@font20: 20px;
@width: 100px;
.father {
width: @width - 50;
// 运算符前后要用空格隔开，先乘除后加减
height: 100px + 200px - 100px * 2 / 4;
.son {
color: @color_f34;
.sun {
color: @color_09f;
border: 1px + 2 solid #222;
}
}
.borther {
font-size: @font20 + 5;
}
}
6.インポートするファイルを減らす
lessファイルに別のlessファイルをインポートします。
構文：
@import "文件名.less";
注：@impotの後にスペースを入れ、文の最後にセミコロンを付ける必要があります〜
7.少ないクラスの混合
// 混合变量
// 无默认值
.square(@h; @w; @f) {
width: @w;
height: @h;
font-size: @f;
}
.color(@bg; @fc) {
background-color: @bg;
color: @fc;
}
// 有默认值
.square_2(@h: 200px; @w: 200px; @f: 18px) {
width: @w;
height: @h;
font-size: @f;
}
.color_2(@bg: #90f; @fc: #fff) {
background-color: @bg;
color: @fc;
}
//有默认值2
// 高默认是300，宽默认等于高
.square_3(@h: 300; @w: @h; ) {
width: @w;
height: @h;
}
// 调用无默认值的混合变量必须要传入值
.box1 {
.color(#f34, #666);
.square(100px, 100px, 14px);
}
.box2 {
.color(#09f, #ccc);
.square(100px, 100px, 20px);
}
.box3 {
// 调用有默认值得混合变量时，可以不传入值,调用的就是默认值
.square_2();
.color_2();
}
.box4 {
// 调用有默认 值得混合变量后，重新给他赋值，会覆盖掉默认值
.color_2(#666, #fff);
// 有默认值时，可以不全部赋值，没有赋值的就是默认值
.square_2(250px, 250px);
}
.box4 {
.square_3();
}
一般的な機能をカプセル化するために少ないを使用
// 清除浮动
.clearfix() {
&::after {
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
}
// 定位居中
.center() {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
// flex居中
.center_f() {
display: flex;
justify-content: center;
align-items: center;
}
/*单行溢出*/
.one-txt-cut() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行溢出*/
.txt-cut(@l) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @l;
-webkit-box-orient: vertical;
}