Hocus-Pocus：构建无设计的Sass框架

Hocus-Pocus is a design-free Sass framework that I’m working on in my free time. The main idea behind Hocus-Pocus is to make a universal and lightweight stylesheet starter kit that focuses on the most common features. In this article, I’ll cover why I decided to build my own Sass framework and the approach I’ve taken when doing so.

Hocus-Pocus是一个免费设计的Sass框架，我在业余时间使用它。 Hocus-Pocus背后的主要思想是制作一个通用且轻便的样式表入门套件，重点关注最常见的功能。 在本文中，我将介绍为什么我决定构建自己的Sass框架以及这样做时所采用的方法。

为什么我开始研究Sass框架？ (Why Have I Started Working on a Sass Framework?)

In short, I would say I’ve started working on a Sass framework because I wanted to save time when starting new web projects. I’ve noticed that even when I work on really custom designs, I always add the same set of tools, include the same standard packages, and implement a similar collection of basic CSS components.

简而言之，我想说我已经开始研究Sass框架，因为我想节省启动新Web项目时的时间。 我注意到，即使我从事的是真正的自定义设计，我也总是添加相同的工具集，包括相同的标准软件包，并实现类似的基本CSS组件集合。

The second question that follows then is — Why you don’t you use an existing, well-known and proven framework like Bootstrap?

接下来的第二个问题是- 为什么不使用现有的，众所周知的，经过验证的框架，如Bootstrap？

My response to this comes down to preferences and my approach to CSS. I think libraries like Bootstrap or Foundation are great and have greatly changed how people think about CSS. However, in most cases within my own project work, I just don’t need all these features and UI components like progress bars or breadcrumbs. Instead, I prefer to have something more universal. I prefer something that I can use in any project, without needing to override framework CSS classes.

我对此的回应归结为偏好和CSS方法。 我认为像Bootstrap或Foundation这样的库很棒，并且极大地改变了人们对CSS的看法。 但是，在大多数情况下，在我自己的项目工作中，我只是不需要所有这些功能和UI组件，例如进度条或面包屑。 相反，我更喜欢通用一些的东西。 我更喜欢可以在任何项目中使用的东西，而无需覆盖框架CSS类。

Due to the reasons above, in Hocus-Pocus you can change the look of every single component with variables. You can even disable some features or define a range of helpers. The downside of this approach is that I can’t provide a compiled CSS version of the framework as there is no reasonable way to use Hocus-Pocus without an ability to update variables.

由于上述原因，您可以在Hocus-Pocus中使用变量更改每个单个组件的外观。 您甚至可以禁用某些功能或定义一系列帮助器。 这种方法的缺点是我无法提供框架的已编译CSS版本，因为没有更新变量的能力就没有使用Hocus-Pocus的合理方法。

前提条件和原则 (Pre-requirements and principles)

安装 (Installation)

The framework is available and easy to install with two different package managers: Bower and npm. It requires Sass (minimum required version is 3.3.0) and Autoprefixer to run. Autoprefixer is used to add necessary vendor prefixes to the final compiled CSS file. I don’t worry too much about compatibility between various browsers nowadays as I personally find autoprefixing to be sufficient. Additionally, I use sass linter (scss-lint), but this is not required for running Hocus-Pocus and doing things the right way. Hocus-Pocus will work without it.

该框架可用，可以通过两个不同的软件包管理器轻松安装：Bower和npm。 它需要Sass(最低要求版本为3.3.0)和Autoprefixer才能运行。 Autoprefixer用于将必要的供应商前缀添加到最终编译CSS文件中。 如今，我并不担心各种浏览器之间的兼容性，因为我个人认为自动前缀已足够。 另外，我使用sass linter ( scss-lint )，但这对于运行Hocus-Pocus并以正确的方式进行操作不是必需的。 Hocus-Pocus将在没有它的情况下工作。

命名约定 (Naming Convention)

The next principle is an important one for every framework — the naming convention. I prefer regular, dash style class names without BEM. I won’t complain if you are a fan of BEM and prefer to use the BEM naming convention, if it works for you — go for it. From my perspective, BEM doesn’t fix all of the responsibility problems in CSS. I also find that I approach my CSS using less class-level elements when I use BEM. Adding a new element to an existing block is just too easy.

下一个原则是每个框架的重要原则-命名约定。 我更喜欢没有BEM的常规破折号样式类名称。 如果您是BEM的拥护者，并且愿意使用BEM命名约定(如果它对您有用)，我不会抱怨的。 在我看来，BEM不能解决CSS中的所有责任问题。 我还发现在使用BEM时，我使用较少的类级别元素来处理CSS。 向现有块中添加新元素太容易了。

文献资料 (Documentation)

