Rumah  >  Artikel  >  hujung hadapan web  >  Less用法指南_html/css_WEB-ITnose

Less用法指南_html/css_WEB-ITnose

WBOY
WBOYasal
2016-06-24 12:07:291054semak imbas

  目录:

  •     什么是LESS
  •   目的
  •   语法
  •     变量(Variables)
  •     混合(Mixins
  •     运算符(Operations)
  •     功能函数(Functions)
  •     嵌套规则(Nested Rules
  •     命名空间(Namespaces
  •     注释(Comments
  •   1、什么是LESS

      LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

      LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

      LESSCSS是一种由Alexis Sellier设计的动态层叠样式表语言。受Sass所影响,同时也影响了Sass的新语法:SCSS。[1]

      LESSCSS是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被复用为JavaScript。受益于JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。

      2、目的

      学习笔记,里边加了一些体会。同时也希望以后不用去参照官方文档了。中文官网、英文官网。

      3、语法:

      3.1、变量(Variables)

      其实更应该称为常量。因为只能取最后一次的赋值。

      语法规则:

      @变量名:值;

      值可以是css属性值,也可以是其他变量

      3.1.1 css属性值

    @backColor: yellow;.a {    background-color: @backColor;}@backColor: blue;.b {    background-color: @backColor;}

      编译后:

    .a {  background-color: #0000ff;}.b {  background-color: #0000ff;}

      从编译后的结果可以看出来,只取变量的最后一次赋值结果。

    @backColor: blue;

       3.1.2 变量名做作为变量

    @com: color;@color: #111;#header {    background-color: @@com + 5 * 2;    color: @color;}

      编译后:

    #header {  background-color: #1b1b1b;  color: #111111;}

       注:仅支持@@,不支持>2@。  3.1.3 作用域(scope)

    @color: red;#header {  @color: white;  .a {    color: @color; // white  }}.b {  color: @color; // red  }

      编译后:

    #header .a {  color: #ffffff;}.b {  color: #ff0000;}

      可以看出来,LESS中变量作用域处理方式和js一致,采用链式作用域方式。至于上面的嵌套写法,先不用理解,后面会说到。 

      用法:

      1、统一的样式修改(当然没有LESS之前,我们也可以通过规范进行实现);  

      2、四则运算(Operations),虽然仅仅四则,但是已经可以完成大多数功能了;  

      3、和混合(Mixins)结合使用,你像使用函数一下使用他;  

      4、和js相同的链式作用域,前端工程师非常容易理解。

      3.2 混合(Mixins)  

      我把他分为两种形式:函数和复用。  

      Bad smell(代码的坏味道)中第一条一般就是Duplicated Code(重复代码)。如何解决?就是代码封装。Mixins就是这样一个作用。  

      函数:

    .c(@bg: red) {    background-color: @bg;    width: 100px;    height: 200px;}@bgc: yellow;.a {    .c(@bgc);}@bgColor: @bgc + #111;.b {    .c(@bgColor);}.d {    .c();}

      编译之后的代码:

    .a {  background-color: #ffff00;  width: 100px;  height: 200px;}.b {  background-color: #ffff11;  width: 100px;  height: 200px;}.d {  background-color: #ff0000;  width: 100px;  height: 200px;}

       注:编译之后没有.c相关内容。

      @arguments    

      这个写法借签了js的函数参数。一般用于一些简写方式:

    .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);}

      编译后:

    #header {  -moz-box-shadow: 2px 2px 3px #ff3366;  -webkit-box-shadow: 2px 2px 3px #ff3366;  box-shadow: 2px 2px 3px #ff3366;}

       复用:

    .d {    .e;}.e {    position: absolute;}#f {    position: relative;;}.m {    #f;}

      编译之后

    .d {  position: absolute;}.e {  position: absolute;}#f {  position: relative;}.m {  position: relative;}

      发现没有?.e和#f内容都存在。

      注:class, id 属性集都可以以同样的方式复用。  

      “函数”和“复用”区别:  

      1、前者可以传参;  

      2、前者编译之后不存在,后者依然存在。 

      用法:  

      1、代码封装;  

      2、同变量一同,像函数一样使用,封装之后我们可以进行统一的样式修改;  

      3、样式复用,主要针对“复用”。

      3.3 运算符(Operations)  

      目前仅支持加、减、乘、除四则运算,主要针对数字、颜色、变量的操作。

    @baseWith: 100px;@baseHeight: 50px;@baseColor: #333;.a {        height: @baseHeight + 300;    min-width: @baseWith - @baseHeight;    width: @baseWith * 3;    color: @baseColor / 3;}

      编译后:

    .a {  height: 350px;  min-width: 50px;  width: 300px;  color: #111111;}

       可以使用()改变运算的先后顺序

    @com: 25px;#header {    width: @com + 5 * 2;    height: (@com + 5 ) * 2;}

      编译后:

    #header {  width: 35px;  height: 60px;}

      3.4 功能函数(Functions)  

      主要针对color的处理。提供如下函数:

    lighten(@color, 10%);     // return a color which is 10% *lighter* than @colordarken(@color, 10%);      // return a color which is 10% *darker* than @colorsaturate(@color, 10%);    // return a color 10% *more* saturated than @colordesaturate(@color, 10%);  // return a color 10% *less* saturated than @colorfadein(@color, 10%);      // return a color 10% *less* transparent than @colorfadeout(@color, 10%);     // return a color 10% *more* transparent than @colorspin(@color, 10);         // return a color with a 10 degree larger in hue than @colorspin(@color, -10);        // return a color with a 10 degree smaller hue than @color

      本人使用的不是很多,想了解更详细的新可以参考官网,或者这里。

      3.5 嵌套规则(Nested Rules)

      为了和上面做区分,同时带入一个新功能,以一个新例子开始。html代码如下:

    <div id="header">    <h1><a href="http://www.cnblogs.com/hanyangecho/">hanyangecho</a></h1>    <p>我的世界</p></div>

      LESS代码如下:

    #header {    display: inline;    float: left;    h1 {        font-size: 26px;        font-weight: bold;        a {            text-decoration: none;            color: #f36;            &:hover {                text-decoration: underline;                color: #63f;            }        }    }    p {        font-size: 12px;    }}

      编译之后:

    #header {  display: inline;  float: left;}#header h1 {  font-size: 26px;  font-weight: bold;}#header h1 a {  text-decoration: none;  color: #f36;}#header h1 a:hover {  text-decoration: underline;  color: #63f;}#header p {  font-size: 12px;}

      说实话,第一次看到这种写法的时候,我就爱上LESS了。这不就是DOM的写法吗?这种写法无论后期维护、理解都是那么自然。是不是有一种本来就该如此的感觉?

      注意一下上面那个&符号。

    在Less中嵌套书写中有没有&是完全不一样的效果,有&时解析的是同一个元素或此元素的伪类,没有&解析是后代元素,我们一起来看一段代码

    #header {    &.fl{        float: left;    }    .mln {        margin-left: 0;    }}

      编译后:

    #header.fl { float: left; }#header .mln { margin-left: 0; }

      3.6 命名空间(Namespaces)

      这种方式支持我们通过命名空间的方式访问上面嵌套中的“函数”或“复用”。

    #header {    .a(@bgColor: red) {        background-color: @bgColor;    }    .b {        width: 100px;    }}.c {    #header > .a(yellow);     #header > .b;    height: 200px;}

      编译后:

    #header .b {  width: 100px;}.c {  background-color: #ffff00;  width: 100px;  height: 200px;}

       3.7注释( Comments

      单行://多行:/**/

     

    参考:

      http://www.w3cplus.com/css/less

      http://www.lesscss.net/article/document.html

    Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn