LessCss学习笔记
一、入门
1、LESSCSS是什么?
LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用,包括浏览器端(支持IE6+, Webkit, Firefox)、桌面客户端、服务端。
例如:
@color:#4D926F;
p{
color: @color;
}
编译成:
p{
color: #4D926F;
}
2、使用LESSCSS
1)客户端使用
在浏览器中使用less.js是非常方便的,但是这种方式不建议用于生产。在生产中,建议使用node.js或者第三方工具进行预编译。
首先,链接.less文件,设置rel属性为"stylesheet/less
":
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接着,下载less.js,或者到官网下载最新的,包含在<script></script>标签中:
<script src="less.js" type="text/javascript"></script>
也可以使用Less CDN:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
在 <script src="less.js"></script> 之前设置全局的的less对象:
<!-- set options before less.js script -->
<script>
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js"></script>
注意:确保在引用脚本之前引用样式文件。
点击以下链接下载上述代码:LESSCSS入门demo
二、语法特性
1、变量(Variables)
变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
例如:
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111; #header {
color: @light-blue;
}
输出:
#header {
color: #6c94be;
}
注意:这里的变量实际上是常量。
变量也可以用于选择器名称、属性名、URL和 @import 声明。
1)选择器名称
例如:
// Variables
@my-selector: banner; // Usage
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
输出:
.banner {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
2)属性名
例如:
@property: color; .widget {
@{property}: #0ee;
background-@{property}: #999;
}
输出:
.widget {
color: #0ee;
background-color: #999;
}
3)变量名
例如:
@fnord: "I am fnord.";
@var: "fnord";
content: @@var;
输出:
content: "I am fnord.";
4)URL
例如:
// Variables
@images: "../img"; // Usage
body {
color: #444;
background: url("@{images}/white-sand.png");
}
5)导入声明
例如:
// Variables
@themes: "../../src/themes"; // Usage
@import "@{themes}/tidal-wave.less";
变量是懒加载的,不是必须在使用前声明,可以在使用后声明。例如:
.lazy-eval {
width: @var;
} @var: @a;
@a: 9%;
2、混合(Mixins)
混合可以将一个定义好的class A轻松的引入到另一个class B中,从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用,就像使用函数一样。
例如:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
.bordered;
}
.post a {
color: red;
.bordered;
}
输出:
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post a {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
1)不输出mixin
可以在mixin后面添加"()"括号,让其不输出。
例如:
.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}
输出:
.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}
2) !important 关键字
在mixin后面使用 !important 关键字,那么继承的所有属性都会加上 !important 。
例如:
.foo (@bg: #f5f5f5, @color: #900) {
background: @bg;
color: @color;
}
.unimportant {
.foo();
}
.important {
.foo() !important;
}
输出:
.unimportant {
background: #f5f5f5;
color: #900;
}
.important {
background: #f5f5f5 !important;
color: #900 !important;
}
3)可以传递参数的Mixins
例如:
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
输出:
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
也可以设置参数默认值。例如:
.border-radius(@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius;
}
输出:
header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
3、嵌套(Nested Rules)
可以在一个选择器中嵌套另一个选择器来实现继承。
例如:
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
可以写成:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
例如:
.clearfix {
display: block;
zoom:; &:after {
content: " ";
display: block;
font-size:;
height:;
clear: both;
visibility: hidden;
}
}
其中,&当前选择器的父元素。
4、运算符(Operations)
运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。
例如:
// numbers are converted into the same units
@conversion-1: 5cm + 10mm; // result is 6cm
@conversion-2: 2 - 3cm - 5mm; // result is 1.5cm // conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // result is 4px // example with variables
@base: 5%;
@filler: @base * 2; // result is 10%
@other: @base + @filler; // result is 15% @color: #224488 / 2; //results in #112244
background-color: #112244 + #111; // result is #223355
5、转码(Escaping)
转码允许你使用任意的字符串作为属性或变量值。格式: ~"anything" 或 ~'anything' 。
例如:
.weird-element {
content: ~"^//* some horrible but needed css hack";
}
输出:
.weird-element {
content: ^//* some horrible but needed css hack;
}
6、函数(Functions)
Less提供了大量的函数用于转换颜色、处理字符串和数学运算。
例如:
@base: #f04615;
@width: 0.5; .class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}
输出:
.class {
width: 50%;
color: #f6430f;
background-color: #f8b38d;
}
7、Namespaces adn Accessors
例如:
#bundle {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white
}
}
} #header a {
color: orange;
#bundle > .button;
}
输出:
#bundle .button {
display: block;
border: 1px solid black;
background-color: grey;
}
#bundle .button:hover {
background-color: white;
}
#header a {
color: orange;
display: block;
border: 1px solid black;
background-color: grey;
}
#header a:hover {
background-color: white;
}
8、作用域(Scope)
例如:
@var: red; #page {
@var: white;
#header {
color: @var; // white
}
}
变量并不是必须在使用前声明,例如:
@var: red; #page {
#header {
color: @var; // white
}
@var: white;
}
9、注释(Comments)
和CSS一样,支持单行"//"和多行注释"/**/"。
例如:
/* One hell of a block
style comment! */
@var: red; // Get in line!
@var: white;
10、导入(Importing)
支持导入 .css 文件,并且也支持导入 .less 文件(将导入其中定义的所有变量)。
例如:
@import "library"; // library.less
@import "typo.css";
11、扩展(Extend)
例1:
.animal {
background-color: black;
color: white;
}
.bear {
&:extend(.animal);
background-color: brown;
}
输出:
.animal,
.bear {
background-color: black;
color: white;
}
.bear {
background-color: brown;
}
可以减少CSS的长度,例2:
.my-inline-block {
display: inline-block;
font-size:;
}
.thing1 {
&:extend(.my-inline-block);
}
.thing2 {
&:extend(.my-inline-block);
}
输出:
.my-inline-block,
.thing1,
.thing2 {
display: inline-block;
font-size:;
}
三、相关学习网站
LessCss学习笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- C# GDI生成清晰【高质量】图片
对于GDI+,在正常的操作,Bitmap,Graphcis,DrawImage或者DrawString ,生成图片的话,会产生很多杂点,或者是图片质量不稳定.尤其是在读取图片后,生成缩略图之后,文件会 ...
- shell---rpm
[root@master src]# rpm -qpl epel-release-latest-6.noarch.rpm ##查询该rpm包安装了什么warning: epel-rel ...
- mysql审计实现方法
Mysql版本: 5.6.24-72.2 一.通过init-connect + binlog 实现MySQL审计功能 基本原理: 由于审计的关键在于DML语句,而所有的DML语句都可以通过binlog ...
- C++模板之隐式实例化、显示实例化、隐式调用、显示调用和模板特化详解
模板的实例化指函数模板(类模板)生成模板函数(模板类)的过程.对于函数模板而言,模板实例化之后,会生成一个真正的函数.而类模板经过实例化之后,只是完成了类的定义,模板类的成员函数需要到调用时才会被初始 ...
- bzoj 5092 分割序列 —— 高维前缀和
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=5092 首先,处理出异或前缀和 s[i],i 位置的答案就是 s[j] + s[j]^s[i] ...
- java 02 内部类
- SIP协议&开源SIP服务器搭建和客户端安装
1. SIP SIP 是一个应用层的控制协议,可以用来建立,修改,和终止多媒体会话,例如Internet电话 SIP在建立和维持终止多媒体会话协议上,支持五个方面: 1) 用户定位: 检查终端用户 ...
- Eclipse -- 自动补齐设置和其他用法
1:自动补齐设置:最简单的修改方式是:Windows——>Preferences——>Java-->Editor-->Content Asist,在Auto activatio ...
- system(“pause”)和getchar()
大家都知道system(“PAUSE”)可以让C程序在运行结束之前暂停运行.用system(“PAUSE”)可以解决运行程序一闪而过,看不到输出结果的问题.有程序员会用system(“PAUSE”)只 ...
- 3.4-3.6 依据业务需求分析HBase的表设计
一.依据[话单]查询需求分析HBase的表设计 1.分析 用户需要进行实时的查询,那么这些数据是放在HBase当中的,每个客户每天接打电话至少20个左右,而通信公司拥有很多用户,每天产生的数据都是上亿 ...