[无名弟子]ME|2017年04月01日的日报-技能树.IT修真院

发表于： 2017-04-01 20:28:26

1 596

今天完成的事情：

学习了LESS。将主要特性过了一遍。

1变量的使用。

2混入：在一个class中引用另一个class。

// 定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}

变量@arguments，代表所有变量。

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}

命名空间

为了解决这种情况：有大量选择器，团队协同开发时的选择器重名问题。

#mynamespace {
.home {...}
.user {...}
}

调用时：

#mynamespace > .user

嵌套结构

对于HTML的嵌套结构，LESS也可以用类似的嵌套结构来写。

HTML：

<div id="home"> 
    <div id="top">top</div> 
    <div id="center"> 
        <div id="left">left</div> 
        <div id="right">right</div> 
    </div> 
</div>

LESS：

#home{ 
   color : blue; 
   width : 600px; 
   height : 500px; 
   border:outset; 
   #top{ 
        border:outset; 
        width : 90%; 
   } 
   #center{ 
        border:outset; 
        height : 300px; 
        width : 90%; 
        #left{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
        #right{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
    } 
 }

嵌套对于伪元素的操作

LESS：

a { 
    color: red; 
    text-decoration: none; 
    &:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
        color: black; 
        text-decoration: underline; 
    } 
}

运算

针对数值型的值，如padding，color，margin等的计算

例如,

LESS：

@init: #111111; 
@transition: @init*2; 
.switchColor { 
    color: @transition; 
}

编译后的CSS：

.switchColor { 
    color: #222222; 
}

LESS 中单行注释 (// 单行注释 ) 是不能显示在编译后的 CSS 中，如果注释是针对样式说明的请使用多行注释。

继承

.a:extend(.b) {}
// 上面的和下面的效果一样，都是继承.a继承.b的样式
.a {
&:extend(.b);
}

函数

例如：将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8

@base: #f04615;
@width: 0.5;
.class {
    width: percentage(@width); // returns `50%`
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
}