发表于： 2019-10-27 23:52:07
1 2188
今日完成:
.7.匹配模式
库定义的越复杂,业务代码就越简练,
例如:
定义一个三角形
less:
这是库
这是业务代码,相当于源生js
可以把库代码,单独设置一个less文件,
然后在业务代码less文件中,调用.
less调用语法:
@import"./文件名.less"
less提供的匹配模式:
可以在
库的样式参数中直接添加一个符号,相当于标识符
如:
less库中:
less:
如上图的"L"
具体用法,
如事例中是三角形,
当需要替换不同的三角形时
less库
如事例图,需要调取不同方向的三角形,
只需要更改less文件中的"L"为其它设定好的标志符,就可以
调用库中对应的数据.
这就是匹配模式的应用
ps:
1.less库中也可以再次设置混合模式
less库
less文件中:
调用两次
2.如果不想调用两次,
可以为不带输出的混合添加参数@_
其含义为:
less文件:
每次调用.triangle(R,40px,black)这个参数时,
在库中定义一个同名混合,即:.triangle(@_)
每次less调用.triangle(R,40px,black)时,就会带上less库中
同名的混合.triangle(@_),
并且,第一个参数必须是@_(@xx),不需要再主动调取
总结:匹配的两种形式
1.标志符,调用对应变量
2.@_,两个同名混合,调用一个,就会带上,另一个添加"@_"的同名混合
8.arguments变量
如事例图:
less文件:
.border是不带参数的混合,
再调用的类里为混合添加属性,如上图
注意:这样是错误的,无法编译为正常less文件
原因:参数需要一一对应(实参对形参)
哪怕随便写的,也要一一对应
编译为正常less文件
@arguments就像当与实参列表
如下:正常带参数的混合
大括号里面的参数可以用arguments代替
border:@arguments=border:@w @style @c
开始任务13
重写task13
遇到问题;
.flex(@j) {
display: flex;
align-items: center;
justify-content: @j;
}
直接调用:
.header{
height: 80px;
background:@bg-1;
.flex;
}
.flex报错
原因:对比任务12
.flex(@j: center) {
display: flex;
align-items: center;
justify-content: @j;
}
调用
.header {
.fixed(@c: rgb(95, 192, 205); );
top: 0;
.flex;
... ...
因为task13有个左对齐,所以就把主轴对齐.justify-content更改为直接填写样式,
直接调用.flex,想着他要有个默认的左对齐,结果报错.
总结起来就两点:
1.有默认左对齐,把.flex里.justify-content参数整个去掉,在声明display:flex的情况下,
自然默认左对齐
2.在添加了这个参数.justify-content,并且没有为参数添加默认值,就必须在调用的时候,
添加参数值,否则浏览器找不到,这个混合(不知道添加哪个参数值,浏览器就是找不到)
3.或者,参数有默认值,可以直接调用
解决:
添加参数值
思考:
鼠标悬停,改变本身属性,和改变其内的子元素的区别
1.鼠标悬停在盒子上,如果改变属性目标是盒子本身,那么hover与盒子类名之间,
就不能添加空格,否则失效
ps:可以简写,hover之后不用添加盒子类名,直接设置悬停后的样式
2.鼠标悬停在盒子上,目标是盒子内的子元素,那么hover与子元素的类名之间,
必须添加空格,否则失效
ps:隐藏的盒子必须被包裹在,设置悬停的盒子内
遇到问题:
下拉图标往左偏
原因:
子元素设置width:100%,在此基础上,增加边框,
子元素实际宽度就是100%+两条边框的宽度,
突破父元素宽度,,因为默认样式(左上)所以,
子元素是往右突破父元素的宽度:两条边框的宽度,
而下拉图标是占满整个父元素的宽度,所以显得
往左偏
解决:
添加box-sizing: border-box
意义为:边距向内设置,
类似内应阴影
具体表现为:
子元素内容+两条边框的宽度=100%父元素宽度
遇到问题:
css编译的有,但是不识别,网页不识别
ps:
less编译
编译为css文件,却没有在页面端实现,错误就在html文件,
没有编译为css文件,代码错误就在less文件
less文件报错后,设置的代码无法编译为css文件
遇到问题:
1.原先的代码,命名可读性太差,重构了一遍,
2.做的任务发现忘得差不多了,就自己用less从新做了一遍
3.大问题没有,语法错误啊什么的,就是三个页面,比较繁琐,用了较长的时间
收获:同上
明天计划:
开始任务14
返回列表
评论