定制你的bootstrap之--修改less文件2

上一篇《定制你的bootstrap之--修改less文件》说了2个基本的语法,一个是注释,一个是变量;

今天我们来说嵌套。你有没有这样的感觉,比方说一个菜单导航条,先是一个nav,nav下面有ul,ul下有li,li下还有a等,写起来是不是好烦,烦的不要不要的?!

如果换成下面的写法,感觉怎么样?

是不是看的好乱,什么东东?还不如我用css直接写呢!

错了,用这样的写法,会提高效率,少写许多重复的单词,而经过编译后和自己写的css是一样的。

嵌套的写法,我自己就理解为简化例如:ul li a {} 的写法,而效果是一样的。

解释一下 &:代表当前的选择器,例如上图中的&:hover 就是a:hover的样式;

>:代表是子选择器,例如上图就是 div>a{基本样式};

嵌套是不是好简单,下面说一下定义一个类;

你设想一下情景:

css3中的前缀写法,是不是可以把一个人逼疯?我不知道你怎么样?反正我是快了。

不管是圆角、转换、延迟等。。。。。

现在我们假如这样设计:

// 定义一个代码段,()里的内容是参数,参数中:后的内容是参数的默认值(没有传参数)

现在我们来定义一个圆角,比方说我们的网页里有许多这样的需求,有的是2px、有的是4px,5px等等。

这样,我们定义一段代码.roundedCorners,默认的是5px;如果传参数了,就是参数的值。

下面我们引用:

则,id为footer的元素的圆角为10px;

再有这样的需要,我们就引用.roundedCorners这段代码就可以了,记得改变你需要的参数呀,还有它是带单位的。

ps:less基本上差不多了,像判断等,应用的较少,就不说了。

下一篇,我们来说说如何编译,让我们的less变为css。