less初学手记

less语言学习手记

工具下载

在less学习中,我们都会需要随时编译我们的less文件,查看生成的css样式表是否正确,以及是否符合我们的要求.推荐一款编译软件供大家下载使用:koala,本软件支持自动编译和报错机制,会帮助我们更加高效的学习less

注释

less的注释和我们通常使用的javascript的注释风格一致.如:

/*我是一条注释*/
//我也是一条注释

但是值得注意的是 '/**/' 这样的写法在less中还有不同的用法:

//admin.less
/*我是一条注释,但不会被编译显示在对应的css文件中*/
a{color:#ccc}
---------------------------------------------
//admin.css
a{color:#ccc}

'//' 这样的注释写法可以被编译在对应css文件中

//admin.less
//这是注释部分
a{color:#ccc}
-------------
//admin.css
//这是注释部分
a{color:#ccc}

变量

less中存在像JavaScript中变量这样的概念,变量会使我们的css更易维护(如更改皮肤色值,字体大小等),想要在less中声明变量必须以@开头 例如:@变量名:值;

//admin.less
@te_width:300px;
.aa{width: @te_width;}
----------------------
//admin.css
.aa {
  width: 300px;
}

混合

less中对某一个样式类混合其他样式类名的书写方式,减少样式重复:

//admin.less
.cc{width: @te_width;.bb}
.bb{line-height: 20px;}
------------------------
//admin.css
.cc {
  width: 300px;
  line-height: 20px;
}
.bb {
  line-height: 20px;
}

混合---可带参数

同样的我们还可以对混合应用的样式类带参数使用,更灵活,更高效:

//admin.less
.border_2(@border_width){//相当于声明了一个名字叫border_2的方法,这个方法可以接收一个参数@border_width用来改变border的边框大小
    border:@border_width solid pink;
}
.hunhe{//在需要用到的地方使用方法border_2,并传递一个具体的参数20px
    .border_2(20px);
}
-------------------------------------------------------------------------
//admin.css
.hunhe {
  border: 20px solid #ffc0cb;
}

混合---带默认值参数

默认参数也叫做缺省值意思指在方法的使用中可以不传递任何参数的情况下,按照默认参数的值执行该方法:

//admin.less
.border_3(@border_width:10px){//参数的默认值写在变量的后面,用':'分隔
    border:@border_width solid pink;
}
.hunhe2{
    .border_3();//不传递参数执行默认
}
-------------------------------------------------------------------
admin.css
.hunhe2 {
  border: 10px solid #ffc0cb;//不传递参数执行默认10px
}

匹配模式

形如方向分为上下左右,对于每个方向指向的城市也会有所不同,面对这样的问题就需要用到匹配模式,下面用一个css实现三角形的例子来说明:

//admin.less
//先声明四个方向箭头的方向,边框大小,颜色等
.tra(top,@a:5px,@c:#ccc){//向上箭头
    border-width: @a;
    border-color: transparent transparent @c transparent;
    border-style: solid dashed dashed dashed; //兼容ＩＥ６效果
}
.tra(bottom,@a:5px,@c:#ccc){//向下箭头
    border-width: @a;
    border-color: @c transparent transparent transparent;
    border-style: solid dashed dashed dashed; //兼容ＩＥ６效果
}
.tra(left,@a:5px,@c:#ccc){//向左箭头
    border-width: @a;
    border-color:transparent @c transparent transparent;
    border-style: dashed dashed dashed solid; //兼容ＩＥ６效果
}
.tra(right,@a:5px,@c:#ccc){//向右箭头
    border-width: @a;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid; //兼容ＩＥ６效果
}
//在所需要用到的类里面直接使用并传递方向的参数
.sanjiao{
    .tra(bottom)
}
//同时也可以使用默认值的写法定义默认效果:
.tra(@_,@a:5px,@c:#ccc){//向右箭头
    width: 0;
    height: 0;
    overflow: hidden;
}
-------------------------------------------------------
//admin.css
.sanjiao {
  border-width: 5px;
  border-color: #cccccc transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  width: 0;
  height: 0;
  overflow: hidden;
}

less中的运算

在less中可以使用加减乘除等算数运算来计算想要的数值大小

//admin.less
@tex_01:300px;
.box_2{
    width: @tex_01+20;//支持加减乘除元算
    color: #ccc-10;//色值亦可以进行运算
}
-----------------------------------------
admin.css
.box_2 {
  width: 320px;
  color: #c2c2c2;
}

less的嵌套

嵌套的使用可以更加方便快捷的生成多个层级关系的css样式:

//admin.less
.list{
    width: 100px;
    a{
        padding: 0;
    }
}
.list2{
    width: 100px;
    a{
        padding: 0;
        &:hover{//&代表上一层选择器
            color: red;
        }
    }
}
--------------------
//admin.css
.list {
  width: 100px;
}
.list a {
  padding: 0;
}
.list2 {
  width: 100px;
}
.list2 a {
  padding: 0;
}
.list2 a:hover {
  color: red;
}

@arguments

默认使用所有的参数:

//admin.less
.arg(@w:30px,@c:#ccc,@s:solid){
    border:@arguments
}
.ccc{
   .arg();
}
----------------------------
//admin.css
.ccc {
  border: 30px #cccccc solid;
}

避免编译

遇到不想被编译的内容时可以使用'~'来做标记:

//admin.less
.te_03{
    width: ~'calc(300px-30)';
}
--------------------------
//admin.css
.te_03 {
  width: calc(300px-30);
}

!important

为提升样式优先级时使用:

//admin.less
.ccc{
   .arg()!important;
}
------------------------
//admin.css
.ccc {
  border: 30px #cccccc solid !important;
}