首页 / HTML / Less常用基础知识-柠檬先生
Less常用基础知识-柠檬先生
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Less常用基础知识-柠檬先生,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4275字,纯文字阅读大概需要7分钟。
内容图文
![Less常用基础知识-柠檬先生](/upload/InfoBanner/zyjiaocheng/409/a5dc0ec85fa044d6ba145c260f3d1aa3.jpg)
也可以额使用css 中的注释(/**/) 这种方式是可以被编译出来的。
也可以使用// 注释 不会被编译的
变量
声明变量的话一定要用@开头 例如:@变量名称:值;
@test_width:300px;
.box{
width:@test_width;
height:@test_width;
background-color:yellow;
}
混合-(Mixin)
混合(mixin)变量
例如: .border{border:solid 10px red}
.box{
width:@test_width;
height:@test_width;
background-color:yellow;
.border;
}
带参数的混合
.border-radius(@radius){css 代码}
可认定默认值
.border-radius(@radius:5px){css 代码}
混合-可带的参数
.border_02(@border_width){
border:solid yellow @border_width;
}
.test_hunhe{
.border_02(30px);
}
混合 -默认带值
.border_03(@border_width:10px){
border:solid green @border_width;
}
.test_hunhe_03{
.border_03();
}
.test_hunhe_04{
.border_04(20px);
}
混合的例子
.border_radius(@radus:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
.radius_test{
width:100px;
height:40px;
background-color:green;
.border_radius();
}
匹配模式
.sanjiao{
width:0;
height:0;
overflow:hidden;
border-width:10px;
border-color:transparent transparent red transparent;
border-style:dashed dashed solid dashed;
}
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-colo:transparent transparent @c transparent
border-style:dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-colo:@c transparent transparent transparent
border-style:solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-colo: transparent @c transparent transparent
border-style: dashed solid dashed dashed;
}
.triangle(right,@w:5px,@c:#ccc){
border-width:@w;
border-colo: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
.trangle(@_,@w:5px,@c:#ccc){ //@_ 什么时候都带着的。
width:0;
height:0;
overflow:hidden;
}
.sanjiao{
.trangle(top,100px);
}
// 匹配模式- 定位
.pos(r){
position:relative;
}
.pos(a){
position:absolute;
}
.pos(f){
position:fixed;
}
运算
@test_01:300px;
.box_02{
width:@test_01 +20;
}
.box_02{
width:@test_01 -20;
}
.box_02{
width:(@test_01 20) *5;
color:#ccc -10;
}
嵌套:
.list{
width:600px;
margin30px auto;
padding:0;
list-style:none;
li{
height:30px;
line-height:30px;
background-color:pink;
margin-bottom:5px;
}
a{
float:left;
&hover{
color:red; //& 代表他的上一层选择器。
}
}
}
@arguments 变量
@arguments 包含了所有的传递进来的参数。
.border_arg(@w:30px,@c:red,@xx:solid){
.border:@arguments;
}
避免编译
.test_03{
width:~'calc(300px -30)';
}
!importan关键字
.test_important{
.border_radius() !important;
}
内容总结
以上是互联网集市为您收集整理的Less常用基础知识-柠檬先生全部内容,希望文章能够帮你解决Less常用基础知识-柠檬先生所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。