前端网络开发是一个不断变化的领域，我们使用的工具，如框架和库，使我们的开发过程更加有效和令人兴奋，也在不断地发展。
CSS框架是前端开发的一个重要方面。它们帮助我们快速、一致地创建现代用户界面（UI），并通过一组执行特定任务的CSS类来提供一个抽象的层次。
在这篇文章中，我们将介绍Uniform CSS，它是一个可配置的实用类生成器和CSS框架，完全由Synthetically awesome style sheet（Sass）开发。
什么是Uniform CSS？
据其背后的团队介绍，Uniform CSS是 "一个完全可配置的实用程序生成器和CSS框架，完全用Sass开发，所以你可以获得实用程序优先的工作流程的力量，而不会失去Sass的生产力。"
Uniform CSS使用的工作流程类似于Tailwind CSS或StemCSS，开发者使用框架提供的预定义CSS类来设计令人惊叹的用户界面。Uniform CSS的独特之处在于，它完全是用Sass构建的，而且完全可以用功能性CSS进行配置。
Uniform CSS vs. Tailwind CSS
那么，Uniform CSS与其他CSS框架（如Tailwind CSS）有何不同呢？首先，它是完全可配置的，因为它允许开发者在框架内定制一切。他们可以自定义前缀和定界符，删除和扩展颜色，甚至修改语法和添加或删除属性。
这就是我的意思。
// All configs are done in the scss file
// main.scss
@use "uniform" as * with (
// add configurations here...
$config : (
important : true,
prefix : example,
delimiter : "-",
colors: (
green-color : green,
yellow-color : yellow
),
exclude : (
padding,
color,
margin,
),
include : (
all
// includes all properties.
)
)
);
上面的代码将输出到我们的CSS文件，在那里我们可以访问类，像这样。
// main.css
.example-bg-green-color {
background-color : green !important;
}
.example-bg-yellow-color {
background-color : yellow !important;
}
现在我们可以在我们的HTML代码中使用这些实用工具。
因为Uniform CSS是建立在Sass之上的，所以它可以编译成普通的CSS。但它也提供了通常在Sass中工作的优势，如供应商对CSS属性、混合器、函数等的前缀。
而且，如果这些好处还不够，当你使用Uniform CSS时，你不需要等待它获得新的CSS属性--你可以直接在你的Sass配置中添加你自己的属性。
// main.scss
@use "uniform" as * with (
$config: (
utilities: (
leading-trim: (
responsive: true,
shorthand: leading,
properties: (leading-trim),
variants: (
trim: both
)
),
text-edge: (
shorthand: text,
properties: (text-edge),
variants: (
cap: cap alphabetic
)
)
)
)
);
这可以编译成。
/* main.css */
.leading-trim {
leading-trim: both;
}
.text-cap {
text-edge: cap alphabetic;
}
安装Uniform CSS
Uniform的设置相当简单。有三种方法可以在我们的项目中使用Uniform CSS。让我们来看看每一种方法。
克隆GitHub的存储库
只需将GitHub仓库克隆到你的项目文件夹中。
git clone https://github.com/ThinkUniform/uniformcss
现在我们需要把Uniform添加到我们的.scss 文件中，编译它，并观察变化。下面是如何做的。
// add this to your .scss file
@use "uniform" as *;
// now we compile using one of the build scripts made available to us or just do it using a sass build process of your choice
yarn uniform
通过这种方式安装，我们可以完全配置Uniform以满足我们的需要。
通过npm安装
如果你已经安装了Node.js，那么只需使用这个命令。
npm install uniformcss
// add this to your .scss file
@use "uniform" as *;
现在我们可以使用首选的Sass构建过程进行编译和观察变化，比如Visual Studio Code中的watch Sass 扩展。通过这种方式安装Uniform，我们还可以完全配置它以满足我们的需要。
从CDN安装
要快速使用Uniform，只需将CDN链接添加到HTML文档的头部标签中。
https://cdn.jsdelivr.net/npm/uniformcss@1.0.0/dist/uniform.min.css
使用这个选项，如果你使用预编译的版本，你只能进行基本的调整，所以你将无法获得更广泛的定制选项。
要在使用CDN选项时配置Uniform，只需在:root 伪元素中定义CSS变量作为覆盖，就像这样。
:root{
--font-sans : 'Poppins', sans-serif;
--primary-700 : 255, 224, 249
}
现在你可以在你的HTML文档中使用这些变量。
<h1 class="font-sans color-primary-700">Hi there!</h1>
在你的项目中使用统一的CSS
现在，让我们使用Uniform实用类建立一个简单的卡片组件。
因为这是一个小项目，我们先用CDN安装Uniform。但是，如果你想要额外的配置选项，你应该通过npm来安装，因为CDN选项并没有为我们提供太多的灵活性。
来吧，把下面的CDN链接添加到你的HTML文件的头部标签。
https://cdn.jsdelivr.net/npm/uniformcss@1.0.0/dist/uniform.min.css
我们现在可以将所有的统一CSS实用类应用于我们的HTML卡片组件。
<main class="flex justify-content-center relative top-80 font-serif">
<div class="flex flex-col justify-content-between shadow-lg w-448 radius-lg">
<img src="https://images.unsplash.com/photo-1593990965215-075c1f918806?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="A black man with dark shades on" class="h-288 object-cover object-center radius-lg">
<div class="text-center p-12">
<h2 class="ultrabold text-2xl p-10">Nelson Michael</h2>
<p class="text-sm">thatsnotreallymyface@gmail.com</p>
</div>
<div class="flex justify-content-between m-auto w-320 p-20 text-center">
<div>
<h3 class="extrabold text-xl">25</h3>
<p class="text-sm">Posts</p>
</div>
<div>
<h3 class="extrabold text-xl">350</h3>
<p class="text-sm">Following</p>
</div>
<div>
<h3 class="extrabold text-xl">1.5k</h3>
<p class="text-sm">Followers</p>
</div>
</div>
</div>
</main>
这里有一个 API参考，显示了所有可用的类，这就是我们最终构建的样子。
参见CodePen上King nelson（@D_kingnelson）的Pen
uniform-css-example。
我们能够在不碰触我们的CSS文件的情况下，通过简单地添加几个类来创建这个简单的卡片组件。
下面是另一个例子。
参见CodePen上King nelson(@D_kingnelson)
的Pen
uniform-css-example-2。
上面的例子展示了用Uniform创建可重复使用的组件是多么简单。除了需要调整配置外，我们在不碰触我们的CSS文件的情况下完成了这个任务。
浏览器对Uniform CSS的支持
Uniform CSS目前支持Chrome、Firefox、Edge和Safari的稳定版本。它不支持任何版本的Internet Explorer，包括Internet Explorer 11。
总结
Uniform CSS是一个很好的前端开发工具，因为它提供了许多预定义的类，同时允许自定义，并能够随意添加和删除类。我希望你觉得这个教程对你有帮助。
The postUsing Uniform CSS to build modern UIappeared first onLogRocket Blog.
