目录
1.混合(Mixin)
1.1 Mixin的定义
Mixin在less官网中的定义为:混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。
但我感觉这个说法有点难理解,我们可以简单的理解就是函数,可以封装CSS代码,在别的选择器中调用,提高代码的重用性和可维护性.
Mixins 有点像函数,在定义后,可以通过名称调用.(也支持动态传参)
混合可以将一个定义好的class A 轻松 的引入到另一个class B 中,从而简单实现class B继承class A 中的所有属性,我们还可以带参数地调用,就像使用函数一样
先看一个简单的示例:
.color {
background-color:#58a;
color:18px;
}应用这个类(class)
.box {
width:100px;
height:50px;
.color();
}
.wrap {
width:100px;
height:50px;
border:1px solid red;
.color();
}通过这种方式就可以将color这个类应用到.box和.wrap中了..
接下来我们来详细的看一下Mixins的定义与调用等的具体方法.
1.2 Mixin的定义
混合有两种定义方式,一种是参数的定义,另一种是有参数的定义.
-
无参数的定义
.混合名() {
封装的css代码
}
-
有参数的定义
.混合名(@参数1:参数的默认值,@参数2:参数的默认值......) {
封装的css代码
}
1.3 调用混合
语法
选择器{
混合名(@参数)
}
// 使用混入
@baseColor: #369;
.box p {
.error(@baseColor, 30px)
}调用示例
值得注意的是在没有参数的情况下,不加括号也可以调用.
.size {
width: 100px;
height: 100px;
border:1px solid green;
}
#box{
.size(); //加括号调用
background-color: #58a;
}
.wrap {
.size; //没有参数的情况下不加括号也可以
background-color: skyblue;
}如果Mixin需要动态参数,则必须加括号传参:
.init(@width,@height,@color) {
width:@width;
height: @height;
color:@color;
}
@width:200px;
@height:200px;
@color:red;
.box1{
.init(@width, @height, @color);
background-color: skyblue;
}
.wrap {
.init(300px,100px,red);
border:1px solid blue;
}结果如下:
1.4 less可以直接继承在其他选择器中的样式
.box {
width:100px;
height:100px;
color:white;
}
.wrap {
.box; //.wrap会直接继承.box中已写的样式
backgorund-color:blue;
}Mixin中除了写样式选择器,还可以写变量
//Mixin里除了可以写样式,选择器, 还可以写变量
.mixin() {
@width: 100%;
@height: 200px;
}
.box1 {
.mixin();
width: @width;
height: @height;
border:1px solid red;
}Mixin除了返回变量,还可以返回Mixin.
// Mixins 里除了返回变量,还可以返回Mixins
#box(@color){
.wrap(){
width:500px;
height:100px;
background:@color;
}
}
.box1{
#box(red); // 执行第一个Mixin是为了能够使用里面的Mixin
.wrap(); // 第二个执行Mixin里面的Mixin
}3.5 可以在Mixin中使用选择器
.hover(@color){
&:hover{
background:@color;
}
}
.wrap{
width: 100px;
height: 100px;
background: red;
&:hover > span{ //注意在此处的&与冒号之间不能有空格,等价 于.wrap:hover >span
background:skyblue;
}
// .hover(skyblue) //如果只是当前元素添加hover效果,而不是给当前元素的子元素或兄弟元素添加,那么&可省略
}单独为box元素添加hover样式
.hover(@color){
&:hover{
background:@color;
}
}
.box1{
width: 200px;
height: 200px;
margin-top:20px;
background: skyblue;
&:hover{
background:red;
}
// .hover(red); //上下两种弄方式等效
}1.5 Mixin的默认值与不定参
-
默认值:
mixin中可以使用默认值,如果在没有传入参数的时候,则会使用默认值.
如果不设置默认值,MIxin的值在没有参数的情况下就会报错,且传参时实参的个数必须与设置的默认值的个数相等.
.size(@width : 100px, @height : 100px , @color : pink){
width: @width;
height: @height;
background-color: @color;
}
.box1 {
.size(50px,50px,#58a); //使用自己所传入的参数
border:3px solid pink;
}
.wrap {
.size; //使用已经设置的默认参数
color:#fff;
}-
不定参
...就是@reset剩余参数,会将剩余的所有参数都加到@arguments中
// ... 就是@reset 剩余参数, 会将剩余的所有参数都加到@arguments里
.boxShadow(...){
box-shadow: @arguments;
}
.box1{
.boxShadow(1px,4px,30px,red);
}
// @arguments是处理第一个实参外的所有实参的集合
.boxShadow(@width,...){
box-shadow: @arguments;
}
.wrap{
.boxShadow( 50px,1px,4px,30px,red);
}编译成css之后的结果:
.box1 {
box-shadow: 1px 4px 30px red;
}
.wrap {
box-shadow: 50px 1px 4px 30px red;
}
1.6 Mixin的判断条件
Less没有if / else 但是less具有一个when，and，not与“，”语法。
1. when 表示 在使用Mixin的时候必须满足 when后面的条件
#box(@width, @height, @color) when (@width > 100px){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(101px,50px,pink)
}2. 如果有两个必须同时满足的条件,使用 and
// 这里必须满足传递的宽度和颜色必须同时同满足条件才能执行Mixin
#box(@width, @height, @color) when (@width > 100px) and (@color = pink){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(100px,50px,skyblue)
}3. 如果需要排除某个条件才能使用Mixin,使用not
// 这里排除颜色为pink ,除了pink颜色值都可以运行Mixin
#box(@width, @height, @color) when not (@color = pink){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(100px,50px,skyblue)
}4. 如果需要多个条件只要满足一个就执行Mixin,使用 逗号,
// 虽然不满足宽度大于等于100px,但是满足为了颜色是skyblue 所以Mixin会执行
#box(@width, @height, @color) when (@width >= 100px),(@color = skyblue){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(50px,50px,skyblue)
}1.7 模式匹配
根据条件进行样式显示,类似JS中的switch,有些情况下,我们想根据传入的参数来改变混合的默认呈现.
比如:
相当于定义一个相同的混合名称,根据传入其他混合名称的不同,执行不同混合分,但是有一个公共的分支,任何一个分支都会调用
@_ 表示匹配所有,通常用于定义公共部分
语法:
模式匹配的定义
公共部分
.fun (@_, @color){
// 任何分支都会执行的公共部分
}
.fun( s1,@color){
// s1 分支独有代码
}
模式匹配的使用
h1{
.fun(s2, @color)
}
// 三角形公用代码
.sjx(@_, @color, @size) {
width: 0;
left: 0;
display: block;
border: @size solid transparent;
}
// 左三角形
.sjx(l, @color, @size) {
border-left-color: @color;
}
// 右三角形
.sjx(r, @color, @size) {
border-right-color: @color;
}
// 上三角形
.sjx(t, @color, @size) {
border-top-color: @color;
}
// 下三角形
.sjx(b, @color, @size) {
border-bottom-color: @color;
}
.trangle1 {
.sjx(t,#00a8ff, 20px) //通过传入不同的参数来产生不同方向的三角形
}
.trangle2 {
.sjx(b, pink, 20px)
}
.trangle3 {
.sjx(r, purple, 20px)
}
.trangle4 {
.sjx(l,#4cd137, 20px)
} 
2.嵌套(重要)
2.1 嵌套的定义
具有层级关系的CSS样式,CSS的层级是有HTML的结构决定的.
2.2 使用嵌套的优势
-
用在具有后代关系和父子 关系的选择器中
-
减少代码量,
-
代码结构更加清晰
2.3 使用示例
.border {
border:1px solid #58a;
}
.container {
width: 200px;
height: 300px;
.border();
ul {
list-style: none;
padding:0;
margin:0;
.border();
li {
width: 100px;
height: 80px;
background-color: khaki;
margin-top:20px;
span {
font-size: 20px;
color:green;
}
}
}
.box {
width: 200px;
height: 50px;
.border();
margin-top:30px;
background-color: lightcoral;
}
}编译之后的css代码:
.border {
border: 1px solid #58a;
}
.container {
width: 200px;
height: 300px;
border: 1px solid #58a;
}
.container ul {
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #58a;
}
.container ul li {
width: 100px;
height: 80px;
background-color: khaki;
margin-top: 20px;
}
.container ul li span {
font-size: 20px;
color: green;
}
.container .box {
width: 200px;
height: 50px;
border: 1px solid #58a;
margin-top: 30px;
background-color: lightcoral;
}
扫一扫
325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
