• 【LESS系列】基本语法


    这里将直接以实例的方式展示 LESS 的基本语法。

    less code 是编译前的代码,css code 是编译后的代码。

    本文的内容,同样是引自【http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

    1.变量

    //less code
    
    //定义一个变量
    @border-color : #b5bcc7; 
    
    .mythemes tableBorder{ 
      border : 1px solid @border-color; 
    }
    //css code
    .mythemes tableBorder
    { border: 1px solid #b5bcc7; }

    变量最常用的情境是定义主题,像字体颜色,背景颜色,边框样式等进行统一定义,统一定义图片资源路径也是一个不错的做法。

    LESS 中的变量和其他编程语言一样,可以实现值的复用,同样它也有生命周期,也就是 Scope(变量范围,开发人员惯称之为作用域),简单的讲就是局部变量还是全局变量的概念。

    查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。下面我们通过一个简单的例子来解释 Scope。

    //less code
    
    @width : 20px; 
    
    #homeDiv { 
      @width : 30px; 
      #centerDiv{ 
        width : @width; //此处应该取最近定义的变量 width 的值 30px 
      } 
    }
    
    #leftDiv { 
      width : @width; //此处应该取最上面定义的变量 width 的值 20px 
    }
    //css code
    
    #homeDiv #centerDiv { 
      width: 30px; 
    }
    
    #leftDiv { 
      width: 20px; 
    }

    2.混合Mixins

    //less code
    
    //定义一个模块
    .roundedCorners(@radius:5px) { 
      -moz-border-radius: @radius; 
      -webkit-border-radius: @radius; 
      border-radius: @radius; 
    } 
    
    #header { 
      .roundedCorners; 
    }
    
    #footer { 
      .roundedCorners(10px); 
    }
    //css code
    
    #header { 
      -moz-border-radius:5px; 
      -webkit-border-radius:5px; 
      border-radius:5px; 
    }
    
    #footer { 
      -moz-border-radius:10px; 
      -webkit-border-radius:10px; 
      border-radius:10px; 
    }

    从上面的例子我们可以看出,LESS 的 Mixins 特性支持传参,默认值定义,我个人觉得如果你不是概念强迫症患者的话,完全可以把它当成是样式函数来理解。

    除此之外,Mixins 也能像 Javascript 那样使用 arguments 变量,只是有一点点小区别。

    在 LESS 里,@arguments 变量表示所有的变量,很多时候通过使用它,我们可以少写很多代码,请看下面例子:

    //less code
    
    //定义一个模块
    .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); 
    }
    //css code
    
    #header { 
      -moz-box-shadow: 2px 2px 3px #f36; 
      -webkit-box-shadow: 2px 2px 3px #f36; 
      box-shadow: 2px 2px 3px #f36; 
    }

    我们甚至能利用参数生产类名~

    .create-color-btn (@color-name, @background-color, @border-color, @font-color) {
        .btn-@{color-name} {
            background: @background-color;
            border: 1px solid @border-color;
            color: @font-color;
        }
        .btn-@{color-name}:hover {
            background: @background-color * 1.05;
            border-color: @border-color * 1.05;
        }
        .btn-@{color-name}:active {
            background: @background-color * 0.9;
            border-color: @border-color * 0.9;
        }
    }

    .create-color-btn(blue, #4bb1cf, #4bb1cf, #ffffff);

    /* 生成的CSS这里就不发出来了 */

    3.值运算

    //less code
    
    @init: #111111; 
    
    @transition: @init*2; 
    
    .switchColor { 
      color: @transition; 
    }
    //css code
    
    .switchColor { 
      color: #222222; 
    }

    对于一些数值型的值,LESS 是支持进行加减乘除四则运算的。

    此外,LESS 还提供了一组函数,专门针对颜色运算操作。

    lighten(@color, 10%); //颜色淡化
    darken(@color, 10%); //颜色加深
    saturate(@color, 10%); //饱和度增加 
    desaturate(@color, 10%); //饱和度降低
    fadein(@color, 10%); //透明度增加
    fadeout(@color, 10%); //透明度降低
    spin(@color, 10); //色调调整(+10)
    spin(@color, -10); //色调调整(-10)

    这组函数直接返回具体的色值,看下面实例:

    //less code
    
    @init: #f04615;
    
    #body { 
      background-color: fadein(@init, 10%); 
    }
    //css code
    
    #body { 
      background-color: #f04615; 
    }

    4.嵌套规则

    <div id="home"> 
      <div id="top">top</div> 
      <div id="center"> 
        <div id="left">left</div> 
        <div id="right">right</div> 
      </div> 
    </div>
    //less code
    
    #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%; 
          } 
       } 
    }
    //css code
    
    #home { 
      color: blue; 
      width: 600px; 
      height: 500px; 
      border: outset; 
    } 
    #home #top { 
      border: outset; 
      width: 90%; 
    } 
    #home #center { 
      border: outset; 
      height: 300px; 
      width: 90%; 
    } 
    #home #center #left { 
      border: outset; 
      float: left; 
      width: 40%; 
    } 
    #home #center #right { 
      border: outset; 
      float: left; 
      width: 40%; 
    }

    我们平时在编写 css 的时候,经常会遇到多层选择器嵌套的情况。

    从上面的例子可以看出,LESS 可以用很简洁的代码来实现,有着更好的可读性。

    同时,我们还可以使用 “&” 来进行同一层级的操作,比如组合类和伪类。

    //less code
    
    .link{
      text-decoration: none;
      &.red{
        color: #f00;
      }
      &:hover{
        text-decoration: underline; 
      } 
    }    
    //css code
    .link{
      text-decoration: none;
    }
    
    .link.red{
      color: #f00;
    }
    
    .link:hover{
      text-decoration: underline; 
    }

    5.导入指令(Import)

    less样式文件可通过 @import '文件路径'; 引入外部的less文件。

    注意:

    不带扩展名或带非 .less 的扩展名均被视为 less 文件;

    @import 可出现在任何位置,而不像 css 的 @import 那样只能放在文件第一行。

    另外 @import 还提供了6个可选配置项(分别为 referenceinlinelesscssoncemultiple),用来改变引入文件的特性。

    1. @import (reference) "文件路径";

    将引入的文件作为样式库使用,因此文件中样式不会被直接编译为 css 样式规则。当前样式文件通过extendmixins的方式引用样式库的内容。

    2. @import (inline) "文件路径";

    用于引入与 less 不兼容的 css 文件,通过 inline 配置告知编译器不对引入的文件进行编译处理,直接输出到最终输出。注意:引入的文件和当前文件会被编译为一个样式文件

    3.@import (less) "文件路径";

    默认使用该配置项,表示引入的文件为 less 文件。

    4.@import (css) "文件路径";

    表示当前操作为 css 中的 @import 操作。当前文件会输出一个样式文件,而被引入的文件自身为一个独立的样式文件

    5.@import (once) "文件路径";

    默认使用该配置项,表示对同一个资源仅引入一次。

    6.@import (multiple) "文件路径";

    表示对同一资源可引入多次。

  • 相关阅读:
    匿名内部类
    父类引用指向子类对象【转】
    书签收集
    Linux搭建我的世界服务器
    Python入门学习-DAY27- isinstance与issubclass、反射、内置方法
    Python入门学习-DAY26-绑定方法与非绑定方法
    Python入门学习-DAY25-组合、多态、封装
    Python入门学习-DAY24-继承
    Python入门学习-DAY23-面向对象编程
    Python入门学习-DAY20-常用模块三-re模块、subprocess模块
  • 原文地址:https://www.cnblogs.com/czf-zone/p/4364953.html
Copyright © 2020-2023  润新知