sass架构如何搭建 sass平台怎么做结构

转载

lazihuman 2024-05-28 22:27:57

文章标签 sass架构如何搭建 css java vue python 文章分类 架构后端开发

sass架构如何搭建 sass平台怎么做结构_css

在前两篇文章中，我们使用NPM脚本和Parcel配置了一个项目启动器存储库。我倾向于为每个项目采用或多或少相同的Sass架构，因此我希望我的样板包括我需要立即开始编写代码的SCSS文件和文件夹。这是我首选的体系结构，大致基于Harry Roberts的 ITCSS （倒三角CSS）以及我以前的代理公司Mud的样板：

Config它通常包含三个文件：在这里，我定义了整个项目中使用的所有Sass变量，mixins和函数。我通常将单个文件用作变量，包括断点，颜色，间距和其他任何内容。但是没有理由不能将变量文件分成多个文件，这对于大型项目可能是个好主意。
基础这里的几乎所有内容都涉及在元素选择器而不是类上编写样式。它包括所有重设（例如* { box-sizing: border-box; } ）以及版式和表单元素的基本样式，其中某些样式稍后可能会在组件级别被覆盖。
对象任何可能出现在多个组件中的可重用的小型UI都属于此处。我从buttons.scss文件开始，因为，几乎每个项目都有按钮！但是我只会在需要时才添加其他人。
全局变量我喜欢将要在每个页面上使用的所有组件（例如页眉和页脚）与其余组件放在单独的文件夹中。我还在这里添加通用布局类-例如，如果我有一个要在很多地方使用的网格。我更喜欢使用类而不是混合类，因为它的抽象水平要低一个级别。
组件这用于较大的UI块，例如英雄区，卡片，媒体对象等。在这里，我将编写大量CSS，但是我一开始就将其留空，以便可以在需要时添加单个组件文件。
实用程序这是针对可以应用于任何元素的单一用途，可重用的原子（或实用程序）类。例如，以下代码可用于在应用了此类的所有元素上设置垂直填充：

.padding-v {
	padding-top:var( --pad );
	padding-bottom:var( --pad );
}

我倾向于不使用太多这些文件，因此在需要之前我将其保留为空。

因此，为了结束我们的项目入门，我将在src / scss目录中添加以下文件结构：

01-config
	_variables.scss
	_functions.scss
	_mixins.scss
02-base
	_resets.scss
	_typography.scss
	_forms.scss
03-objects
	_buttons.scss
04-globals
	_header.scss
	_footer.scss
	_layout.scss
05-components
06-utilities

您可能会注意到每个文件夹都有一个数字前缀–这样，在文件系统中查看时，视觉顺序将反映导入顺序。这样可以更快，更轻松地找到我想要的文件，并且可以避免任何混乱。

您可能会拥有自己喜欢的Sass架构，所以我建议您在样板中至少添加一个基本的文件夹结构–或随意对其进行调整。即使您使用原子CSS框架（如Tailwind ），也有可能您可能需要自己编写一些CSS，因此适当的架构是有意义的。