Less编译工具的学习

通常我们在制作网页时，要写一大堆的类名（class）,如果嵌套太多，写起来就很麻烦，可是如果我们用less这样的编译工具的话，就可以给我们减轻很多负担了，省时，又省力，下面就来看看吧！

一、LESS

解释：它是一种动态样式语言，LESS 将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数， LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。

1.变量
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能

只需要修改几行代码就可以了。

<div class="box2">
     <p>这是第二段文字，关于变量的问题</p>
     <span>今天是一个好日子
       <i>变量的问题</i>
     </span>
     <ol class="clearfix">
      <li>
        <a href="">1</a>
      </li>
      <li>
        <a href="">1</a>
      </li>
      <li>
          <a href="">1</a>
      </li>
      <li>
          <a href="">1</a>
      </li>
    </ol>
   </div>

@color:#cc0000;
// 变量

 .box2{
 p{
  font-size:18px;
  color:@color;
  height:30px;
  
 }
 span{
   color:#333;
   font-size:16px;
   display:block;
   margin-top:20px;
  i{
    font-size:12px;
    color:@color;
  }
 }
//  列表
 ol{
  width: 440px;
  height: 125px;
  margin: 0 auto;
  border: 1px solid #f00;
   li{
     float:left;
     width:90px;
     height:100px;
     background:#969652;
     text-align:center;
     line-height:100px;
     margin:10px 10px;
     a{
      font-size:14px;
      color:@color;
     }
     a:hover{
      font-size:14px;
      color:#333;
      text-decoration: underline;
     }
   }
 }
}

2.混合
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有

属性。我们还可以带参数地调用，就像使用函数一样。

<div class="box3">
  <p>
     这是关于less混合的使用
    <span>混合坚果</span>
    <i>混合小中心</i>
  </p>
</div>
<div class="box4">
  <p>122</p>
</div>
<footer>
  收尾啦，学习完less啦！
</footer>

.rounded-corners(@radius:5px){
  border-radius:5px;
  -moz-border-radius: @radius;
  -webkit-border-radius:@radius;
}

.box3{
  border:1px solid #ccc;
  width:420px;
  height:350px;
   p{
    width: 300px;
    height: 240px;
    background: #bebedc;
    margin: 0 auto;
    text-align:center;
     .rounded-corners;
     span{
      display:block;
      font-size:13px;
      color:@color;
      text-align:center; 
      margin:20px;
     }
     i{
       display:block;
       width:100px;
       height:100px;
       background:pink;
       margin:0 auto;
       .rounded-corners(10px);
       line-height: 100px;
      
     }
   }
}

3.嵌套规则
我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的
清晰。

<div class="navBox1">
      <p class="navP">这是一个传奇的故事</p>
      <span>故事要从1920年说起啦</span>
      <i>那天阳光明媚，微风习习，天空澄澈</i>
      <span class="navSpan">空气中洋溢着一股魔卡龙的香甜味道</span>
      <p class="navp2">没有任何一个女人
        不加修饰就能与岁月抗衡
        
        聪明的女人总是懂得内外兼修
        没有自然美
        只有美得自然</p>
        <p class="navp3">生活中有许多事是我们都无法预料和猜测的，你比如说</p>
        <p class="pic1"><img src="img/1.jpg" alt=""></p>
        <strong>那是一个激励人振奋人的时代，每个人像打了鸡血似的为生活奔波,阳光是那么刺眼，舒服</strong>
        <ul class="list1">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="floatBox clearfix">
          <div class="left-1 fl">
            <p><img src="img/w3.jpg" alt=""></p>
            <i>奶味少女</i>
            <span>le27323leyan</span>
          </div>
          <p class="right-1 fr">
            <span>第一次学习Less,以前自己太懒啦
              </span>
          </p>
        </div>
        <ol>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
        </ol>
   </div>

 .navBox1{
  font-size:12px;
  background:#f1f1f1;
  // width:1000px;
  .navP{
     font-size:16px;
    //  color:#333;
     margin:10px;
 }
 span{
   color:#f60;
   font-size:12px;
 }
 i{
   color:#0f0;
   font-size:12px;
  
 }
 .navSpan{
   font-size: 16px;
   color: aqua;
 }
 .navp2{
   color:#969652;
   font-size: 18px;
   margin:10px;
 }
 .navp3{
  color:#00f;
  font-size: 16px;
  margin:15px;
}
.pic1{
  width:300px;
  height:300px;
  margin: 0 auto;
  img{
    width:100%;
    height:100%;
  }
}
strong{
  font-size: 13px;
  color:#000;
  margin:10px;
  width:350px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display:block;
}
ul{
  border:1px solid #ccc;
  width:402px;
  height:402px;
  margin:0 auto;
  li{
    width:402px;
    height:50px;
  }
  li:nth-child(odd){
    background:pink;
  }
  li:nth-child(even){
    background:lightgreen;
  }
}
.floatBox{
    width: 1000px;
    height: 400px;
    margin: auto;
  .left-1{
     width:398px;
     height:300px;
     float:left;
     text-align:center;
    p{
      width:300px;
      height:300px;
      margin:5px auto;
      img{
        width:100%;
        height:100%;
        border-radius:50%;
      }
    }
    i{
      display:block;
      width:100px;
      font-size:14px;
      color:#333;
      margin:10px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin:10px auto;
      
    }
    span{
      display:block;
      width:80px;
      font-size:14px;
      color:#e01b3d;
      margin:10px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin:10px auto;
    }

  }
.right-1{
  width:600px;
  height:400px;
  background:#ff0;
  text-align:center;
  border-left:1px solid #ccc;
  span{
    display:block;
    font-size: 18px;
    color:#333;
    padding: 20px;
  }
}
}
ol{
  border:1px solid #ccc;
  width:1000px;
  height:250px;
  margin:0 auto;
  li{
    width:230px;
    height:230px;
    background:peru;
    margin:10px 10px;
    float:left;
    text-align:center;
    line-height:230px;
    font-size:25px;
    font-weight:bold;
    color:#fff;
  }

}

}

4.函数 & 运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。
LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值

<div class="box4">
  <p>122</p>
</div>
<footer>
  收尾啦，学习完less啦！
</footer>

@the-border:1px;
@base-color:#111;
@red:#cc0000;
.box4{
  border:1px solid #ccc;
  width:300px;
  height:300px;
   color:@base-color * 3;
   border-left:@the-border;
   border-right:@the-border * 5;
}
footer{
  color: @base-color + #000;
  border-color: desaturate(@red, 10%);
}

用的时候还是一样的，新建一个.css文件，新建一个.less文件，然后在html中引入.css,但是写样式在.less里面去写，完了把.less文件删除即可。

<link rel="stylesheet" href="css/main.css" />

由于时间有限，暂且搁笔，下次有时间再好好写写，如有什么问题，请朋友们提出宝贵意见，谢谢，一起进步！

Less编译工具的学习

猜你喜欢