不积跬步--Less的学习笔记

准备写以不积跬步为标题的学习文章，勉励自己。

注释

在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)
}