LESS学习笔记(下)

来源:互联网 发布:现在淘宝什么最赚钱 编辑:程序博客网 时间:2024/03/29 12:43

// 通过传参进行匹配,类似js中的if语句

LESS预编译:

.trianger(top,@w:5px,@c:#f00){    border-width: @w;    border-color:  transparent transparent @c transparent;    border-style: dashed dashed solid dashed;}.trianger(@_,@w:5px,@c:#f00){    width: 0;    height: 0;    overflow: hidden;}.pipei{    .trianger(top,10px);}.pos(r){    position: relative;}.pos(a){    position: absolute;}.pos(f){    position: fixed;}.pos-pp{    width: 50px;    height: 50px;    background: red;    top: 0;    right: 0;    .pos(a);}
CSS输出:

.pipei {  border-width: 10px;  border-color: transparent transparent #ff0000 transparent;  border-style: dashed dashed solid dashed;  width: 0;  height: 0;  overflow: hidden;}.pos-pp {  width: 50px;  height: 50px;  background: red;  top: 0;  right: 0;  position: absolute;}
// 避免编译【~】

LESS预编译:

.test_calc1{    width: calc(100% - 20px);   //直接这么预编译得到的width:80%;不是我们想要的}.test_calc2{    width: ~'calc(100% - 20px)';}
CSS输出:

.test_calc1 {  width: calc(80%);}.test_calc2 {  width: calc(100% - 20px);}
// !important 提升优先级

LESS预编译:

.border_radius(@radius:5px){    -webkit-border-radius: @radius;    -moz-border-radius: @radius;    border-radius: @radius;}.test_imp{    .border_radius()!important;}
CSS输出:

.test_imp {  -webkit-border-radius: 5px !important;  -moz-border-radius: 5px !important;  border-radius: 5px !important;}

// merge合并属性(用逗号分隔)对于诸如background和transform之类的属性来说,merge非常有用。
LESS预编译:

.mixin(){    box-shadow+: 1px 1px 5px #f00;}.merge{    .mixin();    box-shadow+: 2px 2px 4px 5px #000; }
CSS输出:

.merge {  box-shadow: 1px 1px 5px #f00, 2px 2px 4px 5px #000;}
// space合并属性(用空格分隔)
LESS预编译:
.mixin2(){    transform+_: scale(2);}.space{    .mixin2();    transform+_: rotate(15deg);}
CSS输出:
.space {  transform: scale(2) rotate(15deg);}
// 改变选择器顺序(在&之前定义一个类选择器)
LESS预编译:
.head{    .menu{        border-radius: 5px;        .no-radius & {            color: red;        }    }}
CSS输出:
.head .menu {  border-radius: 5px;}.no-radius .head .menu {  color: red;}
// 组合使用(&还可以用于生成一个逗号分割列表的所有可能的选择器排列:)
LESS预编译:
a ,b ,c ,d{    color: red;    & + &{        background: black;    }}
CSS输出:
a,b,c,d {  color: red;}a + a,a + b,a + c,a + d,b + a,b + b,b + c,b + d,c + a,c + b,c + c,c + d,d + a,d + b,d + c,d + d {  background: black;}
差不多就介绍这么多了,第一部分的学习笔记更常用些,这节最后某些就不常用了,只做了解。

0 0
原创粉丝点击