less css用法思维导图

Less 是一个Css 预编译器,可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性。

关于其具体用法,根据大漠文章,笔者总结如下:

放大局部后的截图:(空间有限,所以隐藏了所有的实例代码演示)

 

还有一点很重要:

下面结合自己的练习过程,具体叙述:

1:文件目录情况:

在客户端使用时候要这样引入HTML结构中:

注意:“Less样式文件一定要放在less脚本文件之前”。

2:源代码

2.1 HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet/less" type="text/css" href="style.less">
        <script src="js/less.js" type="text/javascript"></script>
        <title>less css应用</title>
    </head>
    <body>
        <h1>青青flye</h1>
        <p>行到水穷处,坐看云起时.</p>
        <p class="p2">喜欢中国风,热爱大前端,拒绝平庸。</p>
        <p class="p3">喜欢中国风,热爱大前端,拒绝平庸。</p>
        <div class="box1"></div>
        <div class="box2"></div>
        <div id="header">
            <h1><a href="">青青flye</a></h1>
            <p>less css练习</p>
        </div>
        <div id="header2">
            <h1><a href="">青青flye</a></h1>
            <p>less css练习</p>
        </div>
        <div id="header3">
            <h1><a href="">青青flye</a></h1>
            <p>less css练习</p>
        </div>

        <div id="header4">
            <h1><a href="">青青flye</a></h1>
            <p>less css练习</p>
        </div>
    </body>
</html>

style.less文件:

less.js文件:

less.js中代码有2400多行。

一、变量:

变量允许单独定义一系列通用的样式,然后在需要的时候去调用。做全局样式调整。

LESS源码:

编译后的CSS:

#header {
    color: #4D926F;
}
h2 {
    color: #4D926F;
}

混合(Mixins)

混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

LESS源码:

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
#footer {
    .rounded-corners(10px);
}

编译后的CSS:

#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
#footer {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

嵌套

我们可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。

LESS源码:

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

编译后的CSS:

#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;
}

函数和运算

运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值。

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

编译后的CSS:

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

关于less CSS的用法,还有更高级的功能,如:字符串插值,服务器端使用配置,JavaScript 表达式,避免编译等,这里可以了解官方网站。

less css用法思维导图,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。