Less使用笔记

编译工具:koala(中国制造)

中文网:http://old.lesscss.net/article/document.html

1.less是什么?

less是css一种动态样式语言,属于css预处理语言的一种,它使用类似css的语法,为css赋予了动态语言的特征,如变量、继承、运算、函数等,更方便css的编写和维护。less可以在多种语言环境中使用,包括浏览器端、桌面客户端、服务器端。

2.语法

  2.1注释

    //:生成css的时候,不会被编译

    /**/:在生成css的时候,会被编译。

  2.2变量

    @符号:定义变量。

      例子:声明变量:@list:red;

        调用:.box{color:@list}

    混合:

      声明:.bor{border:solid 5px pink}

      调用:.box{color:@list; .bor; margin-left:100px}

    混合-带参数(带参数时调用时带括号):

      声明:

        .border_01(@border_width){border:solid red @border_width;}

        .border_02(@border_width:10px){border:solid green @border_width;}

      调用:

        .test{.border_01(30px);}

        .test1{.border_02();}

    匹配模式(类似于if else):

    例子:

     声明: 

    //三角朝上

    .triangle(top,@w:5px,@c:#ccc){border-width:@w;@border-color:transparent transparent @c transparent;border-style:dashed dashed solid dashed;}

    //三角朝下

    .triangle(bottom,@w:5px,@c:#ccc){border-width:@w;border-color:@c transparent transparent transparent ;border-style: dashed solid dashed dashed }

    //三角朝左

    .triangle(left,@w:5px,@c:#ccc){border-width:@w;@border-color:transparent @c transparent  transparent;border-style:dashed dashed  dashed solid;}

    //三角朝右

    .triangle(right,@w:5px,@c:#ccc){border-width:@w;border-color: transparent transparent transparent @c ;border-style:solid dashed dashed dashed }

@_:表明不管是调用哪个,我都会被带上(参数个数必须与上面相同)

  .triangle(@_,@w:5px,@c:#ccc){width:0px;height:0px;overflow:hidden;}

    调用:

    .sanjiao{.triangle(top)}

  2.3运算(+ — * %)

    例子:@test:300px; .box_04{width:(@test + 20) *5;color:#ccc-10;}

  2.4嵌套

    <ul class='list'><li><a><span></span></a></li></ul>

    例子:.list{

        width:600px;

        li{

        height:30px;

        } 

        a{

          float:left;

          //&代表上一层选择器

          &:hover{color:red;}

        } 

        span{

        float:right;

        }

       }

  2.5@arguments变量(包含了所有传递进来的参数,如果你不想单独处理每一个参数的话可以这样写)

    例子:

      .border_arg(@w:30px,@c:red,@xx:solid){border:@arguments}

      .test_arg{.border_arg()} .test_arg{.border_arg(40px)}

  2.6避免编译(有时候我们需要输出一些不正确的css语法或使用一些less不认识的专有语法。要输出这样的值时我们可以在字符串前加一个~)

    例子:.test{width:~'calc(300px-30px)';}

  2.7!important

    例子:

      .border_rad(@w:30px,@h:40px){width:@w;height:@h}

      .test_imp{.border_rad() !important;}

      

    

 

 
posted @ 2017-03-24 21:03  吃草的虾米  阅读(151)  评论(0编辑  收藏  举报