已知问题
由于 Javascript 无法访问本地的 .less 文件,因此需要一个 http 服务器
本地使用方法:
1、在web目录下新建一个less目录,目录结构如下:
less
----js
----less
index.html
2、从官网下载一份less.js , 下载后名为:less-1.3.3.min.js 放到js目录中
3、自己写一个简单的示例less文件,命名为:style.less, 内容如下:
@color:red; #header { color: @color; } h2 { color: @color; }
4、index.html内容如下:
<html> <head> <link rel="stylesheet/less" type="text/css" href="less/style.less"> <script src="js/less-1.3.3.min.js" type="text/javascript"></script> </head> <body> <div id="header"> This is a id as header of div. </div> <h2> This is a h2 tag. </h2> </body> </html>
注意点:一定要注意引用的顺序,一定是先引用.less 再引入.js 而且less的写法与css有点不一样,请观察
LESS的目标是简写CSS。用编程的观点去看待CSS,以OO的思想看待CSS,将常量、函数、命名空间等概念引入,使很松散的页面样式形成一个个对象,方便开发和维护。当然在写的时候要注意技巧,不然生成的CSS将会有大量的冗余代码。所以只建议CSS高手进阶用,初级CSSer最好还是先把CSS写熟了再说吧!
变量和常量(Variables)
以@开始即可,只能定义属性值。注意变量覆盖以及作用域的问题。例如:
@blue: #5b83ad; //常量
@light_blue: @nice-blue + #222; //经过计算的常量
@highlight: “blue”; #header { color: @@highlight;}//常量名为常量
函数
将每个类都看成一个函数,即可以让别的函数调用和传参。并且能在函数中定义子函数。
.border{border: 2px solid #ccc; border-radius: 4px;} .header {.border;} //调用时一定要传参数 .border(@width, @color, @radius){border: @width solid @color; border-radius: @radius;} .header{.border(2px, #ccc, 4px);} //带默认参数 .border(@width:2px, @color:#ccc, @radius: 4px){ border: @width solid @color; border-radius: @radius; } .header {.border(4px, #f00, 2px);} //@arguments 指所有参数 .border (@width:1px, @style:solid, @color:#ccc){border: @arguments;} #header{ height:100px; &:hover {color:red;} //=== #header:hover, &代表同级 &.top {margin-top:12px;} // === #header.top h1 {font-size:24px;} // === #header h1 } #content { h1{#header h1;} //调用#header h1。这时候#header就相当于命名空间的概念 }
注释(Comments)
和js一样,单行“//”和多行“/* */”。编译时会删除“//”保留“/* */”。
运算
LESS的运算能力比较强大,主要有两个方面,一个是常规四则运算(Operations),一个是颜色计算。
四则运算遵循常规的优先级,特色是可以对颜色、数字、变量进行运算,而且对带单位的数值有很强的容错能力。例子:
@base: 5%; @filler: @base*2; //变量运算
color: #888 / 4; //颜色运算,result === #222
@var 1px + 5; // result === 6
颜色计算主要是LESS提供了以下函数:
lighten(@color, 10%); //return lighten color
darken(@color, 10%); //return darken color
saturate(@color, 10%); //return more saturated
desaturate(@color, 10%); //return less saturated
fadein(@color, 10%); //return less transparent
fadeout(@color, 10%); //return more transparent
spin(@color, -10|10); //return smaller or larger than @color
提取颜色值:
hue(@color); //returns the hue channel of color
saturation(@color); //returns the saturation channel of @color
lightness(@color); //returns the lightness channel of @color
alpha(@color) //return alpha channel of @color(hsl模式里面的透明通道)
hsl(h,s,l),hsla(h,s,l,a),rgb(r,g,b),rgba(r,g,b,a) //这些更不用说,某些浏览器都支持了。
安装
LESS和Coffee一样,其实都提供了两种安装模式。一种是解释模式,也就是js。通过js就能对less文件进行编译成正常的CSS,嵌入html页面中。这里的过程应该可以通过js进行配置,有空再谈。而另一种就是编译模式,安装LESS编译器,需要node(其实重点是npm)环境支持,进入cmd 输入 npm install less -g 即可。解释模式适用于开发,而编译模式适用于发布上线。二者结合无懈可击。coffee的安装也类似。
相关推荐
这个“Bootstrap文档”包含了对Bootstrap框架全面而深入的介绍,旨在帮助开发者迅速掌握其用法并解决在实际项目中遇到的问题。 在文档中,首先会介绍Bootstrap的基础概念,包括其网格系统、排版样式、导航菜单、...
- jQuery官方文档(中文版):提供详细API参考和教程,是学习的最佳起点。 - jQuery API文档:英文版,包含全面的API介绍和示例。 - 在线学习平台(如Codecademy、W3School)上的jQuery课程,适合实践操作。 - ...
“起步”章节则为初学者提供了一个快速入门指南,讲解如何在项目中引入Bootstrap,包括基本的HTML结构、CSS和JS的引用,以及如何使用预处理器(如Sass或Less)进行更高级的定制。 在“Bootstrap 中文文档_files”...
这个“W2UI文档资料”包含了从官方网站提取的最新资料,对于学习和使用W2UI的人来说是宝贵的资源。 **主要特性** 1. **响应式设计**:W2UI支持各种屏幕尺寸和设备,确保在不同平台上提供一致的用户体验。 2. **...
8. **文档完善**:Bootstrap提供了详尽的官方文档,包括快速入门、组件说明、JavaScript插件和API参考,帮助开发者快速学习和掌握框架的使用。 9. **社区支持**:由于其广泛使用,Bootstrap拥有庞大的开发者社区,...
这份帮助文档通常包含了每个容器、迭代器、算法和函数对象的接口、使用示例和注意事项,是学习和查阅STL的宝贵资料。 `STL入门教程.chm`则是针对初学者的STL教程,通常会从基础概念开始,逐步引导读者了解如何使用...
【Easypoi功能文档】深入解析 Easypoi是一个设计精巧、使用简单的Java库,主要目标是简化Apache POI的使用,使得没有接触过POI的开发者也能轻松处理Excel和Word的导入导出任务。其核心特点是接口丰富、扩展简单、...
9. **浏览器兼容性**:探讨不同浏览器对CSS特性的支持情况,学习如何使用条件注释和特性检测来解决兼容性问题。 10. **实战案例**:通过实例分析和实践项目,将所学知识应用于实际网页设计,提升实际操作能力。 ...
### jQuery入门知识点详解 #### 一、jQuery简介 ##### 1-1 感性认识 **1-1-1 名称来历** - **名称解释**:“jQuery”是“JavaScript Query”的缩写,其中“Query”意为“查询”,表示jQuery提供了一种更便捷的...
《CSS+DIV网页样式与布局从入门到精通》是一本旨在帮助初学者和进阶者掌握CSS(层叠样式表)和DIV(定义文档结构)技术的书籍。这本书通过实例和源程序,深入浅出地讲解了如何使用CSS和DIV进行网页设计和布局。在...
文件名列表中的"share"可能包含的是共享资源,如代码示例、配置文件或教程文档。 为了开始学习Vue,首先需要了解这些基本概念,然后逐步深入到路由(Vue Router)、状态管理(Vuex)以及Vue生态中的其他工具和库。...
7. 常见问题:解答在使用过程中可能遇到的问题和解决方案。 三、压缩包中的文件: 1. bootstrap-3.0.0.zip:这个文件包含了Bootstrap框架的所有源代码,包括LESS文件、JavaScript源码和字体图标,适合深入学习和...
官方提供的高质量文档和丰富的示例代码为学习提供了很大的便利。 7. 可扩展性:Bootstrap允许开发者通过LESS或SASS等CSS预处理器来自定义样式,提供了丰富的变量、混合和函数来实现高度可定制的设计。 8. ...
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue.js 的开源前端组件库,它以其简洁易用、优雅美观的设计风格以及丰富的功能组件在...对于经验丰富的开发者,离线文档则提供了快速查找和解决问题的工具。
本教程的“jQuery中文入门指南.doc”文档将详细阐述这些概念,并可能包含实践案例和进一步的学习指引,对于初学者来说是一份非常有价值的参考资料。通过学习和实践,你将能熟练掌握jQuery,为网页开发打开新的大门。
通过学习这个快速入门教程,你应该能够理解和运用CSS来创建有吸引力的网页,并逐渐进阶到更高级的主题,如预处理器(如Sass、Less)、CSS网格系统(如Grid、Flexbox)和自适应布局等。无论你是网页设计师还是开发者...
9. **工具与源码**:标签中的“源码”可能指的是提供了一些示例代码,学习者可以通过查看和修改这些源码来实践CSS知识。同时,`CSS.exe`可能是一个交互式的学习工具,包含模拟环境和练习项目,帮助用户更好地理解和...
jQuery提供了详尽的官方文档,覆盖了所有API的使用方法、参数说明以及示例代码,这对于初学者来说是一大福音。同时,在线教程、视频课程以及各种社区论坛也极大地降低了学习门槛。 #### 理由六:轻量级且易于集成 ...
安装完成后,用户可以通过内置的教程和帮助文档了解基本操作,如创建、打开和保存文件,以及基本的编辑功能。VSCode支持多种编程语言,如JavaScript、TypeScript、JSON、HTML、CSS、Sass/Less等,并且通过扩展可以...