项目完结 做个总结:

公司网站重构,整站都需要重写,终于有机会接触下 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. OpenWrt R2020.3.19 反追踪 抗污染 加速 PSW 无缝集成 UnPnP NAS

    固件说明 基于Lede OpenWrt R2020.3.19版本Lienol Feed及若干自行维护的软件包 结合家庭x86软路由场景需要定制 按照家庭应用场景对固件及软件进行测试,通过后发布 设计目 ...

  2. JPA---Spring-data-JPA---Hibernate

    Spring Data JPA--搭建环境 版本---maven  3.6.3 <properties> <spring.version>5.2.5.RELEASE</s ...

  3. 关于网上quartus ii 生成fft核出现问题解决

    ------------恢复内容开始------------ 关于网上quartus ii 生成fft核出现问题解决 1:必须把软件破解啦 2:必须把IP核破解啦 破解步骤网上也有可以直接看,一定要全 ...

  4. HTML简单的伪装与造假

    利用浏览器制止台能简单的修改内容,致使其造成伪装. 打开网页控制台后,不要管那些眼花撩乱的代码,我们直接寻找控制台顶部的 Tab 栏 找到 Console 这个 Tab,点击它,把代码 documen ...

  5. html中require.config 缓存问题

    在html中,require的官方基本用法如下: <!DOCTYPE html> <html> <head> <title>My Sample Proj ...

  6. javaweb学习之路(2)response

    写一个简单的登录页面 1.创建一个login.jsp文件 主要内容: <form action="check.jsp" method="post"> ...

  7. 以前的一些word的整理

    LAMP部署 环境:虚拟机centos7 安装apache: 命令:yum install -y httpd (在执行这个命令时,可能会遇到运行yum时出现/var/run/yun.pid已被锁定,P ...

  8. Redux:with React(一)

    作者数次强调,redux和React没有关系(明明当初就是为了管理react的state才弄出来的吧),它可以和其他插件如 Angular, Ember, jQuery一起使用.好啦好啦知道啦.Red ...

  9. Django之ORM中事务和锁

    ORM事务: 事务: 数据库事务(简称:事务)是数据库管理系统执行过程中的一个逻辑单位,由一个有限的数据库操作序列构成. 事务的特点: 并非任意的对数据库的操作序列都是数据库事务.数据库事务拥有以下四 ...

  10. ajax提交可以上传文件的form表单

    var formData = new FormData($( "#fm")[0]);       $.ajax({            url: 'webnavigationcw ...