Less 是什么?

Less is more,than CSS.

Less就是搞笑高效编写和维护CSS的一种语法。

1.下载Koala考拉,一款国人编写的less开发器。

2.可以用Sublime Text3编写Less文档。

好,开始学习啦!

1. 注释

/*会被编译到css文件的注释*/

//不会编译...

2.变量

声明:@变量名:值(+单位)

使用:@变量名

3.混合(有点像函数,又像宏定义)

把某个选择器(class或者id或者一些html标签)的效果应用在当前的选择器,

当前{

   .某个类;
}

可以加参数

.当前类{
.某个类(一个数);
}
.某个类(@参数1){
属性:@参数1;
}

参数可带默认值

.当前类{
.某个类(可省略);//括号不能省略
}
.某个类(@参数1:默认值){
属性:@参数1;
}

3.匹配模式(就像if判断)

.当前类{
.某个类(flag1,值);
//调用flag1的那个
}
.某个类(flag1,@参数1:默认值){
属性:@参数1;
}
.某个类(flag2,@参数1:默认值){
属性:@参数1;
}

固定带上的,也就是不管是flag1还是flag2,该类都有的属性。

.某个类(@_,@参数1:默认值){
属性:...
}

4.运算

就是变量的+-*/()运算。

width:@w+20;

可不带单位

5.嵌套

将下面css写法改为嵌套写法

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

这样嵌套

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

另外&符号表示上一层选择器

.list{
...
a{
...
&:hover{...}
}
}

6.@arguments变量

可以代表所有传参。

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

@arguments(40px);

这样就可以设置第一个参数。

7.避免编译 和 !important

~'这里面的内容不会编译出来'

可以用来放滤镜、不需要less计算出来的内容。

.test_important{
.border()!important;
}

它会在混合的所有属性后面加上!important

8.导入less/css文件

@import "ku" ;
//导入ku.less,编译时一起编译出来
@import "a.css";
//导入a.css,不编译,在css里还是有'导入a.css'的作用
@import (less) "a.css";
//导入a.css,编译。

9.加个括号可以让没用到的混合不编译

.xx(){...}

【前端】less学习的更多相关文章

  1. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  2. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  3. WEB前端开发学习:源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  4. web前端开发学习:jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  5. Web前端的学习介绍(截止今天还有Bootstrap没有学,要腾点时间解决掉)

    Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...

  6. web前端的学习误区

    web前端的学习误区  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...

  7. 绝版珍珍藏:web前端技术学习指南

    绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...

  8. web前端开发学习路线图

    Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...

  9. front-end 前端发展学习路线参考图

    front-end 前端发展学习路线参考图 学习的路程还很长~!

  10. 史上最全的web前端系统学习教程!

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

随机推荐

  1. jquery 地址栏链接与a标签链接匹配 特效代码总结(二)

    如题所述,当出现这样的功能,点击某个链接后,给跳转后的该链接地址添加样式,通过添加class为current来增加特殊样式. 如图所示:点击HTML+css3跳转后,给其添加如图样式: js代码如下: ...

  2. UESTC 424 AreYouBusy --混合背包

    混合三种背包问题. 定义:dp[i][k]表示体积为k的时候,在前i堆里拿到的最大价值. 第一类,至少选一项,dp初值全赋为负无穷,这样才能保证不会出现都不选的情况.dp[i][k] = max(dp ...

  3. UVA 562 Dividing coins --01背包的变形

    01背包的变形. 先算出硬币面值的总和,然后此题变成求背包容量为V=sum/2时,能装的最多的硬币,然后将剩余的面值和它相减取一个绝对值就是最小的差值. 代码: #include <iostre ...

  4. HDU 1878 欧拉回路

    并查集水题. 一个图存在欧拉回路的判断条件: 无向图存在欧拉回路的充要条件 一个无向图存在欧拉回路,当且仅当该图所有顶点度数都是偶数且该图是连通图. 有向图存在欧拉回路的充要条件 一个有向图存在欧拉回 ...

  5. Java Executor并发框架(三)ThreadPoolExecutor 队列缓存策略

    前面两篇讲解了线程池中线程创建后的运行情况,其中有一系列的策略来保证线程正常运行.但是我们知道线程池是可以设置容量的,而且这容量的设置也是至关重要的,如果容量设置的太小,那么将会影响系统的运行效率,如 ...

  6. 啊D工具语句 适合Access和Mssql注入

    啊D注入工具中使用的SQL注入语句 爆user )) )= | ***** ?Id)) : ?Id : Id 检查SA权限:)))) 爆当前库: )) -- 检查是否为mssql数据库:and exi ...

  7. Java NIO 概述

    Channel 和 Buffer 标准的Java IO编程接口是面向字节流和字符流的 而 NIO 是面向通道和缓冲区的 数据总是从通道中读到Buffer中,或者从Buffer写入通道中 NIO可以理解 ...

  8. C# 调用C++/MFC写的dll

    C#调用C++的非托管类的dll其实很简单基本就是固定的调用格式. dll的编写,首先是打开VS新建一个C++的控制台程序,下一步后选择dll以及空文档即可.然后就是添加一个类添加一个方法.方法排头固 ...

  9. [转]20位活跃在Github上的国内技术大牛

    FROM : http://blog.csdn.net/yaoxtao/article/details/38518933 20位活跃在Github上的国内技术大牛 本文列举了20位在Github上非常 ...

  10. tiff或tif文件的读取

    以下是VC下读取TIFF文件的代码 char* szFileName = "K:\\地图\\fujian-DEM\\fujian1.tif"; TIFF* tiff = TIFFO ...