【前端】less学习
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学习的更多相关文章
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- WEB前端开发学习:源码canvas 雪
WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...
- web前端开发学习:jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- Web前端的学习介绍(截止今天还有Bootstrap没有学,要腾点时间解决掉)
Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...
- web前端的学习误区
web前端的学习误区 网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...
- 绝版珍珍藏:web前端技术学习指南
绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
- web前端开发学习路线图
Web前端是一个入行门槛较低的开发技术,但更是近几年热门的职业,web前端不仅薪资高发展前景好,是很多年轻人向往的一个职业,想学习web前端,那么你得找到好的学习方法,以下就给大家分享一份适合新手小白 ...
- front-end 前端发展学习路线参考图
front-end 前端发展学习路线参考图 学习的路程还很长~!
- 史上最全的web前端系统学习教程!
这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...
随机推荐
- ABP入门系列(5)——创建应用服务
一.解释下应用服务层 应用服务用于将领域(业务)逻辑暴露给展现层.展现层通过传入DTO(数据传输对象)参数来调用应用服务,而应用服务通过领域对象来执行相应的业务逻辑并且将DTO返回给展现层.因此,展现 ...
- iOS下使用SHA1WithRSA算法加签源码
首先了解一下几个相关概念,以方便后面遇到的问题的解决: RSA算法:1977年由Ron Rivest.Adi Shamirh和LenAdleman发明的,RSA就是取自他们三个人的名字.算法基于一个数 ...
- 18SpringMvc_在业务控制方法中收集数组参数
这篇文章我们要解决的问题的多选框选中,并批量删除. 比如:
- android中scrollTo和scrollBy的理解
protected int mScrollX; //该视图内容相当于视图起始坐标的偏移量 , X轴 方向 protected int mScrollY; //该视图内容相当 ...
- 【转】【C#】在 Windows 窗体 DataGridView 单元格中承载控件
using System; using System.Windows.Forms; public class CalendarColumn : DataGridViewColumn { public ...
- [转]服务器自动化操作 RunDeck
From : http://www.oschina.net/p/rundeck/similar_projects?sort=view&lang=25 RunDeck 是用 Java/Grail ...
- 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 发现此问题的经过: ...
- 经典趣味24点游戏程序设计(python)
一.游戏玩法介绍: 24点游戏是儿时玩的主要益智类游戏之一,玩法为:从一副扑克中抽取4张牌,对4张牌使用加减乘除中的任何方法,使计算结果为24.例如,2,3,4,6,通过( ( ( 4 + 6 ) - ...
- 20135223/20135234/20135229小组——亚博 Arduino智能小车实践报告
实验名称:Arduino智能小车组装和综合测试 实验小组成员:20135223何伟钦 20135234马启扬 20135229吕松鸿 实验日期:2015.10.27—2015.11.3 实验时长:24 ...
- 系统级I/O 第八周11.9~11.15
第十章 系统级I/O cp1 #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include ...