5分钟学会使用Less预编译器
5分钟学会使用Less预编译器
Less是什么?
LESS CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
Less编译器:笔者推荐Koala,官方下载链接为:http://koala-app.com/index-zh.html
安装好之后就是这个样子的啦:
下面开始学习使用Less!
·LESS中的注释:
-可以使用css中注释(/**/)
-也可以使用//注释,但是//注释编译的时候会自动被过滤
如图:
·LESS中的变量:
-less中想声明变量的话,一定要用@开头,基本形式为:@变量名:值;
如图:
经编译后的CSS:
·混合变量
-定义好的一个类的样式可以在另一个类中引用
如图:
经编译后的CSS:
更多例子:
·匹配模式
-相当于JS中的if,但不完全是。需要满足条件后才能匹配。
示例:
示例中,类样式中的第一个参数top、bottom、left、right表示的就是匹配条件,调用的时候必须带上相应的条件则可调用相应的样式。有时候,我们需要调用的类是有很多相同的样式的,不同的只是某个位置或颜色,这时候我们就把相同的样式写在同样的类名中,这时的第一个参数就是@_ ,如上图所示。这样调用的结果就是既有公共的样式,又有唯一的条件样式。
·运算:
-less中任何数字、颜色或者变量都可以参与运算(如+ - * /),运算应该被包裹在括号中。例如:
·嵌套规则:
-less中最有意思的小东西,有两种用法
-对伪类使用 .& :hover或focus
-对链接的使用-&-item
例如:
·arguments变量:
-@arguments包含了所有传递进来的参数
-如果你不想单独处理每一个参数的话就可以这样写:
编译后的CSS:
例如:
编译后的CSS:
·避免编译:
-有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法,要在输出这样的值的字符前加上一个~
例如:
编译后的CSS:
更多:
Less中文网站:http://lesscss.net/
如果看不懂英文的,可以访问less中文旧版网站:
http://old.lesscss.net/article/document.html
欢迎大家关注我的微信订阅号:前端生活
5分钟学会使用Less预编译器的更多相关文章
- 在 CSS 预编译器之后:PostCSS
提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “ ...
- 【grunt第二弹】30分钟学会使用grunt打包前端代码(02)
前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...
- 《量化投资:以MATLAB为工具》连载(2)基础篇-N分钟学会MATLAB(中)
http://www.matlabsky.com/thread-43937-1-1.html <量化投资:以MATLAB为工具>连载(3)基础篇-N分钟学会MATLAB(下) ...
- 《量化投资:以MATLAB为工具》连载(1)基础篇-N分钟学会MATLAB(上)
http://blog.sina.com.cn/s/blog_4cf8aad30102uylf.html <量化投资:以MATLAB为工具>连载(1)基础篇-N分钟学会MATLAB(上) ...
- [分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例)
[分享] 史上最简单的封装教程,五分钟学会封装系统(以封装Windows 7为例) 踏雁寻花 发表于 2015-8-23 23:31:28 https://www.itsk.com/thread-35 ...
- CSS预编译器配置-------LESS Sass Stylus webstorm
预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...
- 50分钟学会Laravel 50个小技巧
50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45 Yuansir-web菜鸟 原文 http://www.yuansir-web.com/2015/12/09 ...
- 10分钟学会Linux
10分钟学会Linux有点夸张,可是能够让一个新手初步熟悉Linux中最重要最主要的知识,本文翻译的英文网页在众多Linux入门学习的资料中还是很不错的. 英文地址:http://freeengine ...
- PHP学习过程_Symfony_(3)_整理_十分钟学会Symfony
这篇文章主要介绍了Symfony学习十分钟入门教程,详细介绍了Symfony的安装配置,项目初始化,建立Bundle,设计实体,添加约束,增删改查等基本操作技巧,需要的朋友可以参考下 (此文章已被多人 ...
随机推荐
- Servlet解决参数乱码问题
为什么会产生乱码? 之所以会产生乱码,是由于服务器端和客户端的编码方式不一致造成的.客户端与服务器端的交互过程中,存在着两次数据交换:第一次,客户端向服务器端发起请求,第二次数据交换,服务器端响应客户 ...
- 1051. Pop Sequence
原题连接:https://www.patest.cn/contests/pat-a-practise/1051 题目: Given a stack which can keep M numbers a ...
- WebService的开发、部署、调用
本文参考其它文章和自己解决中间问题的经历记录,以C#开发WebService为例子,欢迎探讨: 一.C#开发WebService 在visual studio中新建ASP.NET Web服务应用程序, ...
- easyUI datagrid 根据查询条件 选中对应数据的行
开始 输入了 土豆,南瓜,再次是小青菜,每次输入点击搜索的时候(模糊查询),选中的当前数据对应的行 在做之前,在网上查询了许多资料,也在技术群里问过许多次,弄了好久终于好了. 第一次写博客真不知道写啥 ...
- ios视频播放器,代码和界面分离
最近业余时间整理的一个ios播放器,界面采用storyboard,以前几乎都是用代码布局,但是用过一个项目storyboard后,就感觉storyboard很靠谱,团队合作版本控制的问题解决其实很简单 ...
- Hadoop学习笔记—1.基本介绍与环境配置
一.Hadoop的发展历史 说到Hadoop的起源,不得不说到一个传奇的IT公司—全球IT技术的引领者Google.Google(自称)为云计算概念的提出者,在自身多年的搜索引擎业务中构建了突破性的G ...
- struts2 标签怪事
<s:if test="4 ge 3">111</s:if><s:else>222</s:else> 结果竟然是222 难道不是 4 ...
- Atitit 设计模式与算法,与流程的关系
Atitit 设计模式与算法,与流程的关系 1.1. 设计模式就是算法 就是流程,不同的方面看法不同,抽象方法不同而造成的假象. 软件就是由设计模式累积成的.也可以说算法累计成的.. ,而可以用Vis ...
- angularjs揭秘
angularjs揭秘
- 没有水果机的也来体验下Visual Studio for Mac
在去年微软已经宣布.NET将实现真正的跨平台,并且发布了Mac和Linux版的Visual Studio Code编辑器,但强大的Visual Studio确只有Windows版. 还坚守.NET开发 ...