@charset "utf-8";
body{
// background: red;
//如果没有样式 会以波浪线 提醒不要为空 且也不会编译出 css
}
//设置变量
@test_width:300px;
.box{
width: @test_width;
height: @test_width;
background: yellow;
.border;
}
//混合
.border{
border: solid 5px pink;
}
.box2{
.box;
margin-left:100px;
}
//混合 - 可带参数
.border_02(@border_width){
border:solid yellow @border_width;
}
.test_hunhe{
.border_02(30px);
}
//混合 - 默认带值
.border_03(@border_width:10px){
border: solid green @border_width;
}
.test_hunhe_03{
.border_03();
}
.test_hunhe_04{
.border_03(50px);
}
//匹配模式
.triangle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
//进一步优化
.triangle(@_,@w:50px,@c:#ccc){
width: 0;
height: 0;
overflow: hidden;
//@_ 表示为:无论选择上面的那一项,都要带上这一项,
//这样就剩下了width: 0;height: 0;overflow: hidden;代码
}
.sanjiao{
// width: 0;
// height: 0;
// overflow: hidden;
.triangle(right);//此时省略了 边框的宽度 匹配模式中是 5px 但是在进一步优化中的边框是 50px
//此时 .sanjiao 的边框到底是多少呢? 答案是: 5px 说明优化的代码只是站位,并不能起到改变样式的作用
//要想改变样式 还是需要 在.sanjiao 里面编辑具体样式 .triangle(right,100px);
}
//匹配模式 - 定位
//匹配模式在实际网页工作中用处还是不少的 比如 定位,边框,内外边距等等
.position(r){position: relative}
.position(a){position: absolute}
.position(f){position: fixed}
.sanjiao {
.triangle(top,100px);
.position(f);
top: 50%;
left: 50%;
}
//算法
@test_01:300px;
.box2{
// width: @test_01 + 20; //300+20=320px
// width: @test_01 - 20 * 5; //300-100=200px
// width: (@test_01 - 20) * 5; //(300-20)*5=1400px
//注:width 后面两个数值(一个是变量,一个是具体数值),
//其中有一个带有单位(px等),就可以被正常编辑,提醒大家最好是写完整 不要像我这么懒
// width: @test_01 - 20px * 5; //300px - 100px - 200px
width: @test_01 - 20px * 5px; //300px - 100px - 200px
color:#ccc - 10; //color:#c2c2c2;
//注:颜色也是可以使用算法,但是不建议使用,还是写好具体样式比较好,数学不是很好的就不好嘚瑟了。
}
//嵌套
/*html结构
<ul>
<li>
<a></a>
<span><span>
</li>
</ul>*/
ul{
li{
}
&:hover{
//&表示上一层选择器 此处是 ul
}
a{
//注:虽然a标签在li里面,但是为了节省浏览器加载,在这种情况下可以使a和li为兄弟关系。
&:hover{
//&表示上一层选择器 此处是 a
}
}
span{
}
li:nth-child(2){
color:blue;
//less里面也是支持 nth-child
}
}
//arguments
.border_arg(@w:30px,@c:yellow,@xx:solid){
border: @arguments;
}
.test_arguments{
width: 50px;
height: 50px;
background: black;
// .border_arg(10px); 只修改第一项时,可以省略@c,@xx
// .border_arg(50px,blue); //如果修改第二项,第一项不可以为空.border_arg(blue);编译成css为 border: blue red solid;
.border_arg();//不修改全部默认
}
//避免编译
.test_03{
background-color: #000000;
height: calc(300px - 30px);//编译后的css width: calc(270px); 直接计算结果
// width:~‘calc(300px - 30px);‘//编译后的css height: calc(300px-30); 使用 ~ 就不会计算结果
//注:
//width:~‘calc(300px-30px);‘浏览器不识别 原因是 "减号"运算 没有被识别 所以需要空格隔开
//width:~‘calc(300px - 30px);‘浏览器识别
width:~‘calc(300px - 30px);‘
}
//important 样式等级最高 适用于“调试”时 不建议多用
@back-color:red;//定义一个全局变量颜色
.one{
@width:50px;//定义一个局部尺寸 在其他样式中不可调用
@height:100px;
width: @width; //可以调用自己的局部变量
height: @height;
background: @back-color;
}
.two{
// width: @width;
// height: @height; 调用不到 .one中定义的变量
width: @test_width; //可以调用全局的变量
height: @test_width; //可以调用全局的变量
background: @back-color; //可以调用全局的变量
}