混合：
混合可以将一个定义好的classA轻松的引入到另一个classB中，从而简单实现classB继承classA中的所有属性。任何CSS中的class或者id都可以引入
Less：
.aWidth{width:400px;}
#aHeight{height:600px;}
p{
.aWidth;
#aHeight;
}
CSS：
.aWidth {
width: 400px;
}
#aHeight {
height: 600px;
}
p {
width: 400px;
height: 600px;
}
带选择器的混合集：
混合集不仅可以包含各种属性，而且可以包含各种选择器
Less：
.my-hover-mixin(){//加个空括号，不执行这段代码的编译
&:hover{
border:1px solid #ddd;
}
}
button{
.my-hover-mixin;
}
CSS：
button:hover {
border: 1px solid #ddd;
}
不输出混合集：
如果你想创建一个混合集，但是却不想让它输出到你的样式中，你可以在混合集的名字后面加一个括号。这句话怎么理解呢？对比以下两段代码：
代码一：
Less：
.my-mixin{
color:black;
}
/*看这里*/
.my-other-mixin{
background:white;
}
.class{
.my-mixin;
/*看这里*/
.my-other-mixin;
}
CSS：
.my-mixin {
color: black;
}
/*看这里*/
.my-other-mixin {
background: white;
}
.class {
color: black;
/*看这里*/
background: white;
}
代码二：
Less：
.my-mixin{
color:black;
}
/*看这里*/
.my-other-mixin(){
background:white;
}
.class{
.my-mixin;
/*看这里*/
.my-other-mixin;
}
CSS：带空括号的混合集并没有编译过来，但是可以编译到另一个引用它的选择器里面
.my-mixin {
color: black;
}
/*看这里*/
.class {
color: black;
/*看这里*/
background: white;
}
我们还可以带参数的调用，就像使用函数一样
Less：
.filter(@blur){
-webkit-filter:blur(@blur);
-moz-filter:blur(@blur);
-ms-filter:blur(@blur);
filter:blur(@blur);
}
.border-radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#section{
.border-radius;
/*如果写公共样式的时候没有设定具体的数值，引用的时候就必须设定，否则出不来效果*/
.filter(5px);
}
#footer{.border-radius(10px);}
CSS：
#section {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/*如果写公共样式的时候没有设定具体的数值，引用的时候就必须设定，否则出不来效果*/
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
带多个参数的混合
参数可以用逗号或分号分隔，但是推荐用分号分隔。
定义多个具有相同名称和参数数量的mixins是合法的，less会使用它可以使用的属性。如果使用mixin的时候只带一个参数，比如.mixin(red)，这个属性会导致所有的mixin都会强制使用这个明确的参数：
Less：
.mixin(@color) {
color-1: @color;
}
.mixin(@color; @padding: 2px) {
color-2: @color;
padding-2: @padding;
}
.mixin(@color; @padding; @margin: 5px) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
h1{
.mixin(red);
}
div{
.mixin(green;4px);
}
span{
.mixin(blue; 6px; 8px);
}
CSS：
h1 {
color-1: #ff0000;
color-2: #ff0000;
padding-2: 2px;
}
div {
color-2: #008000;
padding-2: 4px;
color-3: #008000;
padding-3: 4px;
margin: 5px 5px 5px 5px;
}
span {
color-3: #0000ff;
padding-3: 6px;
margin: 8px 8px 8px 8px;
}
命名参数
引用mixin时可以通过参数名称而不是参数的位置来为mixin提供参数值，任何参数都通过它的名称来引用，而不是特定的顺序
Less：
.mixin(@color:blue; @padding:10px; @margin:15px;){
color:@color;
padding:@padding;
margin:@margin;
}
.class1{
.mixin(@margin:20px; @color:#e4393c;)
}
.class2{
.mixin(#bf6da5; 60px;)
}
CSS：
.class1 {
color: #e4393c;
padding: 10px;
margin: 20px;
}
.class2 {
color: #bf6da5;
padding: 60px;
margin: 15px;
}
@arguments变量
arguments在Javascript中代表所有的参数，在这里也是同样的意思，只不过用法稍有区别。如果你不想单个单个的处理参数，这一特性是很有用的：
Less：
.box-shadow(@x:0; @y:0; @blur:1px; @color:#000;){
-webkit-box-shadow: @arguments;
-moz-box-shadow: @arguments;
box-shadow: @arguments;
}
.big-block{
.box-shadow(2px; 5px;)
}
CSS：
.big-block {
-webkit-box-shadow: 2px 5px 1px #000000;
-moz-box-shadow: 2px 5px 1px #000000;
box-shadow: 2px 5px 1px #000000;
}
!important关键字
在调用的混合集后面追加!important关键字，可以使混合集里面所有的属性都继承!important
Less：
.foo(@bg:#f00, @color:#666){
background:@bg;
color:@color;
}
.unimportant{
.foo;
}
.important{
.foo !important;
}
CSS：
.unimportant {
background: #ff0000;
color: #666666;
}
.important {
background: #ff0000 !important;
color: #666666 !important;
}
在这里，也可以体验一把Less在实际开发中关于提高代码维护，给我们带来的魅力
示例一
Less：
@pink:#f0f;
#header{
h2{
font-size:26px;
font-weight:bold;
}
.sub_title{
color:@pink;
}
.study_list{
color:@pink+111;
}
p{
font-size:12px;
a{
text-decoration: none;
&:hover{
border-width:1px;
color:@pink+666;
}
}
}
}
CSS：
#header h2 {
font-size: 26px;
font-weight: bold;
}
#header .sub_title {
color: #ff00ff;
}
#header .study_list {
color: #ff6fff;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
color: #ffffff;
}
示例二
Less：
@url:"../images";
.filter(@blur){
-webkit-filter:blur(@blur);
-moz-filter:blur(@blur);
-ms-filter:blur(@blur);
filter:blur(@blur);
}
.border-radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#loginForm{
width:80%;
margin:0 auto;
ul{
li{
margin:15px 0;
&:nth-child(2){
position:relative;
}
label{
color:#d4d2d2;
font-family:‘Microsoft Yahei‘;
font-weight:bold;
font-size:1.1em;
}
}
}
.imgBground{
width:100%;
height:28vh;
filter:url(blur.svg#blur);
.filter(5px);
.border-radius(10px);
background:url(‘@{url}/1.jpg‘);
}
CSS:
#loginForm {
width: 80%;
margin: 0 auto;
}
#loginForm ul li {
margin: 15px 0;
}
#loginForm ul li:nth-child(2) {
position: relative;
}
#loginForm ul li label {
color: #d4d2d2;
font-family: ‘Microsoft Yahei‘;
font-weight: bold;
font-size: 1.1em;
}
#loginForm .imgBground {
width: 100%;
height: 28vh;
filter: url(blur.svg#blur);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: url(‘../images/1.jpg‘);
}
详情参考官方文档：
http://www.css88.com/doc/less/features/#mixins-feature
时间： 2024-08-09 14:41:14