`
dcj3sjt126com
  • 浏览: 1868585 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

LESS 学习入门,解决初学问题(含示例下载),入门后看中国官方文档

阅读更多

已知问题

由于 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的安装也类似。

 

 

  • 大小: 17.2 KB
0
0
分享到:
评论
1 楼 nsrjdsyt 2015-11-04  

相关推荐

    Bootstrap文档

    这个“Bootstrap文档”包含了对Bootstrap框架全面而深入的介绍,旨在帮助开发者迅速掌握其用法并解决在实际项目中遇到的问题。 在文档中,首先会介绍Bootstrap的基础概念,包括其网格系统、排版样式、导航菜单、...

    jQuery入门学习资料

    - jQuery官方文档(中文版):提供详细API参考和教程,是学习的最佳起点。 - jQuery API文档:英文版,包含全面的API介绍和示例。 - 在线学习平台(如Codecademy、W3School)上的jQuery课程,适合实践操作。 - ...

    bootstrap 3.3.4 中文文档

    “起步”章节则为初学者提供了一个快速入门指南,讲解如何在项目中引入Bootstrap,包括基本的HTML结构、CSS和JS的引用,以及如何使用预处理器(如Sass或Less)进行更高级的定制。 在“Bootstrap 中文文档_files”...

    W2UI文档资料

    这个“W2UI文档资料”包含了从官方网站提取的最新资料,对于学习和使用W2UI的人来说是宝贵的资源。 **主要特性** 1. **响应式设计**:W2UI支持各种屏幕尺寸和设备,确保在不同平台上提供一致的用户体验。 2. **...

    easypoi功能文档,介绍easypoi各种功能使用

    【Easypoi功能文档】深入解析 Easypoi是一个设计精巧、使用简单的Java库,主要目标是简化Apache POI的使用,使得没有接触过POI的开发者也能轻松处理Excel和Word的导入导出任务。其核心特点是接口丰富、扩展简单、...

    bootstrap-3.0.3,含示例程序

    8. **文档完善**:Bootstrap提供了详尽的官方文档,包括快速入门、组件说明、JavaScript插件和API参考,帮助开发者快速学习和掌握框架的使用。 9. **社区支持**:由于其广泛使用,Bootstrap拥有庞大的开发者社区,...

    STL入门教程和帮助文档

    这份帮助文档通常包含了每个容器、迭代器、算法和函数对象的接口、使用示例和注意事项,是学习和查阅STL的宝贵资料。 `STL入门教程.chm`则是针对初学者的STL教程,通常会从基础概念开始,逐步引导读者了解如何使用...

    Div+CSS网页样式与布局从入门到精通

    9. **浏览器兼容性**:探讨不同浏览器对CSS特性的支持情况,学习如何使用条件注释和特性检测来解决兼容性问题。 10. **实战案例**:通过实例分析和实践项目,将所学知识应用于实际网页设计,提升实际操作能力。 ...

    jQuery入门

    ### jQuery入门知识点详解 #### 一、jQuery简介 ##### 1-1 感性认识 **1-1-1 名称来历** - **名称解释**:“jQuery”是“JavaScript Query”的缩写,其中“Query”意为“查询”,表示jQuery提供了一种更便捷的...

    CSS+DIV网页样式与布局从入门到精通054221【实例示例源程序】

    《CSS+DIV网页样式与布局从入门到精通》是一本旨在帮助初学者和进阶者掌握CSS(层叠样式表)和DIV(定义文档结构)技术的书籍。这本书通过实例和源程序,深入浅出地讲解了如何使用CSS和DIV进行网页设计和布局。在...

    vue入门实例 js html css vue模板

    文件名列表中的"share"可能包含的是共享资源,如代码示例、配置文件或教程文档。 为了开始学习Vue,首先需要了解这些基本概念,然后逐步深入到路由(Vue Router)、状态管理(Vuex)以及Vue生态中的其他工具和库。...

    bootstrap 3.0 完整版带帮助文档

    7. 常见问题:解答在使用过程中可能遇到的问题和解决方案。 三、压缩包中的文件: 1. bootstrap-3.0.0.zip:这个文件包含了Bootstrap框架的所有源代码,包括LESS文件、JavaScript源码和字体图标,适合深入学习和...

    BootStrap入门教程.pdf

    官方提供的高质量文档和丰富的示例代码为学习提供了很大的便利。 7. 可扩展性:Bootstrap允许开发者通过LESS或SASS等CSS预处理器来自定义样式,提供了丰富的变量、混合和函数来实现高度可定制的设计。 8. ...

    element离线文档

    Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue.js 的开源前端组件库,它以其简洁易用、优雅美观的设计风格以及丰富的功能组件在...对于经验丰富的开发者,离线文档则提供了快速查找和解决问题的工具。

    jQuery入门指南教程

    本教程的“jQuery中文入门指南.doc”文档将详细阐述这些概念,并可能包含实践案例和进一步的学习指引,对于初学者来说是一份非常有价值的参考资料。通过学习和实践,你将能熟练掌握jQuery,为网页开发打开新的大门。

    CSS快速入门.rar

    通过学习这个快速入门教程,你应该能够理解和运用CSS来创建有吸引力的网页,并逐渐进阶到更高级的主题,如预处理器(如Sass、Less)、CSS网格系统(如Grid、Flexbox)和自适应布局等。无论你是网页设计师还是开发者...

    入门的CSS教程

    9. **工具与源码**:标签中的“源码”可能指的是提供了一些示例代码,学习者可以通过查看和修改这些源码来实践CSS知识。同时,`CSS.exe`可能是一个交互式的学习工具,包含模拟环境和练习项目,帮助用户更好地理解和...

    jquery开发入门整理(所需要了解的)

    jQuery提供了详尽的官方文档,覆盖了所有API的使用方法、参数说明以及示例代码,这对于初学者来说是一大福音。同时,在线教程、视频课程以及各种社区论坛也极大地降低了学习门槛。 #### 理由六:轻量级且易于集成 ...

    VScode说明文档翻译1

    安装完成后,用户可以通过内置的教程和帮助文档了解基本操作,如创建、打开和保存文件,以及基本的编辑功能。VSCode支持多种编程语言,如JavaScript、TypeScript、JSON、HTML、CSS、Sass/Less等,并且通过扩展可以...

Global site tag (gtag.js) - Google Analytics