2013-11-16 Zhang zhengzheng
Stylus似乎并不是很有名,以至于很多人不知道它是做什么的,但提到SASS相信有不少人听说过甚至使用过很长时间。其实无论是LESS、SASS还是Stylus甚至是Absurd这些预处理工具,都是对CSS的一种延伸和强化。出现这些工具的原因很简单,CSS本身只是一种描述性质的东西,甚至它不能算是语言而是样式表,所以我们需要一个有条件语句和变量甚至是函数的东西去动态生成CSS代码来达到提高效率和增强可维护性的目的。 本文主要以Stylus语法本身和简单的使用为主要内容,它的目的是介绍和简单指南。将不会过多涉及Javascript的API调用等问题。 介绍 官方的介绍非常简短而精炼: Expressive, dynamic, r 继续阅读 »
2014-01-06 W.Y.
上一篇文章简单介绍了 Source Map,接下来我们来看看如何利用各种工具来生成 Source Map。 什么是 Source Map? Source Map 提供了一个与语言无关的方式,来将生产环境中的代码映射回开发环境中的原始代码。 在现代的开发流程中,我们的开发环境和实际线上环境的代码通常都不一样。在应用上线部署前,我们通常都要对我们的代码进行编译、合并、压缩或者其他方面的优化,这使得我们非常困难来准确定位会原始代码。但是,在生成过程中,Source Map 文件储存了这些位置信息,因此,当我们查找一行中的某个位置时,Source Map 文件可以准确定位到原始文件中的位置。这使得我们线上环境中的代码变得可读,甚至可调 继续阅读 »
2015-06-17 浩阳
content {:toc} 往前推2到3年,前端工程师还在忧心忡忡地想,移动互联网时代下,前端是不是没有生存空间了。但今天一看,在我们团队,前端工程师超过一半的工作都是在做移动端的Web或者APP的开发。移动Web或者APP在技术本质上是和做桌面端Web没有本质区别,但是移动端的坑那是非常的多,通过学习这部分内容,让你成为一名桌面移动通吃的前端开发工程师。 继续阅读 »
2016-03-21 曹强
在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件、压缩代码、检查语法错误、将Sass代码转成CSS代码等等。通常,我们需要使用不同的工具,来完成不同的任务,既重复劳动又非常耗时。Grunt就是为了解决这个问题而发明的工具,可以帮助我们自动管理和运行各种任务。 简单说,Grunt是一个自动任务运行器,会按照预先设定的顺序自动运行一系列的任务。这可以简化工作流程,减轻重复性工作带来的负担。 安装 Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令。 ```javascript sudo npm install grunt-cli -g ``` grunt-cli表示 继续阅读 »
2015-06-25 W.Y.
在大型、复杂和快速迭代的系统中,CSS 将非常难以维护。原因之一就是 CSS 没有作用域的概念,每个 CSS 都是全局的,这意味着对 CSS 的任何修改就可能导致一些 UI 的级联改变。 CSS 的扩展语言 -- CSS 预处理器,比如 Sass、Less 和 Stylus,使我们编写 CSS 更加容易,但在我看来,这些 CSS 的扩展语言并没有真正解决可扩展性问题。 在 CSS 支持作用域机制之前,我们需要一种机制,使我们的样式只与特定的 HTML 部分关联,这就是 CSS 方法论。本文将讨论如下的 CSS 方法论: Object-Oriented CSS (OOCSS) Block, Element, Modifier ( 继续阅读 »
2014-12-18 MoreFreeze
How to install Freshman theme? please make sure you have already installed git tools and ruby tools(gem) $ gem install sass $ gem install jekyll $ git clone https://github.com/yulijia/freshman21.git 继续阅读 »
2016-11-12 wilsonIs
为了UED前端团队更好的协作开发同时提高项目编码质量,我们需要将Web前端使用工程化方式构建; 目前需要一些简单的功能: 1. 版本控制 6. 编译SASS 2. 检查JS 3. 图片合并 4. 压缩CSS 5. 压缩JS 继续阅读 »
2015-12-31 浩阳
content {:toc} 起因 起因是这样的,在尝试前后端分离的这条道路上,我自己也在不断摸索,感觉要把大部分的坑都踩踩了。目前我用的技术是: webpack 自动构建 AMD 模块化 js Sass 预处理 CSS 使用前端模板引擎 handlebars 解决动态操作将 html 拼接在 js 中的问题 但最近写了一个项目类似知乎这样的多页网站。前端 url 的处理让我觉得不够优雅。我使用的是 hash 的方式处理动态 url 的,为此我专门在知乎上提了一个问题:前端如何处理动态url? 继续阅读 »