准备写以不积跬步为标题的学习文章，勉励自己。
注释
在Less里，有两种注释：
/*我是注释，我是被编译的*/
//我不会被编译
变量
@title_width:300px
//使用的的话
.box{
width:@title_width;
height:@title_width;
}
混合
比如当我们定义了一个样式是这样：
.border{
border:solid 5px pink;
}
//然后我们怎么使用呢？
.box {
width:@title_width;
height:@title_width;
.border;
}
这样就可以了
混合 带参数
.border_2 (@border_width){
border:solid yellow @border_width;
}
//使用
.box {
width:@title_width;
height:@title_width;
.border_2(30px);
}
混合 带默认值
.border_3(@border_width:10px){
border:solid green @border_width;
}
//使用
.box {
width:@title_width;
height:@title_width;
.border_3();
}
//不会报错
注意：当你纯粹使用一个class值的时候不需要带括号，但是当你需要传入一些值的时候，就需要带括号了。
匹配模式
相当于JS中的if，但不完全是，满足条件后才能匹配
用css写个三角：
.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-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
//向下的三角
.triangle(bottom,@w:5px,@c:#ccc){
border-width: @w;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
//向左的三角
.triangle(left,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
//向右的三角
.triangle(right,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
//无论你调用上面哪个方法，一定要带上我，但是里面的参数@_是固定格式
.triangle(@_ , @w: 5px, @c: #ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
像不像java里函数的重载呢？你输入特定的参数，就会调用特定的方法。
我们怎么使用呢？
.sanjiao{
.triangle(top);
}
匹配模式--定位
.pos(r){
position:relative;
}
.pos(a){
position:relative;
}
.pos(f){
position:relative;
}
//使用
.pipei{
width:200px;
height:200px;
background-color:green;
.pos(f);
}
运算
less中可以使用加减乘除来进行运算
@test_w:300px;
.box_02{
width:@test_w * 20;
color:#ccc - 10; //颜色值计算很少用到
}
css就是
.box_02{
width:320px;
}
嵌套
简单的例子：
.list {
width:600px;
height:30px auto;
padding:0;
list-style:none;
li{
height:30px;
line-height:30px;
background-color:pink;
margin-bottom:5px;
padding:0 10px;
}
a {
float:left;
//我们可以这样添加hover
&:{
color:red;
}
}
span {
float:right;
}
}
&就代表当前的父标签，代表上一层选择器。
@arguments 变量
@arguments包含了所有传递进来的参数。
如果你不想单独处理每一个参数的话就可以像这样写：
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
//使用
.test_arguments{
.broder_arg();
}
避免编译
有时候我们需要输出一些不正确的css语法或者使用一些LESS不认识的专有语法。
要输出这样的值我们可以在字符串前加上一个~.例如：
width:~ 'calc(100%-35)'
这个计算公式我们不需要它计算，而是交给浏览器计算，所以需要让它原封不动的输出。
!important关键字
会为所有混合所带来的样式，添加上!important
.test_important{
.border_radius() !important;
}
随手写的常用布局
.flex(){
flex:1;
-ms-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
}
//申明flex布局
.display_flex(){
display: flex;
display:-webkit-flex;
display: -ms-flex;
display: -moz-flex;
}
//申明flex横向布局
.flex_row(@row_value:row){
.display_flex();
flex-direction: @row_value;
-webkit-flex-direction: @row_value;
-ms-flex-direction: @row_value;
}
//申明flex竖向布局
.flex_column(@column_value:column){
@display_flex;
flex-direction: @column_value;
-webkit-flex-direction: @column_value;
-ms-flex-direction: @column_value;
}
//justify-content属性---主线方向的对齐方式
.justify-content(@justify_value:center){
justify-content: @justify_value;
-webkit-justify-content: @justify_value;
-ms-flex-direction: @justify_value;
}
//align-items属性--垂直方向的对齐方式
.align-items(@align_value:center){
align-items: center;
-webkit-align-items: center;
-ms-flex-align: center;//TODO 待测试
}
//横向居中对齐
.base_row_justify_center(){
.flex_row();
.justify-content()
}
//竖向居中对齐
.base_column_justify_center(){
.flex_column();
.justify-content();
}
//竖向垂直居中对齐
.base_column_align_center(){
.flex_column();
.align-items();
}
//横向垂直居中对齐
.base_row_align_center (){
.flex_row();
.align-items();
}
//居中
.base_center (){
.flex_row();
.justify-content();
.align-items();
}
/*经常使用的标题对向展开*/
.base_row_title_layout(){
.base_row_align_center();
.justify-content(space-between)
}
网友评论