あまり一般的ではない基礎知識_html/css_WEB-ITnose

LESS でのコメント
CSS でコメント (/**/) を使用することもできます。このメソッドはコンパイルできます。
コンパイルされない // コメントも使用できます
変数 変数を宣言する場合は、@ で始める必要があります。 例: @Variable name: value;
@test_width:300px;
;
background-color: yellow;
}

Mix-(Mixin)

mixin変数 ettidieÃ¢ï¿ _width; .border-radius(@radius ; }
mix-defaultバンド値
.border_width:10px){
border:solid green @border_width;
}
.test_hunhe_03{
.border_03();
}
.test_hunhe_04{
.border_04(20px);
}
混合例 .radius_test{
width:100px ;
height:40px;
background-color: green;
.border_radius();
}

マッチングパターン

.sanjiao{
幅:0;
Height:0;
overflow:hidden;
border-width:10px;
border-color:transparent 透明 赤 透明;
border-style:dashed 破線 実線 破線;
}

.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-colo:transparent 透明 @c transparent
border-style:dashed 破線 実線 破線;
}
。三角(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-colo:@c 透明透明透明
border-style:solid 破線 破線 破線;
}
.triangle( left,@w:5px,@c:#ccc){
border-width:@w;
border-colo: 透明 @c 透明透明
border-style: 破線実線 破線破線;
}
.triangle(right, @w:5px,@c:#ccc){
border-width:@w;
border-colo: 透明 透明 透明 @c;
border-style: 破線 破線 破線 実線;
}
.traangle(@_, @w:5px,@c:#ccc){ //@_ 何を時候都带着的。 .trangle(上、 100px);
}
// 匹配模式 - 定位
.pos(r){
position:relative;
}
.pos(a){
position:absolute;
}
.pos(f){
位置: fix;
}

运算

@test_01:300px;
.box_02{
width:@test_01 +20;
} .box_02{ width:@test_01 -20;
}
.box_02{
幅:( @test_01 20)*5;
color:#ccc -10;
}

嵌套：

.list{
width:600px;
margin30px auto;
padding:0; list-style:none; li {
height:30px;
line-height:30px;
background-color:pink;
margin-bottom:5px;
}
a{
flo at:left;
&hover{
color:red; //& 他の上一層選択器を表します。
}
}
}

@arguments 变量

@arguments にはすべての転送パラメータが含まれています。 order_arg(@w:30px,@c:red, @xx:solid){
.border:@arguments;
}
回避编译
.test_03{
width:~'calc(300px -30)';
}

!importan关键字
.test_ important {
.border_radius() !重要;
}