1. 技术文章
  2. Less-学习笔记

Less-学习笔记

由 旧街凉风 提交于 2019-12-05 10:26:25

这是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

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

五.其他

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

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

标签
less
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!