Less常用基础知识-柠檬先生

2020-11-27 来源：爱go旅游网

LESS 中的注释
　　也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。
　　也可以使用// 注释不会被编译的
变量
　　声明变量的话一定要用@开头例如：@变量名称：值；
　　@test_width:300px;
　　.box{
　　　　　　width:@test_width;
　　　　　　height:@test_width;
　　　　　　background-color:yellow;
　　　　}
混合-(Mixin）
　　混合(mixin)变量
　　　　例如： .border{border:solid 10px red}
　　　　.box{
　　　　　　width:@test_width;
　　　　　　height:@test_width;
　　　　　　background-color:yellow;
　　　　　　.border;
　　　　}
　　带参数的混合
　　　　.border-radius(@radius){css 代码}
　　　　可认定默认值
　　　　.border-radius(@radius:5px){css 代码}
　　混合-可带的参数
　　　　.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_04(20px);
　　　　}
　　混合的例子
　　　　.border_radius(@radus:5px){
　　　　　　　　-webkit-border-radius:@radius;
　　　　　　　　-moz-border-radius:@radius;
　　　　　　　　border-radius:@radius;
　　　　　　}
　　　　.radius_test{
　　　　　　width:100px;
　　　　　　height:40px;
　　　　　　background-color：green;
　　　　　　.border_radius();
　　　　}
匹配模式
　　　　　　.sanjiao{
　　　　　　　　width:0;
　　　　　　　　height:0;
　　　　　　　　overflow:hidden;
　　　　　　　　border-width:10px;
　　　　　　　　border-color:transparent transparent red transparent;
　　　　　　　　border-style:dashed dashed solid dashed;
　　　　　}

　　　　.triangle(top,@w:5px,@c:#ccc){
　　　　　　　　　　　　border-width:@w;
　　　　　　　　　　　　border-colo:transparent transparent @c transparent
　　　　　　　　　　　　border-style:dashed dashed solid dashed;
　　　　　　}
　　　　.triangle(bottom,@w:5px,@c:#ccc){
　　　　　　　　　　　　border-width:@w;
　　　　　　　　　　　　border-colo:@c transparent transparent transparent
　　　　　　　　　　　　border-style:solid dashed dashed dashed;
　　　　　　}
　　　　.triangle(left,@w:5px,@c:#ccc){
　　　　　　　　　　border-width:@w;
　　　　　　　　　　border-colo: transparent @c transparent transparent
　　　　　　　　　　border-style: dashed solid dashed dashed;
　　　　　　}
　　　　.triangle(right,@w:5px,@c:#ccc){
　　　　　　　　　　border-width:@w;
　　　　　　　　　　border-colo: transparent transparent transparent @c;
　　　　　　　　　　border-style: dashed dashed dashed solid;
　　　　　　}
　　　　.trangle(@_,@w:5px,@c:#ccc){ //@_ 什么时候都带着的。
　　　　　　　　　　width:0;
　　　　　　　　　　height:0;
　　　　　　　　　　overflow:hidden;
　　　　　　}
　　　　.sanjiao{
　　　　　　.trangle(top,100px);
　　　　　　}
　　// 匹配模式- 定位
　　　　.pos(r){
　　　　　　position:relative;
　　　　}
　　　　.pos(a){
　　　　　　position:absolute;
　　　　}
　　　　.pos(f){
　　　　　　position:fixed;
　　　　}
运算
　　@test_01:300px;
　　.box_02{
　　　　width:@test_01 +20;
　　}
　　.box_02{
　　　　width:@test_01 -20;
　　}
　　.box_02{
　　　　width:(@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{
　　　　　　　　float:left;
　　　　　　　　&hover{
　　　　　　　　color:red; //& 代表他的上一层选择器。
　　　　　　　　}
　　　　　　}
　　　　}
@arguments 变量
　　　　@arguments 包含了所有的传递进来的参数。
　　　　　　.border_arg(@w:30px,@c:red,@xx:solid){
　　　　　　.border:@arguments;
　　　　}
避免编译
　　.test_03{
　　　　width:~'calc(300px -30)';
　　}

!importan关键字
　　　　.test_important{
　　　　　　.border_radius() !important;
　　}

显示全文

全部栏目

Less常用基础知识-柠檬先生