简介

什么是 Lessjs?

Lessjs 是一个用于构建高性能页面的前端组件库。它基于 Web Components 开发，并提供了一系列现成的组件，例如：轮播图、视频、瀑布流等组件来帮助你更高效的开发用户界面。

通过 CDN 使用 Lessjs

你可以借助 script 标签直接通过 CDN 来使用 Lessjs：

<script async crossorigin="anonymous" src="https://static.staticdj.com/cuttlefish/v1/spz.min.js"></script>

你只需要在页面的 <head> 标签中引入该脚本，最佳的做法是在 <head> 中尽早引入该脚本。

创建一个 Lessjs 页面

你的 HTML 的结构可能如下所示：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Lessjs</title>
  <!-- ... -->
  <script async crossorigin="anonymous" src="https://static.staticdj.com/cuttlefish/v1/spz.min.js"></script>
  <style>body{-webkit-animation:-spz-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-spz-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-spz-start 8s steps(1,end) 0s 1 normal both;animation:-spz-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}@keyframes -spz-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
  <!-- ... -->
</body>
</html>

到目前为止，代码中的内容都非常简单易懂，但有几个地方我们必须要按照规范来使用。在之后的例子中，我们会默认省略 Lessjs 资源引入相关的代码。

Lessjs HTML 文档必须满足以下几个条件：

引入 CDN 的脚本必须带有 async 属性，保证页面的性能更好。
在 head 中包含一个样式代码， CSS 样式最初会隐藏页面内容，直到 Lessjs JS 加载完毕为止。
lang 属性必须取以下这些值中的一个（不区分大小写）：

lang 值	表示国家	示例
`ar-SA`	阿拉伯语(沙特阿拉伯)	أضف إلى السلة
`de-DE`	德国语	In den Warenkorb legen
`en-US`	英语	Add to cart
`es-ES`	西班牙语	Añadir a la cesta
`fr-FR`	法语	Ajouter au panier
`id-ID`	印度尼西亚语	Masukkan ke keranjang
`it-IT`	意大利语	Aggiungi al carrello
`ja-JP`	日语	カートに追加
`ko-KR`	韩语	카트에 추가하십시오
`nl-NL`	荷兰语	Voeg toe aan winkelkar
`pl-PL`	波兰语	Dodaj do koszyka
`pt-PT`	葡萄牙语	Adicionar ao carrinho
`ru-RU`	俄语	Добавить в корзину
`th-TH`	泰语	เพิ่มลงในรถเข็น
`zh-CN`	中文（简体中文）	加入购物车
`zh-TW`	中文（繁体中文）	加入購物車