文档章节

Less-学习前的准备工作

透笔度
 透笔度
发布于 2015/10/16 13:22
字数 591
阅读 92
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

学习less,我们肯定要有相应的环境,我们预览网址

http://www.1024i.com/demo/less/

提供了2种方法,我们采用服务端用法,不过只是用前半部分,就是把写好的less文件转为css文件,html引用的还是css文件,仅仅作为css开发工具

我们要做的一些工作

1.nodejs的安装,这个不多说

http://my.oschina.net/u/2352644/blog/487488

2.安装less,我们进入cmd窗口执行

npm install -g less

3.检测less是否安装

lessc -v

4.都无提示表示成功安装,这些步骤非常简单

5.我们创建一个文件夹,我的叫 lessdemo,下面创建demo.html 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>less</title>
<link rel="stylesheet" type="text/css" href="less.css"/>
</head>
<body>
 <div class="demo">less</div>
</body>
</html>

 6.我们在lessdemo下创建less.less文件,里面会写入被less支持的语法,less对css兼容,我们放入一段原生css

.demo{
height: 93px;
color: #000;
font-size: 22px;
line-height: 93px;
border-radius: 10px;
overflow: hidden;
width:200px;
border:1px solid #000;
}

 7.lessdemo下有以下文件

我们预览demo.html,是不带样式的,因为没有less.css

8.我们cmd窗口切换到lessdemo文件夹

我的命令:

cd nodejs/lessdemo

9.当前目录找到,已经写好了less.less,我们执行less命令,进行编译

lessc less.less>less.css

10.我们在lessdemo下就可以看到编译生成的less.css了,预览html页面,看到有圆角和高度等样式的内容

11.其他

1.我们先到定位到存放less文件目录

2.   lessc   编译命令

3.   >        表示编译后的css存放在当前目录下

 

作为前端,肯定没用过也会听说过less这种预处理css,比较热门的除了less还有sass和styuls

sass是最早出现的,我们知道css非常简单,是不带语法的,开发人员为了让他带有语言功能,这门技术出现了,sass对比less语法更严格

less是在sass之后出现,借鉴了sass,语法上比较接近css

styuls这是来自nodejs社区,为node开发提供的预处理css技术

对比之下我们学习less和styuls比较适合前端,不过less应用的更多一些,学习预处理css技术,我们入门就从学习less开始!

© 著作权归作者所有

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
2017/1/20工作日志

1、建行对公账号预约开户项目启动前准备工作 2、磐石银行项目招标准备工作 3、龙卡二维码核对一一检查确认无误后发给客户 4、测试长发展商城优化效果。 5、学习性能测试。 6、测试建行信用卡...

长春李某人
2017/01/20
2
0
关于公司LOGO的非重要注意事项

前情 考虑到LOGO以后的打印问题。去集会前和回来后都在头疼担心色差的问题。加上不知道印刷行业的技巧,我只能尽力保证印刷前的准备工作是正确的,方便印刷的时候微调颜色。 方法 依照Adobe...

漫乃
2017/03/20
3
1
ExtJS4.2学习(20)动态数据表格之前几章总结篇1

本节采用技术:SpringMVC+Jetty+ExtJs4.2+Maven+MySQL5.1以上+SLF4J(前几节学习的大家不知道记住了没,现在来总结复习下,顺便加点新技术) 学习本节前的准备:Eclipse高版本,Jetty插件,M...

shyy8712872
2014/05/08
0
0
webrtc初级教程-仝利-专题视频课程

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/rootusers/article/details/83551794 webrtc初级教程—9204人已学习 课程介绍 从基础的怎么从网上下载webrtc教...

BIGBurning
2016/02/25
0
0
Swift游戏开发实战教程(大学霸内部资料)

Swift游戏开发实战教程(大学霸内部资料) 试读下载地址:http://pan.baidu.com/s/1sj7DvQH 介绍:本教程是国内第一本Swift游戏开发专向资料。 本教程详细讲解记忆配对、太空侵略者、Simon记...

大学霸
2014/11/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

thinkphp6 视图变量输出

thinkphp6 视图变量输出 视图默认把变量输出为字符串类型,有些时候需要保证原来的类型,比如html字符串 raw参数,禁止转换 {$content.content|raw} 支持多个参数,比如解码php内置的htmlspe...

DrChenXX
15分钟前
3
0
【搞定Jvm面试】 Java 内存区域揭秘附常见面试题解析

本文已经收录自笔者开源的 JavaGuide: https://github.com/Snailclimb (【Java学习+面试指南】 一份涵盖大部分Java程序员所需要掌握的核心知识)如果觉得不错的还,不妨去点个Star,鼓励一下!...

SnailClimb
25分钟前
3
0
jQuery如何根据数据属性值查找元素?

我有以下场景: var el = 'li'; 页面上有5个<li> ,每个都有一个data-slide=number属性(数字分别为1,2,3,4,5) 。 我现在需要找到当前活动的幻灯片编号,该编号映射到var current = $('ul...

javail
37分钟前
3
0
LaTeX自定义宏包、类文件的默认搜索路径设置方法

  对于自定义的LaTeX宏包与类,在调用时可以通过在命令\documentclass{}与\usepackage{}命令中指定完整路径或者相对路径,这样确实可以调用,但是编译时总是有烦人的警告信息,让人不爽。还...

陆巍_
39分钟前
3
0
计算机电子书 2018 BiliDrive 备份

下载方式 根据你的操作系统下载不同的 BiliDrive 二进制。 执行: bilidrive download <link> 链接 <!--more--> 文档 链接 Webpack 中文指南.epub (409.01 KB) bdrive://ce58b7b58292296a61......

ApacheCN_飞龙
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部