详解less中的变量
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详解less中的变量相关的知识，希望对你有一定的参考价值。
变量是less入门基础知识，他适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。
@border-color : #b5bcc7;
.mythemes tableBorder{
border : 1px solid @border-color;
}
.mythemes tableBorder {
border: 1px solid #b5bcc7;
}
生命周期
局部变量还是全局变量
查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局
@width : 20px;
#homeDiv {
@width : 30px;
#centerDiv{
width : @width;// 此处应该取最近定义的变量 width 的值 30px
}
}
#leftDiv {
width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}
#homeDiv #centerDiv {
width: 30px;
}
#leftDiv {
width: 20px;
}
列表类型
@colors: #FFF, #0F0, #F0F;.skin{color: extract(@colors,0);height: 12px*length(@colors);
}
.skin{color: #FFF;height: 36px;
}
mixins
在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样
定义一个样式选择器
.roundedCorners(@radius:5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
在另外的样式选择器中使用
#header {
.roundedCorners;
}
#footer {
.roundedCorners(10px);
}
#header {
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#footer {
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
Mixins 其实是一种嵌套，它允许将一个类嵌入到另外一个类中使用，被嵌入的类也可以称作变量，简单的讲，Mixins 其实是规则级别的复用。
Mixins 还有一种形式叫做 Parametric Mixins（混入参数），LESS 也支持这一特性
// 定义一个样式选择器
.borderRadius(@radius){
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
// 使用已定义的样式选择器
#header {
.borderRadius(10px); // 把 10px 作为参数传递给样式选择器
}
.btn {
.borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
}
#header {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.btn {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
像 javascript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
box-shadow: @arguments;
}
#header {
.boxShadow(2px,2px,3px,#f36);
}
#header {
-moz-box-shadow: 2px 2px 3px #FF36;
-webkit-box-shadow: 2px 2px 3px #FF36;
box-shadow: 2px 2px 3px #FF36;
}
当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？
采用了命名空间的方法来避免重名问题
#mynamespace {
.home {...}
.user {...}
}
这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。
#bundle {
.button () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white
}
}
.tab { ... }
.citation { ... }
}
引入.button
#header a {
color: orange;
#bundle > .button;
}
嵌套的规则
<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>
#home{
color : blue;
width : 600px;
height : 500px;
border:outset;
#top{
border:outset;
width : 90%;
}
#center{
border:outset;
height : 300px;
width : 90%;
#left{
border:outset;
float : left;
width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}
#home {
color: blue;
width: 600px;
height: 500px;
border: outset;
}
#home #top {
border: outset;
width: 90%;
}
#home #center {
border: outset;
height: 300px;
width: 90%;
}
#home #center #left {
border: outset;
float: left;
width: 40%;
}
#home #center #right {
border: outset;
float: left;
width: 40%;
}
对伪元素
a {
color: red;
text-decoration: none;
&:hover {// 有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素
color: black;
text-decoration: underline;
}
}
a {
color: red;
text-decoration: none;
}
a:hover {
color: black;
text-decoration: underline;
}
原文来自：简书／dadadahui
以上是关于详解less中的变量的主要内容，如果未能解决你的问题，请参考以下文章