Less css实战

[1- Less简介]：

css是一个标记语言，毫无逻辑，在语法更新的时候，每当新属性提出的时候，浏览器的兼容问题就是我们的绊脚石。

而Less Sass以及其他css预处理语言的出现很棒的解决了css的短板，我们在less语言中可以使用函数，混合（mixin），变量（varible），继承等，就好比在css中使用js。

在大型的项目中使用less等预处理语言可以方便程序员以更少的代码完成更多的样式。

[2-如何使用Less]：

如果你还没接触过 LESS CSS ，可以阅读下面两篇文章：

• Using Less.js to Simplify Your CSS3
• How to Build a Responsive Frankenstein Framework With LESS
• Less中文手册

[3-10个基础less案例]:(笔者这里的less采取的是在浏览器端解析less的方式)

 <link rel="stylesheet/less" href=xxx.less"> 2 <script src="less.min.js"></script> 

[3-01]圆角半径：

CSS3中圆角半径（border-radius）的特效要实现，就需要设置参数(各个方向的圆角半径宽度)，当然四个角度的宽度一样的话可以设置为一个参数。

[html]:

<div class="father">
    <div class="box3"></div>
    <div class="box2"></div>
    <div class="box1"></div>
</div>

[css]：

//mixins
.border-radius-custom(@topleft:5px,@topright:5px,@bottomright:5px,@bottomleft:5px){
   -webkit-border-radius: @arguments;
  -moz-border-radius: @arguments;
  -ms-border-radius:@arguments;
}
@box1:box1;
@box2:box2;
@box3:box3;
@3d:perserve-3d;

.@{box1} {
  transform: translateZ(500px) translateY(-350px);
  -webkit-perspective:0;
  opacity: 0.7;

  box-shadow: 2px 2px 10px 2px #000;
  background-color: #723232;
  width: 150px;
  height: 150px;
  .border-radius-custom();
}
.@{box2} {
  transform: translate(-0px,-200px);
  -webkit-perspective:0;
  perspective: 0;
  background-color: #723232;
  opacity: 0.7;
  box-shadow: 2px 2px 10px 2px #bbb;
  width: 200px;
  height: 200px;
  .border-radius-custom();
}
.@{box3} {
  -webkit-perspective:0;
  background-color: #723232;
  opacity: 0.7;
  box-shadow: 2px 2px 2px #bbb;
  width: 250px;
  height: 250px;
  //.backgroundColor();
  .border-radius-custom();
}
.father {
  transform-style: @3d;
  width: 400px;
  height: 250px;
  margin: 0 auto;
}

[最终实现]：

[3-02]方块阴影：

div的阴影也是我们在日常css编辑中常使用的特效，box-shadow需要 x：水平偏移，y：垂直偏移，blur：模糊度，alpha：阴影颜色（可以使用rgba（），也可以直接使用颜色）

[html]:

<div class="father">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>

[less]:

