(一)用less+gulp+requireJs 搭建项目(了解less)
项目完结 做个总结:
公司网站重构,整站都需要重写,终于有机会接触下 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)的更多相关文章
- (三)用less+gulp+requireJs 搭建项目(requireJs)
首先我想说下我在写js时经常遇到的问题,尤其是很大的项目: 1.我一般会把各个功能分块写在各个js文件中: 比如弹出框: dialog.js $(document).ready(function(){ ...
- (二)用less+gulp+requireJs 搭建项目(gulp)
gulp是自动化构建工具,基于node,需要安装node,如果你不了解node也没关系,先跟着来一遍再去了解node也不迟~ 首先去node官网下载安装包 1.新建项目文件夹 在目录下shift+右键 ...
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- requirejs + vue 项目搭建2
上篇是年后的项目搭建的,时间比较仓促,感觉有点low 1.gulp-vue 文件对公用js的有依赖,以后别的同事拿去搭其他项目,估计会被喷 2.不支持vue-loader一样写模版语言和es6语法 最 ...
- 使用gulp搭建项目
项目源码地址 前期准备工作 首先确保本机安装了 node gulp中文文档 安装 gulp 命令行工具 npm install --global gulp-cli 在项目目录下创建 package.j ...
- gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
- gulp+Babel 搭建ES6环境
Gulp是什么? Gulp是一个工作流的构建系统,开发者可以使用它在网站开发过程中自动执行常见任务.Gulp是基于Node.js构建的,因此Gulp源文件和你用来定义任务的Gulp文件都被写进了Jav ...
- 基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用 ...
- ASP.NET MVC搭建项目后台UI框架—1、后台主框架
目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...
随机推荐
- Neo4j填坑记录-Neo4jClient建立节点、建立关系相关
最近一个项目需要用到知识图谱,选用了neo4j图数据库,在这过程中遇到几个坑,记录一下 1.无法登录,疯狂提示“WebSocket connection failure. Due to securit ...
- TC SRM498 Div1 1000PT(容斥原理+DP)
[\(Description\)] 网格中每步可以走\((0,\cdots M_x,0\cdots M_y)\)中任意非零向量,有\(K\)种向量不能走,分别是\((r_1,r_1),(r_2,r_2 ...
- 2018-06-30 js事件
一.js代码加载的时机 1.DOM加载完毕 -> 将js代码放到body体之下即可: 2.网页资源加载完毕-> $(window).onload(function(){ }); 3.jQ ...
- c++离散化处理大范围和重复数据
关于离散化 有些新手可能会问:离散化是什么?离散化就是将无限空间中有限的个体映射到有限的空间里去. 上面的定义肯定会有人看不懂(其实我刚开始学的时候也看不懂) 用我自己的话来说,就是在不改变数据的相对 ...
- centos7 下安装apache mysql php phpmyadmin。
1 安装mysql yum -y install mariadb-server systemctl start mariadb.service systemctl enable mariadb.ser ...
- 阿里云wordpress轻量应用服务器升级php版本
目录 脚本升级 php.ini没有加载 升级完后只能最大只能上传2m的文件的问题 脚本升级 用大佬写的脚本: https://yq.aliyun.com/articles/717769?spm=a2c ...
- Django视图函数之三种响应模式
视图函数响应处理: from django.shortcuts import render,HttpResponse,redirect (1)render 处理模板文件,可以渲染模板,第一个参数必须为 ...
- 干货分享:如何使用Kubernetes的Ingress API
您可以通过使用诸如Kong for Kubernetes的Ingress控制器(使用自定义资源定义并提供许多插件)来极大地扩展Ingress资源的功能. Kubernetes正在整个技术行业中得到采用 ...
- 依赖工程开发,编译报错Command Libtool failed with a nonzero exit code
升级AFN之后,SDK工程始终编译不通过找不到SDK.a 原因在SDK Target ->Build phases ->Link Binary With Libraries 多添加了SDK ...
- 朱刘算法 有向图定根的最小生成树poj3164
关于为什么不能用Prim求解此类问题,如下 Prim可以看成是维护两个顶点集或者看成维护一颗不断生成的树(感觉前一种说法好一点) 倘若是有向图有三个顶点1.2.3 边的情况如下 1->2: ...