2013-07-26-stylus-04-interpolation

插值

Stylus通过使用{}包裹表达式来进行插值。例如,-webkit-{‘border’ + ‘-radius’}等同于-webkit-border-radius。

比较典型的例子就是各浏览器私有属性前缀:


vendor(prop, args)
  -webkit-{prop} args
  -moz-{prop} args
  {prop} args

border-radius()
  vendor('border-radius', arguments)

box-shadow()
  vendor('box-shadow', arguments)

button
  border-radius 1px 2px / 3px 4px

编译CSS为:


button {
  -webkit-border-radius: 1px 2px / 3px 4px;
  -moz-border-radius: 1px 2px / 3px 4px;
  border-radius: 1px 2px / 3px 4px;
}

2013-07-25-stylus-03-variables

变量

我们可以声明变量,并在整个样式表中使用:


font-size = 14px

body
  font font-size Arial, sans-serif

编译CSS为:


body {
  font: 14px Arial, sans-serif;
}

变量甚至可以包含在表达式中:


font-size = 14px
font = font-size "Lucida Grande", Arial

body
  font font sans-serif

编译CSS为:


body {
  font: 14px "Lucida Grande", Arial sans-serif;
}

标识符 (变量名、 函数等) 也可以是$开始。例如:


$font-size = 14px
body {
  font: $font-size sans-serif;
}

2013-07-24-stylus-01-start

CSS 需要英雄


body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

如果我们省略大括号?


body
  font: 12px Helvetica, Arial, sans-serif;

a.button
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

那分号了?


body
  font: 12px Helvetica, Arial, sans-serif

a.button
  -webkit-border-radius: 5px
  -moz-border-radius: 5px
  border-radius: 5px

2013-07-24-stylus-02-selectors

选择器(Selectors)

缩进

Stylus类似于Python,通过缩进对齐表达代码逻辑,如下所示:


body
  color white

编译CSS为:


body {
  color: #fff;
}

如果愿意,你也可以使用冒号分隔符:


body
  color: white

2013-06-09-openlayers-cookbook-chapter-1-2

当你创建地图相关程序时,首要任务就是创建地图本身。地图是整个应用程序的核心,是数据和数据可视化的载体。

本章节将指引我们创建第一个非常简单的在线地图应用程序。

假设你已经配置好自己Web服务器。请记住我们的示例无非就是HTML,CSS和JavaScript代码,因此我们需要一个Web服务器,以便通过浏览器访问我们的程序。

准备

编写OpenLayers程序最主要是编写HTML代码,当然,也包括JavaScript代码。所以,我们仅仅需要一个文本编辑器就可以开始我们的工作。

有很多很强大文本编辑器,其中有很多具备web编程特性。因为我们要开始探索的是一个开源项目-OpenLayers,所以我也推荐使用开源的文本编辑器。

对于Windows用户,推荐使用Notepad++(http://notepad-plus-plus.org),它非常简洁和快捷,提供语法高亮,并且可以通过插件来扩展功能。

另外,除了文本编辑器,你也可以使用集成开发环境,它不仅仅提供语法高亮功能,还包括自动提示、代码跳转等很多功能,让你工作更加事半功倍。

有两个集成开发环境开源项目:EclipseNetBeans,两者都是基于Java的项目,可以在所有平台上运行。

2013-06-08-openlayers-cookbook-chapter-1-1

如同每段历史都有一个开始,每份食谱都是从调味料开始。

在正式开始使用Openlayers创建我们自己的地图程序之前,本章先介绍一些基础的必备知识。

正如我们将在本章和接下来的章节所见,OpenLayers是一个庞大而复杂的框架,但同时也非常强大和灵活。

与其他库相比,譬如Leaflet-一个非常好而且简单的javascript库,OpenLayers试图实现开发者创建一个W......

2013-04-14-fun-with-gis-using-aejee-7-exploring-fires

公众更多了解自然的方法之一就是火灾。人们已经了解到火在许多生态系统中发挥重要的作用。然而,同样它们也可以引起灾难性的事件,并且远远超出预料。本周,在”Fun With GIS”系列中,使用AEJEE工具,我们将看一看火灾的冰山一角。

通过Geography Network可以非常方便的查看过去的火灾记录。添加”ESRI_MODIS”图层并放大......