Less学习笔记

     作为 CSS 的一种扩展，Less 不仅完全兼容 CSS 语法，而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松，而且你可以在任何时候回退到 CSS（摘自官网）

1.变量

   Less通过@来定义变量；Less中的变量为完全的常量，所以只能被定义一次

　  @base: #f938ab;　　

　  div {
　　　　background: @base;
　　　　padding: 50px;
　　}
　　p {
　　　　color: #ff0;
　　}

2.混合（Mixin）

   混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承 class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

  @font-size: 30px;

  .color {

　　　 background: #999;
　　　 color: #f00;
   }
   .widget {
　　　.color;
　　　font-size: @font-size;
  }

3.嵌套规则

   在一个选择器中嵌套另一个选择器已实现继承，这样很大程度上减少了代码量

   #text {

　   h3 {

　　　　font-size:  26px;

　　　　font-weight:  bold;

          }

　　p {
　　　　font-size:  20px;
　　　　span {
　　　　　　　 color:  #ff0;
　　　　　　    &:hover { border: 1px solid #f0f}   // &符号是串联选择器，对伪类尤其有用
　　　　 }
　　     }
        }

4.运算&&函数

   提供了加，减，乘，除的操作；这样就可以做属性值和颜色的运算，less提供了内置函数，如Math,Color

   @the-border: 1px;

   @base-color: #111;

   @red: #842222;

   h3 {
　　　color: @base-color * 3;
　　　border-left: @the-border;
　　　border-right: @the-border *2;
　　　border-style: solid;
　　　border-color: desaturate(@red, 10%);
　}

5.匹配模式

   写法类似混合，作用类似于if语句

   .border (top; @border_width: 5px; @border_color: red) {
　　　　border-top: @border_width solid @border_color;
   }

   .border (bottom; @border_width: 10px; @border_color: green) {
　　　　border-bottom: @border_width dotted @border_color;
    }

    // 不管匹配哪一种模式，下面的样式都会加进去。注意的一点：第一个参数一定是@_
   .border (@_, @border_width: 10px; @border_color: red) {
　　　　border-color: yellow;
   }

   .border1 {
　　　　　.border(top);
    }

    .border2 {
　　　　　.border(bottom);
     }

6.拓展

   extend是less的一个伪类，他会合并他所在的选择和它所匹配的引用

　nav ul {
　　　&:extend(.line);
　　　background: blue;
　}
　.line {
　　　color: red;
　}

7.arguments变量

   arguments变量包含了全部传进来的参数   

　.border(@w:10px,@c:red,@xx:solid) {
　　　border:@arguments;
　}
　nav {
　p {
　　.    border(20px);
　　}
　}

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有