关于Less不得不说的几大初学者的教训

这几年,随着 Html5 和 CSS3 的兴起,随之而来多了一个叫做 less 的东西,开始我也不是很明白这是啥,听群里的大神门说着玩意儿可以在 CSS 里边写函数和变量,一直很奇怪是什么鬼,以为貌似CSS3里边也可以写一些函数。趁着放假,刚好拿来研究研究,发现确实还是不错的,今天就以博客的形式跟大家分享分享这几天的研究成果。

首先就是我们看到的 css 的自己标签定义方式,比如

<div class="one">
 <div class="two"><span></span></div>
</div>

在原来的css中我要给span下面的元素添加样式,需要写成下面的格式

.one .two span{...}

有了我们的 Less,我们可以这样写

.one{
    ....  // 样式
    .two{
        ...   // 样式
        span{
            ...  // 样式
        }
    }
}

好了,看到这里,兄弟们有没有感觉到他很酷。
其实远远不止这些,当然在写这个之前我们要先添加样式

// 1. 下载LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
// 2. 在页面中引入.less文件
<link rel="stylesheet/less" href="example.less" />
// 需要注意rel属性的值是stylesheet/less,而不是stylesheet。
// 3. 引入第1步下载的.js文件
<script src="lesscss-1.4.0.min.js"></script>

下面是他的变量书写格式

@color:#ff0000;// 定义一个颜色变量
// 引用的时候直接引用变量名就好了
.one{
    color:@color;
}

这个就是我们在less里常见的变量写法,你还可以对变量进行计算,比如:

@i=1;
.one{
    z-index:@i+2;
}

当然,如果你觉你在编写样式的时候,有很多样式是一样的那么,你可以写成函数的形式,这个我们把它称为混合,它可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。

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

发表评论

发表评论