首页 > 代码库 > less03 混合
less03 混合
less
//基本混合 .font_hn{ color: red; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } h1{ font-size: 28px; .font_hn; } h2{ font-size: 24px; .font_hn; } //不带输出的混合,类名后面使用() .font_hn(){ color: red; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } h1{ font-size: 28px; .font_hn; } h2{ font-size: 24px; .font_hn; } //带选择器的混合 .my-hover-mixin { &:hover { //&代表父级 border: 1px solid red; } } button { .my-hover-mixin(); } h1{ .my-hover-mixin(); } //带参数的混合,这个样式不输出 .border(@color){ border: 1px solid @color; } h1{ &:hover{ .border(green); } } h2{ &:hover{ .border(#000); } } /*带参数并且有默认值的混合*/ //带参数并且有默认值的混合 .border_you(@color:red){ border: 1px solid @color; } h1{ &:hover{ .border_you(); } } h2{ &:hover{ .border_you(yellow); } } /*带多个参数的混合*/ //带多个参数的混合 .mixin(@color; @padding:xxx; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .divmaizi{ .mixin(red;) } .divmaizi { .mixin(1,2,3;something, ele;132); } .divmaizi { .mixin(1,2,3); //3个参数 } .divmaizi { .mixin(1,2,3;); //一个参数 } //如果传参的括号里面全部都是以“,”分割,那么会依次传给各个参数值, //如果传参的括号里面既有“,”又有“;”那么,会把“;”前面的看作一个整体,传给一个参数值 /*定义多个具有相同名称和参数数量的混合*/ .mixin(@color) { color-1: @color; } .mixin(@color; @padding:2) { color-2: @color; padding-2: @padding; } .mixin(@color; @padding; @margin: 2) { color-3: @color; padding-3: @padding; margin: @margin @margin @margin @margin; } .some .selector div { .mixin(#008000); } //命名参数 /*命名参数*/ .mixin(@color: black; @margin: 10px; @padding: 20px) { color: @color; margin: @margin; padding: @padding; } .class1 { .mixin(@margin: 20px; @color: #33acfe); } .class2 { .mixin(#efca44; @padding: 40px);//根据参数类型传值不根据位置传值 } .class3{ .mixin(@padding: 80px;) } /*@arguments所有可变参数*/ .border(@x:solid,@c:red){ border: 21px @arguments; } .div1{ .border(solid); } // .border(all,@w: 5px){ border-radius: @w; } .border(t_l,@w:5px){ border-top-left-radius: @w; } .border(t_r,@w:5px){ border-top-right-radius: @w; } .border(b-l,@w:5px){ border-bottom-left-radius: @w; } .border(b-r,@w:5px){ border-bottom-right-radius: @w; } footer{ .border(t_l,10px); .border(b-r,10px); background: #33acfe; } //混合的返回值 .average(@x, @y) { @average: ((@x + @y) / 2); @he:(@x + @y); } div { .average(16px, 50px); padding: @average; margin: @he; }
css
.font_hn { color: red; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } h1 { font-size: 28px; color: red; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } h2 { font-size: 24px; color: red; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } h1 { font-size: 28px; color: red; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } h2 { font-size: 24px; color: red; font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica; } .my-hover-mixin:hover { border: 1px solid red; } button:hover { border: 1px solid red; } h1:hover { border: 1px solid red; } h1:hover { border: 1px solid #008000; border: 21px #008000 #ff0000; } h2:hover { border: 1px solid #000000; border: 21px #000000 #ff0000; } /*带参数并且有默认值的混合*/ h1:hover { border: 1px solid #ff0000; } h2:hover { border: 1px solid #ffff00; } /*带多个参数的混合*/ .divmaizi { color: 1, 2, 3; margin: 10px; padding: 20px; } /*定义多个具有相同名称和参数数量的混合*/ /*命名参数*/ .class1 { color: #33acfe; margin: 20px; padding: 20px; } .class2 { color: #efca44; margin: 10px; padding: 40px; } .class3 { color: #000000; margin: 10px; padding: 80px; } /*@arguments;*/ .div1 { border: 1px solid solid; border: 21px solid #ff0000; } footer { border: 21px t_l 10px; border-top-left-radius: 10px; border: 21px b-r 10px; border-bottom-right-radius: 10px; background: #33acfe; } div { padding: 33px; margin: 66px; }
less
//传统写法 //header{ // width: 960px; //} //header h1 { // font-size: 18px; // color: green; //} //header .logo{ // width: 300px; // height: 150px; // background: darkred; //} //header .logo:hover{ // background: forestgreen; //} //less写法 //header{ // width: 960px; // h1{ // font-size: 18px; // color: green; // } // .logo{ // width: 300px; // height: 150px; // background: darkred; // &:hover{ // background: forestgreen; // } // } //} .a{ .b{ .c{ color: 123; } } } .a{ .b{ .c&{ //把&放在所有父类的前面去 color: 123; } } } p, a, ul, li { border-top: 2px dotted #366; & & { border-top: 0; } } a , b ,c{ & & & { border-top: 0; } }
css
.a .b .c { color: 123; } .c.a .b { color: 123; } p, a, ul, li { border-top: 2px dotted #366; } p p, p a, p ul, p li, a p, a a, a ul, a li, ul p, ul a, ul ul, ul li, li p, li a, li ul, li li { border-top: 0; } a a a, a a b, a a c, a b a, a b b, a b c, a c a, a c b, a c c, b a a, b a b, b a c, b b a, b b b, b b c, b c a, b c b, b c c, c a a, c a b, c a c, c b a, c b b, c b c, c c a, c c b, c c c { border-top: 0; }
less03 混合
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。