CartoCSS指南

关于取值类型的说明

这里列出了CartoCSS中所有属性的取值类型及其说明。

颜色型（Color）

CartoCSS可以使用一系列不同的方法表示颜色：HTML风格的16进制值，RGB值，RGBA值，HSL值或HSLA值都可以，还可以使用HTML预定义颜色名，像yellow、blue等。

#line {
  line-color: #ff0;
  line-color: #ffff00;
  line-color: rgb(255, 255, 0);
  line-color: rgba(255, 255, 0, 1);
  line-color: hsl(100, 50%, 50%);
  line-color: hsla(100, 50%, 50%, 1);
  line-color: yellow;
}

这里特别需要强调的是对HSL值的支持，这其实是比RGB值更易用的颜色表达方式（参见这里）。CartoCSS中还支持几种颜色函数，这是从LESS中借用的概念（参见这里），例子如下：

// 把颜色调亮或调暗
lighten(#ace, 10%);
darken(#ace, 10%);

// 饱和度调高或调低
saturate(#550000, 10%);
desaturate(#00ff00, 10%);

// 提高或降低颜色的透明度
fadein(#fafafa, 10%);
fadeout(#fefefe, 14%);

// 按照一定角度旋转色盘
spin(#ff00ff, 10);

// 将两种颜色混合
mix(#fff, #000, 50%);

以上这些函数的参数可以是颜色值，也可以是颜色名，还可以是其它颜色函数。

浮点型（Float）

浮点数是数值类型的时髦说法。在CartoCSS中，这指的就是一个数值，没有单位，但其实所有的单位都是像素。

#line {
  line-width: 2;
}

还可以对数值类型做简单运算：

#line {
  line-width: 4 / 2; // 除
  line-width: 4 + 2; // 加
  line-width: 4 - 2; // 减
  line-width: 4 * 2; // 乘
  line-width: 4 % 2; // 取余
}

统一资源描述符型（URI）

URI是URL的一种时髦说法（译注：这实在不敢苟同，在http协议和REST架构中，URI和URL都有明确的定义，它们是不同的）。当一个属性的值类型是URI时，用户可以像在HTML中使用url('place.png')一样的表示方法。URL地址上的引号不是必需的，但最好加上。URI可以指向本地文件系统，也可以是互联网上资源的链接地址。

#markers {
  marker-file: url('marker.png');
}

字符串型（String）

字符串也就是文本类型。在CartoCSS中，字符串应该有引号包围。字符串可以是任意文本，但在text-name和shield-name属性中，可以使用中括号包围的数据字段名来表示。例如：

#labels {
  text-name: "[MY_FIELD]";
}

布尔型（Boolean）

布尔类型即是或否，取值为true或false。

#markers {
  marker-allow-overlap:true;
}

表达式型（Expressions）

表达式是一种语句，它可以将数据字段、数值以及其它类型灵活的组合起来。前面提到的"[FIELD]"形式包含了表达式。实际的表达式可以不用加引号就执行加、减、乘、除、连接等CartoCSS语法支持的操作。

#buildings {
  building-height: [HEIGHT_FIELD] * 10;
}

数列型（Numbers）

数列型是逗号分隔的一组有序数值。数列类型在用于配置虚线样式时，其中的数字交替表示的是实线段长度、间隔长度和实线段长度。

#disputedboundary {
  line-dasharray: 1, 4, 2;
}

百分数型（Percentages）

在CartoCSS中，百分号%表示值/100。它可以用于表示比例的属性，例如透明度。

注意，百分数不能用于定义宽度、高度等属性。这一点与CSS不同，因为在CartoCSS中没有CSS中层次化的页面要素和页宽。它们在这里只是除以100以后的值。

#world {
  // 这种表达方式与...
  polygon-opacity: 50%;

  // ...这种方式效果一样
  polygon-opacity: 0.5;
}

函数型（Functions）

这种类型可以包含一组逗号分隔的函数。例如，各种变换都是用functions作为值类型，而且这些函数还可以串接起来。

#point {
  point-transform: scale(2, 2);
}