CSS预编译语言——less初级入门

一、什么是Less.css

Less.css是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
Less.css可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
官网地址

二、编译工具

Koaloa编译：国人开发的LESS/SASS编译工具。
Nodes.js库
浏览器端使用

三、 Less中的注释

可以使用CSS中的注释（//）—— 是会被编译**的，即在.css文件中可见
也可以用//注释 —— 不会被编译的，不会再.css中保留
//编译的时候会自动过滤掉
声明编码格式，防止乱码@charset "utf-8";

四、变量

Less中声明变量用@开头
less中，想声明变量的话，一定要用@开头例如:@变量名：值

@test_width:300px;
@test_height:300px;
.box{
  width: @test_width;
  height: @test_height;
  background-color: red;
}

五、混合 (Mixin)

混合(mixin)变量
例： .border{border:10px solid red;}
带参数的混合
.border-radius(@radius){css代码}
可设默认值
.border-radius(@radius:5px){css代码}
目的：以前写的（之前定义过的）样式拿过来重用

.border{
  border:5px solid pink;
}
.box{
  width: @test_width;
  height: @test_height;
  background-color: red;
  .border;
}
.box2{
  .box;//用.box的用样式
  margin-left: 100px;
}

混合可带参数

.border_02(@border_width){
  border: @border_width solid green;
}
.test_hunhe{
  .border_02(30px);
}

混合_带默认值

.border_03(@border_width:10px){
  border: @border_width solid yellow;
}
.test_hunhe_03{
  .border_03();
}
.border_radius(@radius:5px){
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
.radius_test{
  width: 200px;
  height: 200px;
  background-color: yellow;
  .border_radius(20px);
}

六、匹配模式

相当于js中的if，但不完全是；得满足条件后才能匹配

.sanjiao{
  width: 0;
  height: 0;
  overflow: hidden;//用来处理ie6最小高度问题
  border-width: 10px;
  border-color:transparent  transparent  red  transparent;//上面红色
  border-style: dashed  solid  dashed  dashed;//在ie6下有个黑色的边，解决方案，哪个方向有颜色哪个方向是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){
  width: 0;
  height: 0;
  overflow: hidden;
}
.sanjiao_02{
  .triangle(right,@w:50px);
}

匹配模式的定位

.pos(r){
  position: relative;
}
.pos(a){
  position: absolute;
}
.pos(r){
  position: fixed;
}

七、运算

任何数字、颜色或者变量都可以参与运算预算应该被包裹在括号中

@test_01:300px;
.test_01{
  width: @test_01  +  20px;//只有有一个人带单位就可以
  height: @test_01  -  20 * 5;
  position: absolute;
  left:(@test_01 + 20)*3;
  color: #ccc - 10;//less会转化为255,然后输出
}

八、嵌套规则

两种用法
&对伪类的使用 — hover或 focus
&对连接的使用— &_nav
正常我们写css的时候

.list{}
.list li{}
.list li a{}
.list li span{}

用了css之后我们就这样写

.list{
  width: 600px;
  list-style: none;
  margin: 30px auto;
  overflow: hidden;
  li{
    height: 30px;
    line-height: 30px;
    background-color: aqua;
    margin-bottom: 5px;
    /*a{
      float: left;
    }*/
    //嵌套层数越多，匹配的次数就越多，尽量少嵌套一些东西
  }
  a{
    float: left;
    &:hover{
      //&代表上一层选择器,&=a ;若父级是.title ,子级是.title_nav = &_nav
      color: red;
      background-color: blue;
    }
  }
  span{
    float: right;
  }
}

九、 @arguments

@arguments包含了所有传递进来的参数。
如果你不想单独处理每一个参数的话就可以像这样写
原来的办法传参

.border_arg(@w:30px,@c:red,@xx:solid){
  border: @w @c @xx;
}

现在的利用argguments

.border_arg(@w:30px,@c:red,@xx:solid){
  border: @arguments;
}
.test_arguments{
  .border_arg();
}
.test_arguments_2{
  .border_arg(40px);
}

十、避免编译

有的时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法
要输出这样的值我们可以在字符串前加上一个~

例如：width:~’calc(100% - 30px)’;
.test_03{
  width: calc(300px - 20px);
}
.test_04{
  width: ~'calc(300px - 20px)'; //想不让less算，让浏览器算  用在calc 或者滤镜
}

十一、 !important 关键字

回味所有混合所带来的样式，添上!important
调试的时候加，平时用的时候最好不要加

.test_important{
  .border_radius() !important;
}
====

十二、其他的常用东西

定义清浮动方式

.clearFix{
  &:after{
    content: "";
    display: block;
    clear: both;
  }
  zoom: 1;
}
.list{
  .clearFix;
}

ie6下需要将img的border:none；
定义浮动

.fl(@fl:left){
  float: @fl;
  display: inline;//解决ie6下双边距
}
.fr(@fr:right){
  float: @fr;
  display: inline;
}
.list{
  .clearFix();//这样的方式是为了区分less还是css
}

引入外部的文件(一些库或公共的)

.less文件引入
@import "base"; 默认后缀名是.less所以不用写
.css文件引入
@import(less) "a.css"; //注意(less)有空格，貌似我没用出来有待研究

CSS预编译语言——less初级入门