LESS学习笔记(下)
来源:互联网 发布:现在淘宝什么最赚钱 编辑:程序博客网 时间:2024/03/29 12:43
// 通过传参进行匹配,类似js中的if语句
LESS预编译:
.trianger(top,@w:5px,@c:#f00){ border-width: @w; border-color: transparent transparent @c transparent; border-style: dashed dashed solid dashed;}.trianger(@_,@w:5px,@c:#f00){ width: 0; height: 0; overflow: hidden;}.pipei{ .trianger(top,10px);}.pos(r){ position: relative;}.pos(a){ position: absolute;}.pos(f){ position: fixed;}.pos-pp{ width: 50px; height: 50px; background: red; top: 0; right: 0; .pos(a);}CSS输出:
.pipei { border-width: 10px; border-color: transparent transparent #ff0000 transparent; border-style: dashed dashed solid dashed; width: 0; height: 0; overflow: hidden;}.pos-pp { width: 50px; height: 50px; background: red; top: 0; right: 0; position: absolute;}// 避免编译【~】
LESS预编译:
.test_calc1{ width: calc(100% - 20px); //直接这么预编译得到的width:80%;不是我们想要的}.test_calc2{ width: ~'calc(100% - 20px)';}CSS输出:
.test_calc1 { width: calc(80%);}.test_calc2 { width: calc(100% - 20px);}// !important 提升优先级
LESS预编译:
.border_radius(@radius:5px){ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius;}.test_imp{ .border_radius()!important;}CSS输出:
.test_imp { -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important;}
// merge合并属性(用逗号分隔)对于诸如background和transform之类的属性来说,merge非常有用。
LESS预编译:
.mixin(){ box-shadow+: 1px 1px 5px #f00;}.merge{ .mixin(); box-shadow+: 2px 2px 4px 5px #000; }CSS输出:
.merge { box-shadow: 1px 1px 5px #f00, 2px 2px 4px 5px #000;}// space合并属性(用空格分隔)
LESS预编译:
.mixin2(){ transform+_: scale(2);}.space{ .mixin2(); transform+_: rotate(15deg);}CSS输出:
.space { transform: scale(2) rotate(15deg);}// 改变选择器顺序(在&之前定义一个类选择器)
LESS预编译:
.head{ .menu{ border-radius: 5px; .no-radius & { color: red; } }}CSS输出:
.head .menu { border-radius: 5px;}.no-radius .head .menu { color: red;}// 组合使用(&还可以用于生成一个逗号分割列表的所有可能的选择器排列:)
LESS预编译:
a ,b ,c ,d{ color: red; & + &{ background: black; }}CSS输出:
a,b,c,d { color: red;}a + a,a + b,a + c,a + d,b + a,b + b,b + c,b + d,c + a,c + b,c + c,c + d,d + a,d + b,d + c,d + d { background: black;}差不多就介绍这么多了,第一部分的学习笔记更常用些,这节最后某些就不常用了,只做了解。
0 0
- LESS学习笔记(下)
- Less学习笔记
- less学习笔记
- less学习笔记
- Less学习笔记
- less 学习笔记入门
- less学习笔记
- Less学习笔记
- less学习笔记
- LESS学习笔记
- less学习笔记
- Less 学习笔记
- less学习笔记
- LESS学习笔记
- Less学习笔记1
- css之less学习笔记
- LESS学习笔记(上)
- Less学习笔记(一)
- poj 3253 Fence Repair 贪心
- Android Studio引入javax包问题
- Loadrunner错误代码27740_27995_27796学习笔记_SariyaLee
- 从Android framework层实现实现wifi无缝切换AP
- foundation框架
- LESS学习笔记(下)
- Ubuntu 15.10使用——系统安装
- Pig_1. Pig 基础知识 -- 待完善
- 一个松鼠大战游戏实现
- 25. Magento 创建新闻模块(5)
- jQuery validate 和artDialog的兼容问题
- 技术学习链接
- 基于 Open vSwitch 的 OpenFlow 实践
- android 在 AndroidManifest.xml 里 Service 元素的常见选项