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. ABP入门系列(5)——创建应用服务

    一.解释下应用服务层 应用服务用于将领域(业务)逻辑暴露给展现层.展现层通过传入DTO(数据传输对象)参数来调用应用服务,而应用服务通过领域对象来执行相应的业务逻辑并且将DTO返回给展现层.因此,展现 ...

  2. iOS下使用SHA1WithRSA算法加签源码

    首先了解一下几个相关概念,以方便后面遇到的问题的解决: RSA算法:1977年由Ron Rivest.Adi Shamirh和LenAdleman发明的,RSA就是取自他们三个人的名字.算法基于一个数 ...

  3. 18SpringMvc_在业务控制方法中收集数组参数

    这篇文章我们要解决的问题的多选框选中,并批量删除. 比如:

  4. android中scrollTo和scrollBy的理解

    protected   int  mScrollX;    //该视图内容相当于视图起始坐标的偏移量   , X轴 方向 protected   int  mScrollY;    //该视图内容相当 ...

  5. 【转】【C#】在 Windows 窗体 DataGridView 单元格中承载控件

    using System; using System.Windows.Forms; public class CalendarColumn : DataGridViewColumn { public ...

  6. [转]服务器自动化操作 RunDeck

    From : http://www.oschina.net/p/rundeck/similar_projects?sort=view&lang=25 RunDeck 是用 Java/Grail ...

  7. use AP_VENDOR_PUB_PKG.Update_Vendor_Site_Public to u ORA-01722: invalid number in Package AP_VENDOR_PUB_PKG Procedure Update_Vendor_Site_Public

    ORA-01722: invalid number in Package AP_VENDOR_PUB_PKG Procedure Update_Vendor_Site_Public 发现此问题的经过: ...

  8. 经典趣味24点游戏程序设计(python)

    一.游戏玩法介绍: 24点游戏是儿时玩的主要益智类游戏之一,玩法为:从一副扑克中抽取4张牌,对4张牌使用加减乘除中的任何方法,使计算结果为24.例如,2,3,4,6,通过( ( ( 4 + 6 ) - ...

  9. 20135223/20135234/20135229小组——亚博 Arduino智能小车实践报告

    实验名称:Arduino智能小车组装和综合测试 实验小组成员:20135223何伟钦 20135234马启扬 20135229吕松鸿 实验日期:2015.10.27—2015.11.3 实验时长:24 ...

  10. 系统级I/O 第八周11.9~11.15

    第十章 系统级I/O cp1 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include ...