Last but not least, I pay close attention to writing documentation and keeping the Hocus-Pocus changelog up to date. Documentation doesn’t have to be perfect, especially at the beginning, but I always try to find time to improve it. This helps newcomers learn how the tool works and allows me to keep track of framework features.

最后但并非最不重要的一点是，我密切注意编写文档并保持Hocus-Pocus变更日志为最新。 文档不一定是完美的，尤其是在开始时，但我总是尝试寻找时间来改进它。 这可以帮助新手了解该工具的工作原理，并让我能够跟踪框架功能。

框架功能 (Framework Features)

The following framework features are the most characteristic to Hocus-Pocus in my opinion and give the best overview of what its focus really is.

在我看来，以下框架功能是Hocus-Pocus最具特色的，并且可以很好地概述其重点。

Most of the framework classes are inspired from existing projects that I’ve worked on in the past. You may also spot some similarities to other CSS frameworks that have inspired me, especially my favorites — Primer and InuitCSS.

大多数框架类的灵感来自我过去从事的现有项目。 你也可以发现一些相似之处已经启发了我其他CSS框架，特别是我的最爱- 底漆和InuitCSS 。

Framework features in Hocus-Pocus include:

Hocus-Pocus的框架功能包括：

1. Normalize with some enhancements like global box-sizing set to border-box or text elements without top margin.

   使用某些增强功能进行规范化 ，例如将全局box-sizing设置为border-box或不带上边距的文本元素。

2. A new default color palette based on clrs.cc.

   基于clrs.cc的新默认调色板。

3. A fluid grid based on flexbox with width helpers that use fractions as class names (.1/2, .1/3 and so on).

   一个基于flexbox的流体网格，带有宽度助手，该助手使用分数作为类名( .1/2 ， .1/3等)。

4. Wide support for responsive web design. There is an option to choose either “mobile first” or “desktop first” as your preferred approach. You are also able to define breakpoints for each and each of them gets their own set of helpers for spacing, grid, visibility, and an individual Sass mixin.
   广泛支持响应式网页设计。 您可以选择“移动优先”或“桌面优先”作为您的首选方法。 您还可以为每个断点定义断点，每个断点都有自己的一组帮助程序，用于间隔，网格，可见性和单独的Sass混合。

For example:

例如：

$rwd-type: desktop-first;
$rwd-map: (
  'mobile': 680px
); 
$spacing-map: (
  'double': double($spacing-unit)
);

Then in compiled CSS you’ll have access to classes like .mobile-1/2, .mobile-hidden and .mobile-padding-double.

然后，在已编译CSS中，您可以访问.mobile-1/2 ， .mobile-hidden和.mobile-padding-double 。

1. Generic default styles for text elements with vertical rhythm based on Gridlover.

   基于Gridlover的具有垂直节奏的文本元素的通用默认样式。

2. Extra modifiers for other HTML elements like an inline list, a menu list, a circle image or a zebra table.
   其他HTML元素(例如内联列表，菜单列表，圆形图像或斑马表)的额外修饰符。
3. Various button types and three versions of forms: inline, stacked and horizontal.
   各种按钮类型和三种形式的表单：内联，堆叠和水平。
4. Essential UI components like the media object, box object, navbar, a hero element for landing pages and a sticky footer. Nothing more.
   基本的UI组件，例如媒体对象，框对象，导航栏，用于登录页面的hero元素和页脚。 而已。

对未来的希望 (Future Hopes for Hocus-Pocus)

My goal is to make Hocus-Pocus an ideal Sass starter kit no matter how complex your projects are. This way, you can focus on writing project specific UI components and defining your theme.

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

I don’t plan to implement any major new features. I think the features included are a reasonable amount of features and are likely to be the final ones. I’ll probably improve syntax for some components or change some single class names, but I don’t predict any compatibility breaking changes from the current version. For now, I’m more committed to fixing bugs that occur as more people give Hocus-Pocus a try.

我不打算实施任何主要的新功能。 我认为其中包含的功能是相当数量的功能，并且很可能是最终的功能。 我可能会改善某些组件的语法或更改某些单一的类名，但我预计与当前版本相比，任何兼容性都不会破坏更改。 目前，我更加致力于解决随着更多人尝试Hocus-Pocus而出现的错误。

If you think the Hocus-Pocus framework might be helpful for you in an upcoming project, you can find full documentation at hocus-pocus.io. The Hocus-Pocus code is open source and all available on GitHub. I appreciate any comments, feedback, and information about potential issues.

如果您认为Hocus-Pocus框架可能对下一个项目有帮助，可以在hocus-pocus.io上找到完整的文档。 Hocus-Pocus代码是开源的， 可以在GitHub上找到 。 我感谢任何有关潜在问题的评论，反馈和信息。

翻译自: https://www.sitepoint.com/hocus-pocus-building-a-design-free-sass-framework/