npm 包 @pluto-css/foundation 使用教程

简介

@pluto-css/foundation 是一款基于 Sass 的 CSS 样式库，它提供了许多常用的基础样式，可以帮助我们快速构建页面。

安装

@pluto-css/foundation 可以使用 npm 方式安装，执行以下命令：

npm install @pluto-css/foundation --save

使用

引入样式表

在 Sass 项目中，通过 @import 引入样式表：

@import '@pluto-css/foundation/foundation'

如果只需要引入部分样式，可以通过 @import 引入对应文件。例如，只需要引入颜色变量：

@import '@pluto-css/foundation/settings/variables/colors'

使用 mixin

@pluto-css/foundation 提供了很多方便的 mixin，我们可以在自己的代码中使用它们。例如，使用 clearfix：

.my-element {
  @include pluto-clearfix;
}

自定义变量

@pluto-css/foundation 使用 Sass 变量来控制样式。这意味着我们可以很容易地覆盖默认变量，以自定义样式。

// 覆盖主色变量
$primary-color: #f00;

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ----------------
    --------- ------------
    ----- ---------------- ----------------------------------------------------------
    -------
      ----------- -
        -------- ---------------
        ----------------- ---------------
      -
    --------
  -------
  ------
    ---- ------------------------ ------------
  -------
-------

结语

@pluto-css/foundation 是一款非常实用的 CSS 样式库，它提供了许多常用的基础样式，可以帮助我们快速构建页面。学习和使用它可以提高我们的开发效率，推荐使用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662e81e8991b448e20d3