项目完结 做个总结:

公司网站重构,整站都需要重写,终于有机会接触下 less,gulp和requireJs,因为以前的工作就是写几个活动页,并没有机会用这些工具,废话不多说,先看下完成后的项目目录:

上图是 less 文件目录,根据功能分的很细,有头部,底部,弹出框,按钮,颜色.....等等,这样写的好处很多,后期比较容易维护,易于修改,而且结构清晰。

我先写几个常用的less的功能,想了解更多可以去官网,很简单。

由于是演示,我就先不用gulp工具了,我用的Webstorm有自动编译功能。

1.嵌套 : 可以节省大量时间

less支持嵌套样式类(下图2)

图1:

图2:

2.变量

常用在定义全局变量如颜色等;

图3:

3.参数

图4:

4.不带参数的嵌套 (注意和图2的不同)

图5:

5.模式匹配和导引表达式

有些情况下,我们想根据传入的参数来改变混合的默认呈现,比如下面这个例子:

图6:

:

6 less 自定义函数 :lighten darken fadein fadeout…等等

7.when (lightness(@a)返回颜色的亮度百分比)

具体的功能区官网看啦 讲得很详细~~

先去吃饭 ,回来继续

(一)用less+gulp+requireJs 搭建项目(了解less)的更多相关文章

  1. (三)用less+gulp+requireJs 搭建项目(requireJs)

    首先我想说下我在写js时经常遇到的问题,尤其是很大的项目: 1.我一般会把各个功能分块写在各个js文件中: 比如弹出框: dialog.js $(document).ready(function(){ ...

  2. (二)用less+gulp+requireJs 搭建项目(gulp)

    gulp是自动化构建工具,基于node,需要安装node,如果你不了解node也没关系,先跟着来一遍再去了解node也不迟~ 首先去node官网下载安装包 1.新建项目文件夹 在目录下shift+右键 ...

  3. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  4. requirejs + vue 项目搭建2

    上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...

  5. 使用gulp搭建项目

    项目源码地址 前期准备工作 首先确保本机安装了 node gulp中文文档 安装 gulp 命令行工具 npm install --global gulp-cli 在项目目录下创建 package.j ...

  6. gulp进阶构建项目由浅入深

    gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...

  7. gulp+Babel 搭建ES6环境

    Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...

  8. 基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境

    基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用 ...

  9. ASP.NET MVC搭建项目后台UI框架—1、后台主框架

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

随机推荐

  1. python学习之如何一次性输出多个变量的值

    如果要输出多个结果 ,中间使用逗号隔开,且引用变量为%(变量1,变量2,变量3)例如

  2. 深度剖析西门子PLC的开放式TCP通信

    对于自控或电气工程师来说,西门子PLC是每个人都非常熟悉的一款PLC品牌:而对于上位机开发工程师来说,Socket通信或TCP/IP协议也是必须要掌握的一种通信方式.刚好手头有一款西门子的200Sma ...

  3. LeetCode二分专题

    二分 二分模板 两个模板:1.最大值最小模板一,2.最小值最大用模板二 单调性.两段性的性质 版本1:二分绿色端点是答案,最大值最小 int bsearch_1(int l, int r){ whil ...

  4. 关于redis内存分析,内存优化

    对于redis来说,什么是最重要的? 毋庸置疑,是内存. 一.reids 内存分析 redis内存使用情况:info memory 示例: 可以看到,当前节点内存碎片率为226893824/20952 ...

  5. SpringBatch异常To use the default BatchConfigurer the context must contain no more thanone DataSource

    SpringBoot整合SpringBatch项目,已将代码开源至github,访问地址:https://github.com/cmlbeliever/SpringBatch 欢迎star or fo ...

  6. mysql 获取当前指定分钟的时间

    SELECT NOW(); MINUTE); 结果:

  7. Mybatis系列二-快速开发

    mybatis学习系列第二篇 分页 在网页中常常用到,在查询数据库内容并想将其输出的时候,因为有时有多组数据,一页展示过于突兀,所以会用到分页操作. 在sql用limit来分页. 首先是UserMap ...

  8. Spring Cloud 系列之 Consul 配置中心

    前面我们已经学习过 Spring Cloud Config 了: Spring Cloud 系列之 Config 配置中心(一) Spring Cloud 系列之 Config 配置中心(二) Spr ...

  9. python 调用ldap同步密码

    windows + python2.7 安装 python-ldap https://www.lfd.uci.edu/~gohlke/pythonlibs/#python-ldap 2.python ...

  10. 08-Python之路---初识函数

    Python之路---初识函数️ 程序员三大美德: 懒惰 因为一直致力于减少工作的总工作量. 缺乏耐性 因为一旦让你去做本该计算机完成的事,你将会怒不可遏. 傲慢 因为被荣誉感冲晕头的你会把程序写得让 ...