项目完结 做个总结:

公司网站重构,整站都需要重写,终于有机会接触下 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. 将csv文件导入sql数据库

    有一个csv文件需要导入到Sql数据库中,其格式为 “adb”,"dds","sdf" “adb”,"dds","sdf" ...

  2. 【漫画】JAVA并发编程 如何解决原子性问题

    原创声明:本文转载自公众号[胖滚猪学编程],转载务必注明出处! 在并发编程BUG源头文章中,我们初识了并发编程的三个bug源头:可见性.原子性.有序性.在如何解决可见性和原子性文章中我们大致了解了可见 ...

  3. Flutter中如何使用WillPopScope

    老孟导读:在Flutter中如何实现点击2次Back按钮退出App,如何实现App中多个Route(路由),如何实现Back按钮只退出指定页面,此篇文章将告诉你. WillPopScope WillP ...

  4. zabbix-agent客户端安装与配置

    zabbix-agent客户端安装与配置 下载abbix-agent客户端源码软件包 解压agent源码包,并且切换到解压目录. [root@localhost ~]# tar -zxf zabbix ...

  5. [hdu4627 The Unsolvable Problem]数论

    题意:给一个数n,找一个正整数x<n,使得x和n-x的最小公倍数最大. 思路:显然x和n-x越接近越好,gcd必须为1(贪心).从大到小考虑x,如果n为奇数,则答案就是x=n/2,如果n为偶数, ...

  6. 解决:idea中右键项目找不到subversion

    2019.02版IDEA,刚刚发现更新不了项目,但是我记得之前的项目是可以直接更新的.然后,我打开之前的项目找到相关项,对比了一下,找到了方法: file--settings--Version Con ...

  7. PC端软件配置

    一,cmder软件安装 二,Snipaste软件安装 三,vwmare虚拟机安装 四,sublime安装 五,notepad++安装 六,Python环境 anaconda navigator安装 七 ...

  8. Python-实现sign签名接口校

    前言 在之前的随笔中,我们已经学过了如何使用使用JMeter和Postman实现sign签名接口校验的接口测试,今天我们来学习一下如何写Python脚本实现签名接口的接口测试. 签名接口: 地址: h ...

  9. HTML标签和属性三

    八.列表 1.列表的作用 让数据有条理的显示,在数据之前添加标识 但是现在页面布局,经常会使用到无序列表 2.列表的组成 ①有序列表 <ol> <li></li> ...

  10. mysql小白系列_06 备份与恢复

    1.使用mydumper工具全库备份. 1)源码编译安装 2)全库备份 2.误操作truncate table gyj_t1;利用mysqldump的备份和binlog日志对表gyj_t1做完全恢复. ...