当前第2页 返回上一页
在 css 中经常会用到子代选择器，效果可能是这样的：
1 2 3 4 5 | .container {
width: 1024px;}.container > .row {
height: 100%;}.container > .row a {
color: #f40;}.container > .row a:hover {
color: #f50;}
|
上面的代码嵌套了很多层，写起来很繁琐。可如果用 less 的嵌套语法来写这段代码，就比较简洁。
嵌套的举例如下：
1 2 | main.less:
.container { width: @containerWidth; > .row { height: 100%; a { color: #f40; &:hover { color: #f50; } } } div { width: 100px; .hello { background-color: #00f; } }}
|
将上面的less文件编译为 css 文件后，自动生成的代码如下：
1 2 | main.css
.container { width: 1024px;}.container > .row { height: 100%;}.container > .row a { color: #f40;}.container > .row a:hover { color: #f50;}.container div { width: 100px;}.container div .hello { background-color: #00f;}
|
相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
JavaScript里最常用的20条正则表达式
vscode的常用设置
10进制数如何转为16进制
JS如何实现自定义鼠标右击菜单
以上就是CSS预处理器之Less详解的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
如何使用less实现随机下雪动画详解
谷歌浏览器不支持css设置小于12px的文字怎么办？
怎样让前端界面自动清理js、css文件的缓存
怎么用css设置记录用户密码
less是什么
html5和css3扁平化风格博客教程的资源分享
怎样实现meta标签中的viewport来控制设备屏幕的css属性
node sass是干嘛的
如何使用css对td中input的宽度设置
关于css里的块级格式
更多相关阅读请进入《sass》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS预处理器之Less详解
