less学习——了解less

luoyjx · 2014-12-23 22:06 · 2193次阅读

    什么是less?一种动态样式语言。

    LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。

    bootcss的less1.3.1的cdn地址(节约服务器带宽)

    http://www.bootcdn.cn/less.js

    这里学习bootcss上的案例,就用1.3.1的吧。

    <script src=“http://cdn.bootcss.com/less.js/1.3.1/less.min.js”></script>

    需要直接下载的可以用这个地址

    http://cloud.github.com/downloads/cloudhead/less.js/less-1.3.1.min.js

    在客户端使用

    引入你的 .less 样式文件的时候 要设置 rel 属性值为 “stylesheet/less” :

    <link rel=“stylesheet/less” type=“text/css” href=“styles.less”>

    然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:

    <script src=“less.js” type=“text/javascript”></script>

    注意你的less样式文件一定要在引入less.js前先引入。

    备注:请在服务器环境下使用!本地直接打开可能会报错!

    1.变量

    和其他的编程语言差不多,只不过less的变量以 @ 开头来定义,引用的时候也需要带上 @

    比如:

    

    less写法:

    

    

    @color : #fff;
    
    a {
        color: @color
    }

    生成:

    a {
        color: #fff;
    }

    2.混合(我觉得叫样式块引用直观点)

        a.可以将一个选择器中的样式引用到另一个选择器中,继承其中的样式,这个模板选择器还可以 接受动态传参 ,没有传则使用 默认值 。

        b.另外,css的样式可以和dom节点的结构一样的嵌套。

    例子A:样式块引用,并动态传参

    less写法:    

    .rounded-corners (@radius: 5px) {
        border-radius: @radius;
        -webkit-border-radius: @radius;
    }
    #header {
        .rounded-corners;
    }
    #footer {
        .rounded-corners(6px);
    }

    生成:

    #header {
        border-radius: 5px;
        -webkit-border-radius: 5px;
    }
    #footer {
        border-radius: 6px;
        -webkit-border-radius: 6px;
    }    

    例子B:以dom结构嵌套样式

    

    less写法:

     注意红色的&

    #header {
        h1 {
            font-size: 26px;
            font-weight: bold;
        }
        p { font-size: 12px;
            a { text-decoration: none;
                &amp;:hover { border-width: 1px }
            }
        }
    }

    生成:

    #header h1 {
        font-size: 26px;
        font-weight: bold;
    }
    #header p {
        font-size: 12px;
    }
    #header p a {
        text-decoration: none;
    }
    #header p a:hover {
        border-width: 1px;
    }

    

    3.函数&运算

    运算包括了, 属性 和 颜色 的运算。

    函数还没有具体研究,估计是js中封装的比较复杂的运算吧。

    

    例子:

    less写法:

    @the-border: 1px;
    @base-color: #111;
    @red: #842210;
    #header {
        color: @base-color * 3;
        border-left: @the-border;
        border-right: @the-border * 2;
    }
    #footer {
        color: @base-color + #003300;
        border-color: desaturate(@red, 10%);
    }

    生成:

    #header {
        color: #333;
        border-left: 1px;
        border-right: 2px;
    }    
    #footer {
        color: #114411;
        border-color: #7d2717;
    }    

    

    

    

    

收藏

暂无评论

登录后可以进行评论。没有账号?马上注册