hocus-pocus：建立一个无设计的SASS框架

钥匙要点

>使用Bower和NPM易于安装框架，需要SASS和AUTOPREFIXER运行。它遵循常规的仪表式命名命名惯例，并密切关注文档并更新到hocus pocus changelog。

Hocus-Pocus的未来计划包括使其成为复杂项目的理想SASS入门套件，重点关注特定于项目的UI组件和主题定义。没有计划主要的新功能，但是可以实现对语法和班级名称的改进。
为什么我开始在Sass框架上工作？ 简而言之，我会说我已经开始在SASS框架上工作，因为我想节省开始新的Web项目时的时间。我注意到，即使我从事真正的自定义设计，我也总是添加相同的工具，包括相同的标准软件包，并实现类似的基本CSS组件集合。>
• 随后的第二个问题是 -
为什么不使用现有的，众所周知的和经过验证的框架，例如Bootstrap？
• 我对此的反应取决于偏好和对CSS的方法。我认为像Bootstrap或Foundation这样的图书馆很棒，并且大大改变了人们对CSS的看法。但是，在大多数情况下，在我自己的项目工作中，我不需要所有这些功能和UI组件，例如进度棒或面包屑。相反，我更喜欢拥有更普遍的东西。我更喜欢可以在任何项目中使用的东西，而无需覆盖框架CSS类。
由于上述原因，在Hocus-Pocus中，您可以更改带有变量的每个组件的外观。您甚至可以禁用某些功能或定义各种助手。这种方法的缺点是我无法提供框架的CSS版本，因为没有合理的方法可以使用Hocus-Pocus而没有更新变量的能力。

>预定和原理

>安装

>该框架可用，易于与两个不同的软件包管理器：Bower和NPM安装。它需要SASS（最低要求的版本为3.3.0），并且自动改装器才能运行。 AutopReFixer用于将必要的供应商前缀添加到最终编译的CSS文件中。如今，我不必太担心各种浏览器之间的兼容性，因为我个人认为自动装饰足够了。此外，我使用Sass Linter（SCSS-LINT），但这对于运行Hocus Pocus并以正确的方式进行操作并不需要。 hocus-pocus将没有它。

>命名约定

下一个原则对于每个框架 - 命名惯例。我更喜欢没有bem的常规，破折号样式的班级名称。如果您是BEM的粉丝，我不会抱怨，并且更喜欢使用BEM命名约定，如果它对您有用，请继续前进。从我的角度来看，BEM并没有解决CSS中的所有责任问题。我还发现，当我使用BEM时，我使用较少的班级元素来接近我的CSS。在现有块中添加新元素太容易了。

文档

最后但并非最不重要的一点是，我密切关注编写文档，并保持最新的hocus pocus changelog。文档并不一定是完美的，尤其是在一开始，但是我总是试图找到时间来改善它。这有助于新移民学习该工具的工作原理，并允许我跟踪框架功能。

框架功能

在我看来，以下框架功能是Hocus pocus的最特征，并最好地概述其真正的焦点。

>大多数框架类都是从我过去从事的现有项目中启发的。您可能还会发现与激发我启发的其他CSS框架的相似之处，尤其是我的最爱 - 底漆和Inuitcss。

> Hocus-Pocus中的框架功能包括：

>通过一些增强功能归一化，例如全局盒装设置设置为边框框或文本元素，而没有最高边距。
>基于clrs.cc.
的新默认调色板
1. >基于flexbox的流体网格，其宽度助手使用分数作为类名称（.1/2，.1/3等）。
>对响应式Web设计的广泛支持。可以选择“首先”选择“移动”或“桌面”作为您的首选方法。您还可以为每个人定义一个断点，以获取自己的一组助手，用于间距，网格，可见性和单独的sass mixin。
例如：
然后，在编译的CSS中，您可以访问.mobile-1/2，.mobile-hidded和.mobile-padding-double。
基于Gridlover的垂直节奏的文本元素的通用默认样式。
>其他HTML元素的额外修饰符，例如内联列表，菜单列表，圆形图像或斑马表。
各种按钮类型和三种形式的版本：内联，堆叠和水平。
3. > Essential UI组件，例如媒体对象，框对象，Navbar，登陆页面的英雄元素和粘性页脚。仅此而已。
未来希望hocus-pocus

