Less入门及知识点整理
LESS « 一种动态样式语言
文档链接:http://www.bootcss.com/p/lesscss/
百科
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node 或浏览器端。
疑问
Less是什么呢?
Less是CSS的一门预处理语言。
其他一些CSS预处理语言诸如Sass、Stylus等。
什么是预处理语言呢?
以前写CSS是没有变量的,使用Less的话就有了变量,所以可以干一些奇妙的事情!还有其他一些方便的功能会在下面讲到。
Less和CSS在开发中是什么关系呢?
在开发中,我们先使用Less的语法编写代码,再通过其他一些手段将.less文件转成.css文件。
工具如Koala等。
知识链
1 变量
2 混合
2.1 带参数混合
2.2 给参数设置默认值
2.3 不带参数混合
2.4 @arguments变量
2.5 模式匹配
2.6 匹配多个参数
2.7 导引
2.7.1 导引序列使用逗号
2.7.2 导引参数
2.7.3 使用函数
2.7.4 and关键字
2.7.5 not关键字
3 嵌套
4 运算
5 Color函数
6 Math函数
7 命名空间
8 作用域
9 注释
10 引入
11 字符串插值
12 避免编译
13 JavaScript表达式
// .less文件(后面的代码将省略说明)
// 变量用@符号声明
@nice-blue: #5b83ad;
@light-blue: @nice-blue + #111; #header {
color: @light-blue
} // 将变量名定义为变量
@fnord: 'I am fnord.';
@var: 'fnord';
content: @@var; // less中的变量为完全的常量,所以只能定义一次 // .css文件(后面的代码将省略css输出)
// 在css中输出为
#header {
color: #6c94be;
} content: 'I am fnord.';
// 定义一些通用的属性集为一个class,
// 然后在另一个class中去调用这些属性
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
} #menu a {
color: #111;
.bordered;
} .post a {
color: red;
.bordered;
}
.border-radious(@radious) {
border-radius: @radious;
-moz-border-radius: @radious;
-webkit-border-radius: @radious;
} #header {
.border-radious(4px);
} .button {
.border-radious(6px);
}
.border-radious(@radious) {
border-radius: @radious;
-moz-border-radius: @radious;
-webkit-border-radius: @radious;
} #header {
.border-radious(4px);
} .button {
.border-radious(6px);
}
// 如果想隐藏属性集合,不让它暴露到CSS中去,
// 但是还想在其他的属性集合中引用
.wrap() {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
} pre {
.wrap
}
// @arguments包含了所有传递进来的参数
// 如果不想单独处理每一个参数的话
.box-shadow(@x:0, @y:0, @blur:1px, @color:#000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
// 根据传入的参数来改变混合的默认呈现
// 让.mixin根据不同的@switch值而表现各异
.mixin(dark, @color) { // 这里前面没有带@所以可以作为标识
color: darken(@color, 10%);
} .mixin(light, @color) { // 只接受light为首参
color: lighten(@color, 10%);
} .mixin(@_, @color) { // 接受任意值
display: block;
} // 使用
@switch: light; .class {
.mixin(@switch, #888);
} // 只有被匹配的混合才会被使用
// 变量可以匹配任意的传入值,
// 而变量以外的固定值就仅仅匹配与其相等的传入值 // 在css中输出为
.class {
color: #a2a2a2;
display: block;
}
.mixin(@a) {
color: @a;
} .mixin(@a, @b) {
color: fade(@a, @b);
}
// 当我们想根据表达式进行匹配,而非根据值和参数匹配
// 为了尽可能地保留CSS的可声明性,less通过导引混合而非if/else语句来实现条件判断
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
} .mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
} .mixin (@a) {
color: @a;
} // 使用
.class1 {
.mixin(#ddd)
} .class2 {
.mixin(#555)
} // 导引中可用的全部比较运算有:>, >=, =, =<, <
// 导引序列使用逗号分割,当且仅当所有条件都符合时,才会被视为匹配成功。
.mixin (@a) when (@a > 10), (@a < -10) {}
// 导引可以无参数,也可以对参数进行比较运算
@media: mobile; .mixin (@a) when (@media = mobile) {}
.mixin (@a) when (@media = desktop) {} .max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
// 基于值的类型进行匹配,可以使用is函数
.mixin (@a, @b: 0) when (isnumber(@b)) {}
.mixin (@a, @b: black) when (iscolor(@b)) {} // 常见的检测函数
// iscolor
// isnumber
// isstring
// iskeyword
// isurl // 判断一个值是纯数字还是单位量
// ispixel
// ispercentage
// isem
// 使用and关键字实现与条件
.mixin (@a) when (isnumber(@a)) and (@a > 0) {}
// 使用not关键字实现或条件
.mixin (@b) when not (@b > 0) {}
3 嵌套
#header { color: black; .navigation {
font-size: 12px;
} .logo {
width: 300px;
&:hover {
text-decoration: none;
}
} }
4 运算
// 任何数字、颜色或者变量都可以参与运算 // less能够分辨出颜色和单位
@var: 1px + 5; // 使用括号
width: (@var + 5) * 2; // 在复合属性中运算
border: (@width * 2) solid black;
5 Color函数
lighten(@color, 10%); // 轻
darken(@color, 10%); // 深
saturate(@color, 10%); // 饱和
desaturate(@color, 10%); // 稀释
fadein(@color, 10%); // 渐显
fadeout(@color, 10%); // 渐隐
fade(@color, 50%); // 透明
spin(@color, 10); // 大10度
spin(@color, -10); // 小10度
mix(@color1, @color2); // 组合 // 使用
@base: #f04615; .class {
color: saturate(@base, 5%);
background-color: lighten(spin(@base, 8), 25%);
} // 提取颜色信息
hue(@color); // 色度
saturation(@color); // 饱和度
lightness(@color); // 亮度 // 在一种颜色的通道上创建另一种颜色
// @new 将会保持@old的色调, 但是具有不同的饱和度和亮度
// hsl函数同时使用上述3种函数
@new: hsl(hue(@old), 45%, 90%);
6 Math函数
ceil(2.4); // 向上
round(1.67); // 四舍五入
floor(2.6); // 向下
percentage(0.5); // 转成百分比
7 命名空间
// 为了更好组织CSS或者单纯是为了更好的封装,
// 将一些变量或者混合模块打包起来,
// 定义一些属性集之后可以重复使用
#bundle {
.button() {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab {}
.citation {}
} // 在#header a中引入.button
#header a {
color: orange;
#bundle > .button;
}
8 作用域
// 首先会从本地查找变量或者混合模块,
// 如果没找到的话会去父级作用域中查找,直到找到为止
@var: red; #page {
@var: white;
#header {
color: @var; // white
}
} #footer {
color: @var; // red
}
9 注释
/* Hello, I'm a CSS-style comment */
.class { color: black } // less同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉:
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }
10 引入
// 在main文件中引入.less文件,.less后缀可带可不带
@import "lib.less";
@import "lib"; // 导入一个CSS文件而且不想less对它进行处理,只需要使用.css后缀就可以
@import "lib.css";
11 字符串插值
// 变量可以使用@{name}这样的结构嵌入到字符串中
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");
12 避免编译
// 如果需要输出一些不正确的CSS语法
// 或者使用一些less不认识的专有语法
// 要输出这样的值可以在字符串前加上一个~
.class {
filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}
13 JavaScript表达式
// 通过反引号的方式使用
@var: `"hello".toUpperCase() + '!'`; // 可以同时使用字符串插值和避免编译
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`; // 可以访问JavaScript环境
@height: `document.body.clientHeight`; // 将一个JavaScript字符串解析成16进制的颜色值
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);
使用
less的使用有多种方法,最终都是通过编译工具编译成.css文件。
先用你的编辑器新建一个.less文件,再用Less的语法编写你的代码,就如
再用编译工具将你的.less文件编译成.css文件。
这里我用的编译工具是 Koala ,
下载地址:http://koala-app.com/index-zh.html
它的界面是这样子的
直接将你包含.less文件的文件夹拖拽进去就行了。
点击文件,执行编译,最后将会在你的桌面上生成.css文件。
最后生成的.css文件
Less入门及知识点整理的更多相关文章
- Sass入门及知识点整理
Sass 快速入门 | SASS 中文网 文档链接:https://www.sasscss.com/getting-started/ 前言 之前整理了一篇关于Less的,现在就来整理一下关于Sass的 ...
- Java 入门学习知识点整理
[JAVA一个文件写多个类 ( 同级类 ) 规则和注意点] 在一个.java文件中可以有多个同级类, 其修饰符只可以public/abstract/final/和无修饰符 public修饰的只能有一 ...
- css入门知识点整理
css入门知识点整理 不要嘲笑我这个蒟蒻..例子来源:w3school css其实就分为两个东西,一个是选择器,另外一个是声明.声明定义了某个对象的属性的值,这都是html的内容.重点要关注的是选择器 ...
- 【Android 面试基础知识点整理】
针对Android面试中常见的一些知识点整理,Max 仅仅是个搬运工.感谢本文中引用文章的各位作者,给大家分享了这么多优秀文章.对于当中的解析,是原作者个人见解,有错误和不准确的地方,也请大家积极指正 ...
- Java入门学习知识点汇总
Java入门重要知识点在这里总结一下,以方便日后复习,这部分内容主要有:变量和常量,常用的运算符,流程控制语句,数组,方法这些内容 一.变量和常量 1.Java关键字 先贴张图: 所有关键字区分大小写 ...
- ACM个人零散知识点整理
ACM个人零散知识点整理 杂项: 1.输入输出外挂 //读入优化 int 整数 inline int read(){ int x=0,f=1; char ch=getchar(); while(ch& ...
- Android 零散知识点整理
Android 零散知识点整理 为什么Android的更新试图操作必须在主线程中进行? 这是因为Android系统中的视图组件并不是线程安全的.通常应该让主线程负责创建.显示和更新UI,启动子线程,停 ...
- vue前端面试题知识点整理
vue前端面试题知识点整理 1. 说一下Vue的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- React 入门学习笔记整理目录
React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...
随机推荐
- Getting Visual Studio version of a Solution file
VS 6.0 -> 6.0 VS 2002 -> 7.0 VS 2003 -> 8.0 VS 2005 -> 9.0 VS 2008 -> 10.0 VS 2010 -& ...
- CRM项目之stark组件
. stark也是一个app(用startapp stark创建),目标时把这个做成一个可以拔插的组件 . setting文件下INSTALLED_APPS 路径要配置好(app的注册) . 写好si ...
- 爬虫之PyQuery
PyQuery 是 Python 仿照 jQuery 的严格实现.语法与 jQuery 几乎完全相同. 官方文档:http://pyquery.readthedocs.io/ 安装 pip insta ...
- 实验-12-JSP简单入门
参考资料 JSP实验参考文件 主要看实验任务书 实验1. 第一个HTML页面与Tomcat 实验内容:任务书中的JSP-实验1. 1.1 EclipseJEE的使用 新建Tomcat Server 新 ...
- SpringSecurity-ExceptionTranslationFilter的作用
ExceptionTranslationFilter捕获异常并做相应的处理.处理逻辑如下: 1.首先判断是不是SpringSecurity产生的异常,如果是将在handleSpringSecurity ...
- 纯CSS制作图形效果
下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...
- VIVADO 入门之仿真与逻辑分析仪使用
多路分频器设计 在第七节的学习中,笔者带大家通过一个入门必学的流水灯实验实现,快速掌握了VIVADO基于FPGA开发板的基本流程.考虑到很多初学者并没有掌握好Vivado 下FPGA的开发流程,本章开 ...
- 第四章 FFmpeg转码
4.1 FFmpeg软编码H.264与H.265 4.1.1 x264编码参数简介 4.1.2 H.264编码举例
- [Oracle,2018-03-01] oracle常用函数
最近经常用到一些oracle中的函数,今天就总结一些常用的: 一.单行函数 只处理单个行,并且为每行返回一个结果. 1.字符函数 (1)concat(str1,str2)字符串拼接函数 select ...
- python——eval()函数
eval()函数用来执行一个字符串表达式,并返回表达式的值. 语法:eval(expression[, globals[, locals]]) x = 4 print(eval('3 * x'))12 ...