在前端开发中，快速、简便地实现一些常用样式是很有必要的。而 fnss 就是一个非常好用的 npm 包，它提供了许多实用的 CSS 样式和工具函数，可以非常方便地帮助我们构建漂亮的页面。
本教程将逐步介绍 fnss 的安装和基础使用方法，以及常用样式和工具函数的详细介绍和示例。
安装
要使用 fnss，我们首先需要安装它。在你的项目中打开一个终端，运行以下命令：
npm install fnss
安装完成后，我们就可以在代码中使用它了。
使用方法
fnss 非常易用，我们只需在需要的 CSS 样式上添加对应的类名即可。例如，如果我们想给某个元素添加圆角和阴影效果，我们只需在样式类名上加上 radius 和 shadow 类就可以了：
<div class="radius shadow">Hello, world!</div>
这样就可以将这个 div 元素设为具有圆角和阴影效果的样式了。
fnss 也提供了一些工具函数，可以帮助我们更加方便地实现一些功能。例如，rem(val) 函数可以将像素值转换为 rem 值，便于我们在不同屏幕大小的设备上实现统一的字体大小：
body {
font-size: rem(14px);
}我们通过 rem(14px) 将像素值转换为 rem 值后，可以保证不同设备上的字体大小始终保持一致。
常用样式
fnss 提供了许多有用的样式类，用于实现常见的布局和样式效果。以下是一些常用样式的介绍和示例代码：
文本样式
| 类名 | 作用 |
|---|---|
ellipsis |
文本溢出时使用省略号显示 |
link |
链接样式 |
bold |
粗体字样式 |
italic |
斜体字样式 |
underline |
下划线样式 |
line-through |
删除线样式 |
primary |
主题色字体（可自定义主题色，详见后文） |
示例代码：
<p class="ellipsis">这是一段很长很长的文本，如果不溢出就好了</p> <a href="#" class="link">这是一个链接</a> <p class="bold">这是粗体字</p> <p class="italic">这是斜体字</p> <p class="underline">这是下划线</p> <p class="line-through">这是删除线</p> <p class="primary">这是一段主题色文本</p>
背景样式
| 类名 | 作用 |
|---|---|
center-bg |
背景居中显示 |
no-repeat |
背景不重复 |
cover |
背景图片自适应，裁剪不需要部分 |
contain |
背景图片自适应，不裁剪 |
primary-bg |
主题色背景（可自定义主题色） |
textured-bg |
灰色渐变背景 |
vertical-line |
垂直分割线 |
horizontal-line |
水平分割线 |
示例代码：
<div class="center-bg no-repeat" style="background-image: url(https://example.com/bg.jpg)"></div> <div class="cover" style="background-image: url(https://example.com/bg.jpg)"></div> <div class="contain" style="background-image: url(https://example.com/bg.jpg)"></div> <div class="primary-bg">这是一段主题色背景</div> <div class="textured-bg">这是一段灰色渐变背景</div> <div class="vertical-line"></div> <div class="horizontal-line"></div>
常用布局样式
| 类名 | 作用 |
|---|---|
flex-center |
水平和垂直居中布局 |
clearfix |
清除浮动 |
pull-left |
左浮动 |
pull-right |
右浮动 |
inline-block |
内联块级元素（常用于按钮） |
示例代码：
<div class="flex-center">这是一个居中的 div 元素</div> <div class="clearfix"></div> <!-- 清除浮动 --> <p class="pull-left">左浮动文字</p> <p class="pull-right">右浮动文字</p> <div class="inline-block">这是一个内联块级元素（按钮）</div>
工具函数
除了样式类以外，fnss 还提供了一些有用的工具函数，它们可以帮助我们更加方便地实现一些功能。
rem(val)
该函数用于将像素值转换为 rem 值，使得页面上的字体大小可以在不同尺寸的屏幕上自适应。
示例代码：
p {
font-size: rem(16px);
}px2em(val, context)
该函数用于将像素值转换为 em 值，可以在某些情况下替代 rem 值来实现页面字体大小的自适应。
示例代码：
p {
font-size: px2em(16px, 16px);
}path(asset)
该函数用于定位项目中的资源文件（如图片、样式表等）。使用该函数可以在多层级目录下定位资源文件，避免了手动输入路径带来的问题。
示例代码：
background-image: url(path(images/bg.jpg));
当我们的项目目录结构如下：
│ index.html
│
├───css
│ style.css
│
└───images
bg.jpg调用 path(images/bg.jpg) 函数即可得到正确的资源路径。
自定义主题色
fnss 提供了一些默认的主题色，但我们也可以通过修改 SCSS 变量的方式来自定义主题色。
首先，在我们的项目中建立一个名为 custom.scss 的文件。在该文件中，我们可以定义我们需要的主题色变量，比如：
$primary: #f00;
这样，我们就使用了红色作为主题色。
接着，我们需要在项目的入口 SCSS 文件中引入 custom.scss 文件，并以全局变量的形式来定义我们的主题色：
@import 'custom.scss'; $fnss-themes: (default: $primary); @import '~fnss/scss/fnss';
这里默认为主题 default 指定了我们刚才定义的 $primary 变量。现在，fnss 将会使用我们自定义的主题色了。
总结
本教程介绍了 fnss 的安装和使用方法，以及一些常用样式和工具函数的用法和示例。fnss 可以帮助我们更加方便地实现一些常用的样式和功能，让我们的页面更加漂亮、易用。希望大家通过本教程能够更好地掌握 fnss 的使用技巧，在实际开发中获得更高的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1281e8991b448daa87