.box-shadow(@x:1px,@y:2px,@blur:3px,@alpha:red){
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow:@arguments
}
@father:father;
@box1:box1;
@box2:box2;
@box3:box3;
.@{father} {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: #ccc;
  margin:  0 auto;
}
.@{box1} {
  position: absolute;
  top:0;
  width: 200px;
  height: 200px;
  background-color: blue;
  //border: 1px solid #000;
  .box-shadow(2px,2px,5px,#000);
}
.@{box2} {
  position: absolute;
  top:0;
  width: 150px;
  height: 150px;
  background-color: green;
  .box-shadow(2px,2px,10px,#000);

}
.@{box3} {
  position: absolute;
  top:0;
  width: 100px;
  height: 100px;
  background-color: red;
  .box-shadow(2px,2px,10px,#000);

}

[最终特效]:

[3-02]元素的过渡效果（transition）：

初次接触css3的时候就被transition这个属性吸引到了，它可以实现css的过渡，有prop，ease，time等众多参数，简直就是个简易版的动画生成器；

[html]:

<div class="test">

</div>

[less]:

@test:test;
.transition(@prop:all,@time:1s,@ease:linear) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}
.@{test} {
  width: 500px;
  height: 500px;
  background-color: #000;
  .transition(all,5s,ease-in);
}
.@{test}:hover{
  opacity: 0;
}

[最终效果]:

[3-04]旋转特效（transform）：

transition实现了元素的过渡效果，而transform这个属性就实现了我们css3中的2D转换。比如旋转（rotate），平移（translate），缩放（scale）等；

[html]:

 <div class="father"> 2 </div> 

 [less]:

.transform(@rotate:50deg,@scale:1,@skew:1deg,@translate:50px){
  transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
.father{
  width: 50px;
  height: 500px;
  background-color: red;
}
.father:hover {
  .transform();
}

[最终效果]：

[3-05]渐变效果（gradients）：

css的渐变背景效果也是多参的，所有利用less的mixin实现了多参方法用来实现该效果非常方便；

[html]:

<div class="test"></div>
</body>

[css]:

.test{
  width: 500px;
  height: 500px;
  .gradient();
}
.gradient(@origin:left,@start:red,@stop:purple) {
  background-color:red ;
  background: -webkit-linear-gradient(@origin,@start,@stop);
  background: -moz-linear-gradient(@origin,@start,@stop);
  background: -ms-linear-gradient(@origin,@start,@stop);
  background: -o-linear-gradient(@origin,@start,@stop);
  background: linear-gradient(@origin,@start,@stop);
}

[最终效果]:

[3-06]quick gradient（快速渐变）：

只设置两个参数  1 origin    2   alpha  实现单个颜色的（透明度的）渐变

[html]:

 <div class="test"></div> 

 [less]:

@test:test;
.quick-gradient(@origin:left,@alpha:0.2) {
  background: -webkit-linear-gradient(@origin,rgba(0,0,0,0),rgba(0,0,0,@alpha));
  background: -moz-linear-gradient(@origin,rgba(0,0,0,0),rgba(0,0,0,@alpha));
  background: -ms-linear-gradient(@origin,rgba(0,0,0,0),rgba(0,0,0,@alpha));
  background: -o-linear-gradient(@origin,rgba(0,0,0,0),rgba(0,0,0,@alpha));
  background: linear-gradient(@origin,rgba(0,0,0,0),rgba(0,0,0,@alpha));
}
.@{test} {
  width: 300px;
  height:300px;
  background-color: #000;
  .quick-gradient();
}

[3-07-01]图片倒影(box-reflect):

之前学习css3的时候没有太留意这个属性 ，学习的过程中遇到后觉得挺有意思而且也属于常用的属性；其原理类似于使用渐变和对称实现倒影；

[html]:

    <img src="imgs/1.jpg" alt="" width="500" height="300px">

[less]:

.reflect() {
  -webkit-box-reflect: below 0 linear-gradient(transparent, white);
}
img {
  .reflect();
}

[最终效果]：

[3-07-02]:倒影（渐变）：

[html]:

 <div class="test"></div> 

 [less]:

.gradient(@origin: left,@start: red,@stop: purple) {
  background: -webkit-linear-gradient(@origin,@start,@stop);
};
.reflect() {
  -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,white 40%,rgba(0,0,0,.8));
}
.test{
  width: 400px;
  height: 200px;
  .gradient();
  .reflect();
}

[最终效果]:

 

Color Math 颜色计算：

01 颜色互补方案（Complementary Color Scheme）:

Less 和 Sass 最出色的就是多了个颜色计算函数，我们可以使用这种css预处理语言特有的功能实现调色板的特殊效果；

[html]:

<div class="test">
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
    <div class="son"></div>
</div>

[less]:

这里我们创建一个基本颜色（@base）然后通过色彩旋转以及加亮变暗方法扩展到5个色板，为了使用互补色我们使用spin将颜色旋转180deg;

@base: #663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);

.son:nth-child(1) {
  background-color: @base;
}
.son:nth-child(2) {
  background-color: @complement1;
}
.son:nth-child(3) {
  background-color: @complement2;
}
.son:nth-child(4) {
  background-color: @lighten1;
}
.son:nth-child(5) {
  background-color: @lighten2;
}

[最终效果]：

02 颜色微调：Subtle Color Scheme：

互补色很有用，但是在网页设计中另一个更有用的就是颜色微调；

[code]:

/* Mixin */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);
 
/* Implementation */
.one   {color: @base;}
.two   {color: @lighter1;}
.three {color: @lighter2;}
.four  {color: @darker1;}
.five  {color: @darker2;}

[css]:

/* Compiled CSS */
.one   {color: #663333;}
.two   {color: #884a44;}
.three {color: #aa6355;}
.four  {color: #442225;}
.five  {color: #442225;}

[最终效果]：

 

原文链接