>我的目标是使Hocus-Pocus成为理想的SASS入门套件，无论您的项目多么复杂。这样，您可以专注于编写特定于项目的UI组件并定义您的主题。

>

>我不打算实施任何主要的新功能。我认为其中的功能是合理的功能，可能是最终功能。我可能会改善某些组件的语法或更改一些单个类名称，但我预计当前版本会破坏任何兼容性。目前，我更致力于修复发生的错误，因为越来越多的人尝试了hocus pocus。

>如果您认为Hocus-Pocus框架在即将到来的项目中可能对您有所帮助，则可以在Hocus-pocus.io上找到完整的文档。 Hocus-Pocus代码是开源的，全部在GitHub上可用。我感谢有关潜在问题的任何评论，反馈和信息。
>常见问题（常见问题解答）有关构建无设计的SASS框架

>

什么是SASS框架，为什么在Web开发中很重要？
> sass（语法上很棒的样式表）框架是一个预先准备的库，被用作启动项目的基础。这在Web开发中很重要，因为它有助于加快为网站创建样式表的过程。它允许开发人员使用变量，嵌套规则，混合素和功能，所有这些都在维护CSS中非常有用。

>

无设计的SASS框架与常规Sass Framework有何不同？

>无设计的SASS框架与常规SASS框架不同，因为它不会对用户施加任何设计决策。它为开发人员提供了一个干净的板岩，使他们能够实施自己的设计选择，而不必覆盖任何先前存在的样式。

>使用使用无设计的SASS框架有什么好处？ >

使用无设计的SASS框架提供了一些好处。它允许开发人员维护干净且有条理的代码库，从而易于管理和更新。它还为建立基础提供了坚实的基础，节省了在开发的初始阶段的时间和精力。

>如何开始构建一个无设计的SASS框架？

>构建一个无设计的SASS框架涉及多个步骤。首先，您需要设置项目结构。然后，您可以开始创建变量，混音和功能。之后，您可以开始构建基本样式和布局模块。最后，您可以将SASS编译到CSS中。

我需要哪些工具来构建一个无设计的SASS框架？

以构建一个无设计的SASS框架，您需要一个文本编辑器，SASS编译器和用于测试的Web浏览器。您可能还会发现使用像Gulp或Grunt这样的任务跑步者来自动化工作流程很有帮助。
我可以为任何类型的项目使用无设计的SASS框架吗？无设计的SASS框架可用于任何类型的项目。这对于维护干净和有组织的代码库至关重要的大型项目特别有用。

>

>我如何自定义一个无设计的SASS框架以满足我的需求？通过修改变量，混音和功能以适应您的需求，SASS框架。您还可以添加自己的样式和布局模块。
在使用无设计的SASS框架时，哪些最佳实践是什么？包括保持代码干燥（不要重复自己），使用有意义的变量和混合物的名称，并以逻辑和一致的方式组织代码。
我可以免费使用设计带有其他CSS框架的SASS Framework？
是的，您可以与其他CSS框架一起使用无设计的SASS框架。但是，您可能需要覆盖其他框架的某些默认样式，以确保您的设计选择不会被覆盖。

>

>在哪里可以找到更多有关构建无设计的SASS框架的资源？

>有许多在线资源可用于了解有关构建无设计的SASS框架的更多信息。一些好的起点包括官方的SASS文档，在线教程和网络开发论坛。

以上是hocus-pocus：建立一个无设计的SASS框架的详细内容。更多信息请关注PHP中文网其他相关文章！