文档章节

Less-学习笔记

透笔度
 透笔度
发布于 2015/10/16 13:41
字数 2177
阅读 169
收藏 7

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

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

五.其他

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

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

© 著作权归作者所有

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
MyBatis学习笔记系列教程

【MyBatis学习笔记】系列之预备篇一:ant的下载与安装 【MyBatis学习笔记】系列之预备篇二:ant入门示例 【MyBatis学习笔记】系列之一:MyBatis入门示例 【MyBatis学习笔记】系列之二:MyBat...

HenrySun
2016/10/15
160
0
《Pro ASP.NET MVC 3 Framework》学习笔记目录

《Pro ASP.NET MVC 3 Framework》简介: 作者: Adam Freeman 和 Steven Sanderson 出版社: Apress; New 平装: 820页 语种: 英语 ISBN: 1430234040 声明:笔记里面按我自己的理解翻译了大部分...

mszhangxuefei
2012/02/07
0
0
Golang学习笔记目录

Golang 介绍 Go语言是谷歌2009发布的第二款开源编程语言。 Go语言专门针对多处理器系统应用程序的编程进行了优化,使用Go编译的程序可以媲美C或C++代码的速度,而且更加安全、支持并行进程。...

ChainZhang
2017/12/26
0
0
《HTML5学习笔记简明版》系列技术文章整理收藏

《HTML5学习笔记简明版》系列技术文章整理收藏 HTML5学习笔记简明版来自博客园的汤姆大叔,在HTML5学习笔记简明版汤姆大叔对HTML5有更详细的讲解,收藏在这里供学习参考 1HTML5学习笔记简明版...

开元中国2015
2015/06/22
11
0
KVM虚拟化学习笔记系列文章列表

kvm虚拟化学习笔记(一)之kvm虚拟化环境安装 http://koumm.blog.51cto.com/703525/1288795 kvm虚拟化学习笔记(二)之linux kvm虚拟机安装 http://koumm.blog.51cto.com/703525/1289627 kvm虚拟...

蓝狐乐队
2015/03/19
163
0

没有更多内容

加载失败,请刷新页面

加载更多

JDBC+C3P0+DBCP 基本使用

1.概述 这篇文章主要说了JDBC的基本使用,包括Statement,PreparedStatement,JDBC的连接,Mysql创建用户创建数据表,C3P0的连接与配置,DBCP的连接与配置. 2.mysql的处理 这里的JDBC使用Mysql作为...

Blueeeeeee
54分钟前
5
0
MVC Linux下开发及部署

linux使用的是 Ubuntu 64 位 18.04.2 LTS 首先复制C:\Program Files (x86)\Embarcadero\Studio\20.0\PAServer 下 LinuxPAServer20.0.tar.gz 到 linux 目录下 运行链接编译程序 delphi环境配置......

苏兴迎
今天
9
0
3.控件及其属性

1.文本 2.按钮

横着走的螃蟹
今天
7
0
安装Genymotion模拟器慢的解决方案

第一步点击下载, C:\Users\Administrator\AppData\Local\Genymobile\genymotion.log 中搜索 ova 会发现这个文件 使用迅雷下载即可. 在 虚拟机中导入这个.ova 文件 即可安装...

chenhongjiang
今天
5
0
4. 彤哥说netty系列之Java NIO实现群聊(自己跟自己聊上瘾了)

你好,我是彤哥,本篇是netty系列的第四篇。 欢迎来我的公从号彤哥读源码系统地学习源码&架构的知识。 简介 上一章我们一起学习了Java中的BIO/NIO/AIO的故事,本章将带着大家一起使用纯纯的N...

彤哥读源码
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部