核心 CSS

SACSS 的核心是命名规则，核心代码是一个 CSS 文件。

安装

$ npm i sacss

使用

<link rel="stylesheet" href="./node_modules/sacss/index.css" />

全局引入 sacss/index.css 文件即可，这个文件包含了大部分构建 UI 结构 所需要的零件，比如：

• display 布局
• float 布局
• flex 布局
• position 布局
• font-weight 100～900

... 更多请查看源文件。

整体核心代码未压缩只有 2kb，压缩版本只有93b，全局引入不会有任何的压力，SACSS 也只推荐全局引用。

对于构建 UI 的另一部分样式，可以点击这里了解。

⚠️ 注意： node_modules 中的文件引入需要构建工具的支持。

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sacss/index.min.css" />

如果你没有类似 webpack 的构建工具，可以直接使用 jsdelivr CDN，或者直接 下载 这个文件本地引入使用。