less学习文档_第1页
less学习文档_第2页
less学习文档_第3页
less学习文档_第4页
less学习文档_第5页
已阅读5页，还剩14页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、LESS预处理语言文档龚意2016-06-241. less入门1.什么是lessless是一门css预处理语言，它扩展了css语言，增加了变量、混合mixin、嵌套、函数等特性，使css样式，更易维护和扩展，less运行在node或浏览器端less语言特性2.使用lessØ Node.js安装less在node.js中安装LESS最简单的方式就是使用Node包管理工具npm来安装:一旦安装完成，就可以在命令行中调用，例如:这样的话编译后的CSS将会输出到 'stdout' 中，你可以选择将这个输出重定向到文件中:Ø 客户端中使用less浏览器端使用是在使用

2、LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合， 建议使用node或者其它第三方工具先编译成CSS再上线使用。首先，引入 rel 属性的值是 stylesheet/less 的 .less 样式表 :接下来，下载 less.js 并将其包涵在您的页面 <head> 元素的 <script></script> 标记中：2. 语言特性1.变量（Variables）通过再less中定义变量，在css样式规则中就可

3、直接使用定义的变量，大大减少样式表中重复值，需要修改时，直接修改变量值对应使用变量的css样式均会改变；变量也可用于定义选择器名称，属性名和import；最好在单独的less文件中定义和管理变量；2. 扩展（Extend）Ø 定义extend是一个less伪类，使用extend会合并它所在的选择器和它所匹配的引用（对样式进行合并）例： 输出Ø 为选择器附加扩展给选择器附加扩展看起来就像一个普通的带参数的伪类选择器。一个选择器可以包含多个扩展分支，但是所有的扩展都必须在选择器的尾部。例：选择器之后的扩展：pre:hover:extend(div pre)。Ø 规则集

4、内的扩展也可以使用&:extend(selector)语法在规则集内置入extend。将extend放入规则集内是一种将它放入单个规则选择器的快捷方式。例：等价于Ø 嵌套选择器中的扩展extend还可以匹配嵌套选择器，比如有下面的Less：输出Ø 扩展中的精确匹配Extend默认会在选择器之间寻找精确匹配。它不管选择器是以星号开始还是不是。它也不管两个nth表达式是否具有相同的意义，它们必须以相同的形式匹配。唯一例外的是属性选择器中的引号，less会知道它们是相同的，然后匹配它。例:Ø Extend “all”当你在extend参数的最后面指定all关键字

5、时，它会告诉告诉匹配作为其他选择器一部分的选择器。这个选择器会被复制，然后匹配的选择器部分会使用扩展替换，创建一个新的选择器。例:输出Ø 扩展中的选择器插值Extend不能匹配变量选择器。如果选择器包含变量，extend会忽略它。例:Ø 作用域/media内的扩展编写在media声明内的extend也应该只匹配同一media声明内的选择器：例:输出:Ø 扩展用例经典用于就是避免添加基础类比如，如果你有：如果你想有一个animal子类型，并且要重写背景颜色。那么你有两个选择，首先改变你的HTML或者简化HTML，然后在你的less中使用extend，比如：Ø

6、; 扩展合并Mixins会复制所有的属性到选择器中，这可能导致不必要的重复。因此你可以使用extend来代替mixin将你要用的属性移过去，这样就会生成更少的CSS。例:输出Ø 合并样式（高级mixin）另一个用例可以用作mixin的替代 - 因为mixin仅仅能用于简单的选择器，如果你的html中有两个不同的块，但是你需要为这两个块应用相同的样式，那么你可以使用extend来关联这两块。例:3. 混合（mixin）Ø 定义在 Less 中我们可以定义一些通用的属性集为一个选择器，然后在另一个选择器中去调用这些属性.例:输出:Ø 不输出混合集上个例子会输出混合集.

7、a如果不想输出.a只需加入() 如：.a() color:red ;Ø 带选择器的混合集混合集不仅可以包含各种属性，而且可以包括各种选择器。例:输出:Ø !important 关键字在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承 !important：例：输出:Ø 带参数的混合mixins也可以接受参数，在它进行mix in操作时会将变量传递给选择器代码块。例:调用:Ø arguments 变量arguments在mixins内部有特殊意义，调用mixin时，它包含所有传入的参数。如果

8、你不想单个单个的处理参数，这一特性是很有用的：Ø 模式匹配有时候，你可能想要基于你传递给它的参数改变mixin的行为。例:调用：输出:Ø 混合也可作为函数使用所有定义在一个mixin中的变量都是可见的，还可以用于调用它的作用域中（除非调用它的作用域定义了同名变量）。例:输出:Ø 传递规则集给混合允许在mixin中定义包装的CSS块 例：输出:Ø 带条件的混合当你想要匹配表达式，而不是简单的值或者参数数量时，guard是很有用的。如果你熟悉函数式编程，那么你肯定遇到过这类问题。为了尽可能的保持CSS声明的本质，Less选择实现了guarded mixins

9、，而不是if/else语句，也就是说并不是一脉相承的实现media查询的规范。例:调用:输出:guards中可用的比较运算符的完整列表为： >, >=, =, =<, <。此外，关键字true是让两个mixins等价的唯一真值您也可以在guards之间使用逻辑运算符。语法是基于CSS媒体查询。使用and关键字来组合guards：你可以通过用逗号,分隔guards来模仿or运算符，使用 not 关键字来否定条件。还有一些类型检查函数可用:iscolor、isnumber、isstring、iskeywo

