Heim  >  Artikel  >  Web-Frontend  >  Less用法指南_html/css_WEB-ITnose

Less用法指南_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:07:291054Durchsuche

  目录:

  •     什么是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

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn