Less-学习笔记

这是less官网的介绍：

http://www.1024i.com/demo/less/document.html

你们都是在一块儿学习，最好的地方无疑就是官网，不过每一个人学习方式和基础不一样，以致于学完后掌握才会出现差别

开源中国提供了好的直接编译器：

http://tool.oschina.net/less

接下来就开始学习和了解less的使用和优点。

 一.@：变量的使用

1.原生css的一些不方便

咱们先看咱们常常写的css：

.aa{ height:200px; background:#066;}
.bb{ height:200px; background:#066;}
.dd{ height:200px; color:#066;width:100px;}

咱们发现，高度取值相同咱们却要写3次，颜色取值也是要写屡次，这时候若是css像语言同样，能够定义一个变量，这里面存放公用取值，假如能以下方式实现：

var hei1="200px";
var cor1="#066";
.aa{ height:hei1; background:cor1;}
.bb{ height:hei1; background:cor1;}
.dd{ height:hei1; color:cor1;width:100px;}

这样咱们就会很是的方便，在书写css的时候一样取值应用变量就ok了。

2.less带来的优点

经过@在less中咱们能够定义变量和赋值，而且被任何部分去引用，还能够二次定义替换和后定义被引用

less文件：

/*最基本变量声明*/
@nice-blue: #5B83AD;
#dd1 { color: @nice-blue; }
/*变量内容加法操做*/
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#dd2 { color: @light-blue; }
/*变量互相引用*/
@w10: "10px";
@10: 'w10';
@content: @@10;
#dd3 { width: @content; }
/*变量的做用域和二次赋值*/
@var: "10px";
#dd4 {
    @var: "20px";
    #dd5 {
        @var: "30px";
        width: @var;
        @var: "40px";
    }
    width: @var;
}
/*变量可按需去查找*/
#dd6 {
    width: @ww;
}
@ww: "200px";

 编译后css文件：

/*最基本变量声明*/
#dd1 {
  color: #5B83AD;
}
/*变量内容加法操做*/
#dd2 {
  color: #6c94be;
}
/*变量互相引用*/
#dd3 {
  width: "10px";
}
/*变量的做用域和二次赋值*/
#dd4 {
  width: "20px";
}
#dd4 #dd5 {
  width: "40px";
}
/*变量可按需去查找*/
#dd6 {
  width: "200px";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

 每一次注释下都是一种用法，

我的感受相互引用和二次赋值咱们用的不会太多，用起来彷佛麻烦了，

在二次定义中咱们发现了编译css的时候，{]做为做用域，一样遵循能够访问到外侧和当前层变量的设置，并不能访问到同级内部变量的设置。

二：Mixins：函数的使用

 1.原生css的一些不方便

咱们常常书写的css：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee1 {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee2 {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

咱们发现.bordered的定义在下面都会被使用到，若是咱们在#ee1和#ee2能直接获取到.bordered会方便得多，相似以下的功能：

var .bordered={
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee1 {
  color: #111;
  .bordered
}
#ee2 {
  color: red;
 .bordered
}

能够经过他的名字去引用到样式，不过咱们可能更须要他能够这样实现：

.bordered{
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  .width
}
.width{
  width:20px;
  .bordered
 }
#ee1 {
  color: #111;
  .bordered
}
#ee2 {
  color: red;
 .bordered
}

css之间能够经过类名等互相调用，而且拿到的是其中的样式

2.less带来的优点

less为咱们提供了这种处理办法，咱们能够定义出通用和选择器和对应样式，而且其余选择器引用这个通用选择器名字就能够引入里面的样式；咱们在这种通用选择器还能够设置参数，和函数同样，参数能够赋值给里面样式的取值

less文件：

/*最基本通用内容使用*/
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
#ee1 {
    color: #111;
    .bordered;
}
#ee2 {
    color: red;
    .bordered;
}
/*带参数的使用*/
.width2(@w) {
    width:@w;
}
#ee3 {
    color: #111;
    .width2("100px");
}
#ee4 {
    color: red;
    .width2("200px");
}
/*多个参数使用*/
.border3(@w,@sty,@color) {
    border:@w @sty @color;
}
#ee5 {
    color: #111;
    .border3("1px","solid","#000");
}
#ee6 {
    color: red;
    .border3("3px","solid","#ccc");
}
/*多个参数经过arguments统一赋值*/
.border4(@w,@sty,@color) {
    border:@arguments;
}
#ee7 {
    color: #111;
    .border4("1px","solid","#000");
}
#ee8 {
    color: red;
    .border4("3px","solid","#ccc");
}

css文件：

/*最基本通用内容使用*/
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee1 {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#ee2 {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
/*带参数的使用*/
#ee3 {
  color: #111;
  width: "100px";
}
#ee4 {
  color: red;
  width: "200px";
}
/*多个参数使用*/
#ee5 {
  color: #111;
  border: "1px" "solid" "#000";
}
#ee6 {
  color: red;
  border: "3px" "solid" "#ccc";
}
/*多个参数经过arguments统一赋值*/
#ee7 {
  color: #111;
  border: "1px" "solid" "#000";
}
#ee8 {
  color: red;
  border: "3px" "solid" "#ccc";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

arguments统一变量参数赋值，针对复合样式是很是有用的，不带参数处理，那就是彻底引用样式了，带了参数，咱们能够在使用通用样式名的时候去根据状况去赋值

3.less函数mixin的其余提供

：：：：：!important咱们能够加上，这个优先权的设置在ie上有时候仍是要用的

：：：：：在定义通用加参数咱们能够认识默认值的，引用时不传入实际参数就会采用默认取值

less：

/*带参数的使用*/
.width2(@w:20px) {
    width:@w;
}
#ee3 {
    color: #111;
    .width2()!important;
}
#ee4 {
    color: red;
    .width2("200px");
}

css：

/*带参数的使用*/
#ee3 {
  color: #111;
  width: 20px !important;
}
#ee4 {
  color: red;
  width: "200px";
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

 

三：嵌套使用

1.原生css的一些不方便

 针对层级嵌套，咱们原生css写法：

.box{height:200px;}
.box div{ width:300px;}
.box div a{ color:#0C9;}

 咱们会以为选择器太多重复了，但愿能实现以下的处理：

.box{height:200px;div{ width:300px;a{ color:#0C9;}}}

 他的后代元素就放在定义里面

2.less带来的优点

less帮咱们实现了这种免去重复选择器的功能

less文件：

.box{
 height:200px;
 div{ 
  width:300px;
  a{ color:#0C9;}
 }
}

css文件：

.box {
  height: 200px;
}
.box div {
  width: 300px;
}
.box div a {
  color: #0C9;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

3.less嵌套伪类和筛选处理

：：：：：：&的使用，咱们看下面几种原生css写法

.box div a {
  color: #0C9;
}
.box div a.fous {
  width: 200px;
}
.box div a:hover {
  color: #000;
}

伪类效果和筛选器的使用是很是常见的，伪类除了：hover还有：first：last：active等；

筛选的实现就是.a.b或者div.a或者div.a.b.c这种形式

less也为咱们提供了支持，就是在选择器前加上 &，less文件：

.box{
 height:200px;
 div{ 
  width:300px;
  a{ color:#0C9;
   &.fous{width: 200px;}
   &:hover{color: #000;}
  }
 }
}

生成的css文件：

.box {
  height: 200px;
}
.box div {
  width: 300px;
}
.box div a {
  color: #0C9;
}
.box div a.fous {
  width: 200px;
}
.box div a:hover {
  color: #000;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

在定义样式里面经过 & 咱们就会把 &后面选择器升一级，而且紧跟在上一级后面造成新的定义

4.less嵌套媒体查询处理

原生css写法：

@media screen and (max-width : 500px) {
 a{ color:#0C9;}
}
@media screen  and (min-width : 501px) and (max-width : 1024px) {
 a{ color:#000;}
}
@media screen and (min-width : 1024px) {
 a{ color:#ddd;}
}

咱们经过less去书写：

a{ 
 @media screen and (max-width : 500px) {
  color:#0C9;
 }
 @media screen  and (min-width : 501px) and (max-width : 1024px) {
  color:#000;
 }
 @media screen and (min-width : 1024px) {
  color:#ddd;
 }
}

对比原生其实优点不是很大，原本这就是个麻烦的东西，能够原谅

编译后的css：

@media screen and (max-width: 500px) {
  a {
    color: #0C9;
  }
}
@media screen and (min-width: 501px) and (max-width: 1024px) {
  a {
    color: #000;
  }
}
@media screen and (min-width: 1024px) {
  a {
    color: #ddd;
  }
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

四.less系统函数的使用

这个就很是简单了，和说的同样就是用于计算和转化的，

系统函数手册地址：http://www.1024i.com/demo/less/reference.html 

咱们使用几个测试一下：

@aa:0.5;
.dd{height:percentage(@aa);}
@bb:0.8;
.ee{height:pow(@bb,2);}

编译后：

.dd {
  height: 50%;
}
.ee {
  height: 0.64;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

五.写一个小页面

html部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less</title>
<link rel="stylesheet" type="text/css" href="less.css"/>
</head>
<body>
 <div class="demo">
     <div class="demo-header">
         <span class="left">标题</span>
            <a href="#2" class="right">更多</a>
        </div>
        <div class="demo-con">
         <a href="#2">1111111111</a>
            <a href="#2">22222222222</a>
            <a href="#2">33333333333</a>
            <a href="#2">4444444444</a>
            <a href="#2">555555555</a>
        </div>
    </div>
</body>
</html>

书写less：

.left{float:left;}
.right{float:right;}
@colorlink:#ddd;
@colorhover:#ffa;
.he50{
 height:50px;
 line-height:50px;
}
.demo{
 width:500px;
 height:500px;
 .demo-header{
  .he50;
  span{
   color:#000;
  }
  a{
   color:@colorlink;
   float:right;
   margin:0 10px;
   &:hover{color:@colorhover;}
  }
 }
 .demo-con{
  a{
   display:block;
   .he50;
   color:@colorlink;
   &:hover{color:@colorhover;}
  }
 }
}

转义后：

.left {
  float: left;
}
.right {
  float: right;
}
.he50 {
  height: 50px;
  line-height: 50px;
}
.demo {
  width: 500px;
  height: 500px;
}
.demo .demo-header {
  height: 50px;
  line-height: 50px;
}
.demo .demo-header span {
  color: #000;
}
.demo .demo-header a {
  color: #ddd;
  float: right;
  margin: 0 10px;
}
.demo .demo-header a:hover {
  color: #ffa;
}
.demo .demo-con a {
  display: block;
  height: 50px;
  line-height: 50px;
  color: #ddd;
}
.demo .demo-con a:hover {
  color: #ffa;
}
"Administrator" Sid: S-1-5-21-779701839-1365383676-4129786368-500

很简单，很差看，最简单使用了嵌套，变量和函数通用处理，也可见得出项目越大的话使用会更加方便。

五.其余

咱们只是最简单的使用和了解经常使用的方法，高级的都被去掉了，好比函数里面的处理，嵌套&的高级使用等

除了高级的其实还有外部文件引用等。