(一)用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 ...
随机推荐
- 用PHP获取网页上的信息相对于xpath效率低点
用php实现对网页的抓取,及信息的收集,其实就是爬数据,具体实现步骤如下,首先应引入两个文件curl_html_get.php和save_file.php文件,两个文件具体代码是这样的curl_htm ...
- STM32 使用st-link调试遇到写保护 Flash Timeout 问题的解决思路
本文介绍了如何解决STM32芯片Flash写保护导致无法下载程序,无法在线调试的问题:如果您遇到相同的问题,希望本文可以带来一些帮助: 如果本文帮到了您,请帮忙点个赞
- 通过10个实例小练习,快速熟练 Vue3.0 核心新特性
Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了. GitHub 博客地址: https://github.com/biaochenxuying ...
- Spring中bean的四种注入方式
一.前言 最近在复习Spring的相关内容,这篇博客就来记录一下Spring为bean的属性注入值的四种方式.这篇博客主要讲解在xml文件中,如何为bean的属性注入值,最后也会简单提一下使用注解 ...
- CI与CD之Docker上安装Jenkins
一.CI,CD,Jenkins的介绍 CI:持续集成(Continuous integration,简称 CI),在传统的软件开发环境中,有集成,但是没有持续集成这种说法,长时间的分支与主干脱离,导致 ...
- CSS:必须要掌握的重要基础知识点
目录 1. 盒子 2. 常用选择器 3. 优先级 4. CSS继承 5. 伪元素(pseudo-element)和伪类(pseudo-class) 6. CSS:元素定位机制(positioning ...
- linux --批量修改文件内容
由于目前测试的BIOS有一个option 发生了改变,因此我们需要在之前写好的脚本上进行修改,将旧的option 改为新的选项,因此在此处用到了批量修改文件中的内容: 1. perl 命令替换: pe ...
- [Abp vNext 入坑分享] - 6.完整接入swagger
前言 由于最近一直在修改一下排版,同时找了非技术的朋友帮忙看一下排版的问题,现在已经基本上确定了排版和样式了.更新可以恢复正常了. 作为一个写前端代码基本只写js不写css的开发,搞排版真的头疼..各 ...
- ketchup 注册中心consul使用
ketcup git地址:https://github.com/simple-gr/ketchup consul 安装 1.docker pull consul 2.docker run --nam ...
- 【比较】粒子群算法PSO 和 遗传算法GA 的相同点和不同点
目录 PSO和GA的相同点 PSO和GA不同点 粒子群算法(PSO)和遗传算法(GA)都是优化算法,都力图在自然特性的基础上模拟个体种群的适应性,它们都采用一定的变换规则通过搜索空间求解. PSO和G ...