项目完结 做个总结:

公司网站重构,整站都需要重写,终于有机会接触下 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. 微信小程序下拉刷新时有部分区域不随着下拉移动

    问题 区域元素使用(position: fixed),小程序页面下拉刷新时,这部分区域不会随页面下拉移动. 如何解决 删除设置的top属性

  2. 如何使用apt-get在ubuntu系统上安装OpenJDK 8

    文章目录 添加ppa仓库 设置openjdk版本 查看java 版本 Android 8.1 系统编译的时候需要安装OpenJDK 8,这里如果可以自己下载源码编译安装,当然本想编译Android系统 ...

  3. LabVIEW(数据库自动编号)

    数据库如果字段是自动编号,则在插入数据时,可以不考虑.

  4. sqli-labs之Page-1

    搭建与安装 参考:https://www.fujieace.com/penetration-test/sqli-labs-ec.html 下载:sqli-labs下载 第一关:单引号报错注入 ?id= ...

  5. (mysql)数据库笔记

    一.数据库的特点: a.实现数据共享  b.采用特定的数据类型. c.具有较高的数据独立性 d.具有统一的数据控制功能. 二.mysql的优势: a.速度:运行速度快 b.价格:mysql对多数个人来 ...

  6. Error: ER_BAD_FIELD_ERROR: Unknown column 'xxx' in 'where clause'

    node中调用mysql模块读写时候,如果直接插入字符串: connection.query('SELECT * from  users WHERE name=' + data.name , call ...

  7. React-Redux填坑

    这篇东西以后慢慢补充. Q:今天遇到一个问题是 TypeError:dispatch is not a function A:一直报这个type error,调试了好一阵,最后在tof上看到网友说co ...

  8. Redux:data flow

    我们使用react,是为了构建可复用的高性能的视图层,学习redux是为了处理视图组件中随应用复杂度提升而变得难以控制的state.说白了,是为了视图. 在了解了action.reducer和stor ...

  9. vue中使用mixins

    Mixins (混合或混入)——定义的是一个对象 1.概念:一种分发Vue组件可复用功能的非常灵活的方式.混入对象可以包含任意组件选项(组件选项:data.watch.computed.methods ...

  10. ReactNavigation中如何实现页面跳转

    一.ReactNavigation中如何实现页面跳转 因为每个屏幕组件(具有路由地址的组件)都是由App根组件自动创建并挂载的,App组件 在创建屏幕组件时,会自动传递进来一个props:   nav ...