10、rd、isurl、ispixel、ispercentage、isem、isunit（使用方法:.mixin (a; b: 0) when (isnumber(b) . ）4. 循环（loops）在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。例(常用于成栅格系统): 例:输出:5. 合并merge特性可以从多个属性中将值集合集合到一个单一属性之下的逗号或空格分割属性列表中。对于诸如background和transform之类的属性来说，merge非常有用。为避免任何非有意的添加，merge需要在每个待加入的声明中显

11、示的设置一个+或者+_标记例:输出:6. 父级选择器& 运算符表示一个 嵌套规则 的父选择器，它在应用修改类或者应用伪类给现有选择器时最常用：例:输出:3. less 函数参考1. 杂项函数Ø Color函数解析颜色，将代表颜色的字符串转换为颜色值。(color(#ffffff) #ffffff)Ø image-size()/image-width()/image-height()函数从文件获取的图像尺寸/宽度/高度。Ø convert函数将数字从一种类型转换到另一种类型。(convert(9cm,"mm"

12、) 90mm)Ø data-uri函数将一个资源内嵌到样式文件。Ø default函数没有匹配到其他自定义函数（mixin）的时候返回true，否则返回false。 例:输出:Ø unit（）函数添加或改变属性值得单位例子: unit（5,px）=> 5px; unit（5px）=> 5。Ø get-unit（）函数返回属性值得单位。2. 字符串函数Ø escape（）函数转义函数。(escape("a=1") a%3D1)Ø e（）函数预判函数 他认为字符串是一个参数返回不带引号的原内容。(e(“a”

13、) a)Ø %函数格式化参数 例：输出:Ø replace（string,pattern,replacement,flags）函数替换函数 （参考正则表达式）· 参数:string: 搜索和替换用的字符串;pattern:一个字符串或者能搜索的正则表达式.replacement: 匹配模式成功的替换字符串.flags: (可选的) 正则表达式匹配标识（全匹配还是.）.例:输出:3. 列表函数Ø length（list）函数返回集合中值得数目。Ø extract（）函数返回集合中指定索引的值extract（8px dotted red, 2）do

14、tted4. 数学函数Ø ceil（）向上取整函数Ø floor（）向下取整函数Ø percentage（）将浮点数转换成百分比函数Ø round（）四舍五入取整函数Ø sqrt（）计算平方根函数Ø abs（）计算绝度值函数Ø pow（）乘方函数Ø mod（）取余函数返回值与第一个值有相同单位，第二个值的单位被忽略Ø min（）最小值函数Ø max（）最大值函数5. 类型函数Ø iscolor（）函数Ø isnumber（）函数Ø isstring（）函数Ø

15、; iskeyword（）函数Ø isurl（）函数Ø ispixel（）函数Ø ispercentage（）函数Ø isem（）函数Ø isunit（）函数6. 颜色定义函数Ø rgb（）/rgba（90, 129, 32, 0.5）函数通过十进制红色，绿色，蓝色，以及 alpha 四种值 (RGBA) 创建带alpha透明（RGBA）的颜色对象Ø hsl（）/hsla（90, 100%, 50%, 0.5）函数通过色相 (hue)，饱和度 (saturation)，亮度 (lightness)，以及 alpha 四种值

16、(HSLA) 创建透明（HSLA）的颜色对象Ø hsv（）/hsva(90, 100%, 50%, 0.5）函数通过色相 (hue)，饱和度 (saturation)，色调 (value)，以及 alpha 四种值 (HSVA) 创建透明(HSVA)的颜色对象。7.颜色通道函数Ø hue(hsl(90, 100%, 50%)/saturation()/lightness()函数从HSL色彩空间中提取颜色对象的色相值/饱和度值/亮度值Ø hsvhue(hsv(90, 100%, 50%)/ hsvsaturation() / hsvvalue ()函数从HSV色彩空

17、间中提取颜色对象的色相值/饱和度值/色调值Ø red()/green()/blue()/alpha()函数 提取颜色对象的红/绿/蓝/不透明值8. 颜色操作函数Ø saturate(hsl(90, 80%, 50%), 20%) /desaturate()函数增加/降低一定数值的颜色饱和值Ø lighten()/darken()函数增加/降低一定数值的颜色亮度值Ø fade()/fadein()/fadeout()函数设置/增加/降低一定数值的颜色不透明度Ø spin()函数任意方向旋转颜色的色相角度 .参考hsv或hsl颜色空间模型理解对灰色无效（无饱和度）Ø mix(#ff0000, #0000ff, 50%)函数根据比例(50%)混合两种颜色，包括计算不透明度9. 颜色混合函数Ø multiply(#ff6600, #000000)函数分别将两种颜色的红绿蓝 (RGB) 三种值做乘法运算，然后再除以255，输出结果是更深的颜色（对应ps中变暗/正片叠底） screen()函数与其效果相反（对应ps中变亮/滤色）Ø overlay()函数结合multiply和screen函数，让浅的颜色更浅，深的颜色更深（对应ps中叠加）Ø hardlight()函数与 over

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论