Less 常用基础知识_html/css_WEB-ITnose
也可以额使用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;
}
上一篇: PHP常用的四种排序方法及二种查找方法
下一篇: 衡量企业应用数据库性能的6大指标
推荐阅读
-
CSS常用布局整理(二)_html/css_WEB-ITnose
-
css常用技巧【持续更新】_html/css_WEB-ITnose
-
HTML常用标签之超链接标签_html/css_WEB-ITnose
-
HTML常用基础知识点
-
CSS的class、id、css文件名的常用命名规则_html/css_WEB-ITnose
-
java学习篇之-css基础知识(一)_html/css_WEB-ITnose
-
Bootstrap定制(二)less基础语法_html/css_WEB-ITnose
-
HTML meta标签常用属性整理_html/css_WEB-ITnose
-
css扩展技术:Less和Sass的区别_html/css_WEB-ITnose
-
CSS常用属性和值_html/css_WEB-ITnose