Page 71 - css揭秘

$accent 25%, transparent 0,
transparent 75%, $accent 0),
linear-gradient(45deg,
$accent 25%, transparent 0,
transparent 75%, $accent 0);
background-position: 0 0, $size $size,
background-size: 2*$size 2*$size;
}

/* 调用时是这样的…… */
@include checkerboard(15px, #58a, tan);

在任何情况下，这样的代码量都不能算少，所以转到 SVG 方案可能是
更好的选择。图 2-44 中的贴片如果用 SVG 来实现，就像下面这样简短：

<svg xmlns="http://www.w3.org/2000/svg" SVG
width="100" height="100" fill-opacity=".25" >
<rect x="50" width="50" height="50" />
<rect y="50" width="50" height="50" />
</svg>

可能有人会说：“可是 CSS 渐变能省掉 HTTP 请求啊！”其实，对于现
代浏览器来说，我们可以把 SVG 文件以 data URI 的方式内嵌到样式表中，
甚至不需要用 base64 或 URLencode 来对其编码：

background: #eee url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" \
width="100" height="100" \
fill-opacity=".25">\
<rect x="50" width="50" height="50" /> \
<rect y="50" width="50" height="50" /> \
</svg>');
background-size: 30px 30px;

SVG 的版本不仅少了 40 个字符，而且在代码冗余度方面也明显更低。
举例来说，我们在改颜色时只需要改一处，而在改尺寸时只需要改两处。

试一试 play.csssecrets.io/checkerboard-svg

40 第 2 章 背景与边框

඀ࠡ JOEC