萨斯病毒感染情况

Sass is a very powerful extension language for CSS that gives you the ability to improve the organization of both stylesheet files and styles within these stylesheets.

Sass是CSS的一种非常强大的扩展语言，它使您能够改善样式表文件和这些样式表中的样式的组织。

Proper architecture of the files in your CSS project will ensure that you and your teammates know exactly where specific styles are, as well as where to insert new styles or modify existing styles.

CSS项目中文件的正确体系结构将确保您和您的团队成员确切知道特定样式在哪里，以及在哪里插入新样式或修改现有样式。

Organization within the stylesheets is very important, too - the naming system, styles, and specificity of your components should be consistent across your entire project. They should also be organized in a way that mitigates conflicts and prevents leaked styles between selectors.

在样式表内组织是非常重要的，太-命名系统，样式，和你的组件的特殊性应该在您的整个项目一致。 还应该以减轻冲突和防止选择器之间样式泄漏的方式来组织它们。

The articles in the Aesthetic Sass series assume basic knowledge of the Sass (SCSS) extension language. If you are new to Sass, I highly recommend you get started with this article or visit these other resources:

“ 审美Sass”系列中的文章假定了Sass（SCSS）扩展语言的基础知识。 如果您不熟悉 Sass，我强烈建议您开始使用本文或访问以下其他资源：

• Learning Sass with CodePen使用CodePen学习Sass
• Sass Language GuideSass语言指南

建筑 (Architecture)

Properly architecting your Sass project is a crucial starting point to having a maintainable, scalable, and well-organized project. Sass makes separating your project into logical "modules" simple with the @import directive, which acts differently than the native CSS @import directive in that it includes .scss or .sass files before the final CSS output.

适当地设计Sass项目是拥有可维护，可伸缩和组织良好的项目的关键起点。 萨斯使您的项目分成与逻辑“模块”简单@import指令，其作用不同于本地CSS @import指令，它包括.scss或.sass最终CSS输出之前的文件 。

You can read the documentation on the @import directive to get a good idea of how you can use it to include partial files.

您可以阅读有关@import指令的文档，以了解如何使用它来包含部分文件。

There are many project architectures that you can employ in your project, and each might have their pros and cons. The important thing is that you choose one and stick with it. In this article, The 7-1 Pattern by Hugo Giraudel will be used. To summarize, there are seven folders and one main.scss file for output:

您可以在项目中使用许多项目体系结构，每种体系结构都有其优缺点。 重要的是选择一个并坚持下去 。 在本文中，将使用Hugo Giraudel 的7-1模式 。 总而言之，有七个文件夹和一个 main.scss文件用于输出：

• base/ - contains global styles, such as resets, typography, colors, etc.base/ -包含全局样式，例如重置，版式，颜色等。
• components/ - contains each self-contained component in its own .scss partialcomponents/ -将每个独立组件包含在其自己的.scss部分中
• layout/ - contains styling for larger layout components; e.g. nav, header, footer, etc.layout/ -包含较大布局组件的样式； 例如，导航，页眉，页脚等。
• pages/ - contains page-specific styling, if necessarypages/ -必要时包含页面特定的样式
• themes/ - contains styling for different themesthemes/ -包含不同主题的样式
• utils/ - contains global mixins, functions, helper selectors, etc.utils/ -包含全局mixin，函数，辅助选择器等。
• vendors/ - contains 3rd-party styles, mixins, etc.vendors/ -包含第三方风格，mixin等。
• main.scss - output file that brings together all of the above partsmain.scss包含以上所有部分的输出文件

Each folder should have a single .scss partial file that collects the other files in the same directory - such as _module.scss (my preference) or _glob.scss. Then, you can reference each of these in the main.scss file:

每个文件夹应具有一个.scss局部文件，该文件可收集同一目录中的其他文件，例如_module.scss （我的偏爱）或_glob.scss 。 然后，您可以在main.scss文件中引用其中的每一个：

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

// main.scss
@import 'base/module';
@import 'components/module';
@import 'layout/module';
@import 'pages/module';
@import 'themes/module';
@import 'utils/module';
@import 'vendors/module';

使用SCSS的组件样式 (Component Styling with SCSS)

Most major CSS architectures -- including SMACSS, OOCSS, and Atomic Design -- emphasize the importance of modularity, or viewing your UI as a collection of components.

大多数主要CSS架构-包括SMACSS ， OOCSS和Atomic Design-都强调模块化的重要性，或者将UI视为组件的集合。

Generally speaking, components are reusable, self-contained, independent units of a user interface. Components may be composed of other components, such as a search form (composed of a text input and a button), and they may have variants, such as a smaller or different color buttons.

一般而言，组件是用户界面的可重用，独立且独立的单元。 组件可以由其他组件组成，例如搜索表单（由文本输入和按钮组成），并且它们可以具有变体 ，例如较小或不同颜色的按钮。

As previously stated, we can leverage Sass to organize our styles, both project-wide and within our components. To demonstrate this, let's create a simple button component without architectural nor organizational concern:

如前所述，我们可以利用Sass在项目范围内和组件内部组织样式。 为了演示这一点，让我们创建一个没有体系结构或组织问题的简单按钮组件：

.button {display: inline-block;padding: 8px 16px;font-size: 12px;font-weight: bold;color: #d9534f;text-transform: uppercase;background-color: transparent;border: 1px solid #d9534f;transition: all 0.3s ease-in-out;&:hover {background-color: #d9534f;color: #fcfcfc;}
}

This button might look exactly how we want it to, but there are a few potential issues with the SCSS code above:

此按钮可能看起来确实像我们想要的那样，但是上面的SCSS代码存在一些潜在的问题：

• Too many magic numbers such as 8px, 12px, 16px, #d9534f, #fcfcfc, 0.3s, etc.太多的魔术数字，例如8px ， 12px ， 16px ， #d9534f ， #d9534f #fcfcfc ， 0.3s等。
• Inflexible theme - it's not trivial to create a similar button with different colors僵化的主题 -创建具有不同颜色的相似按钮并非易事
• Explicit selector - if .button changes, it must be changed for every instance of .button in the project显式选择器 -如果.button更改，则项目中每个.button实例都必须更改它
• Potential incoherency - there is no guarantee that this button's style will fit within the general style of the project潜在的不一致性 -无法保证此按钮的样式适合项目的常规样式

Let's use Sass (SCSS) to mitigate these issues.

让我们使用Sass（SCSS）缓解这些问题。

组件样式组织 (Component Style Organization)

Getting up and going with an overall file structure for your project is a relatively easy task, and the style organization within each component stylesheet will ensure that components are flexible enough to adapt to any theme and fit cohesively with all of the other components. This is the key to having an aesthetic look and feel in your website or web app. A non-trivial, well-structured component will include most of the following component-specific parts:

为项目建立一个总体文件结构是一项相对容易的任务，每个组件样式表中的样式组织将确保组件具有足够的灵活性以适应任何主题并与所有其他组件紧密结合。 这是在网站或Web应用程序中具有美观外观的关键。 一个非平凡，结构良好的组件将包括以下大多数组件特定的部分：

• Variables - for relating component-specific values to others and preventing magic numbers变量 -用于将特定于组件的值与其他值相关联并防止出现幻数
• Mixins - for dynamically generating variations of the component (not necessary if few variations exist)Mixins-用于动态生成组件的变体（如果几乎没有变体，则不需要）
• Structure - the CSS component layout/structure, excluding any non-layout rules, such as color结构 -CSS组件的布局/结构，不包括任何非布局规则，例如颜色
• Relationships - any component-specific CSS with regard to relationships (via combinators) with other components关系 -与组件（通过组合器）之间的关系有关的任何特定于组件CSS
• Themes - thematic CSS for non-layout component styling, such as background, colors, shadows, etc.主题 -非布局组件样式（例如背景，颜色，阴影等）的主题CSS。
• Exported Selectors - the manifested CSS classes/selectors, if they are to be expose导出的选择器 -所显示CSS类/选择器（如果要公开）

These parts can be applied to our previously-defined button component.

这些部分可以应用于我们先前定义的按钮组件。

变数 (Variables)

When adding variables for a component, two main questions should be asked:

在为组件添加变量时，应提出两个主要问题：

1. "What is this?" “这是什么？”
2. "How does this relate to my project's general style?" “这与我的项目的总体风格有何关系？”

With this in mind, these are the variables extracted from our button example:

考虑到这一点，这些是从我们的按钮示例中提取的变量：

$button-padding: 0.5rem 1rem;
$font-size: 12px;             // 1 factor below base 16px in modular type scale
$button-bgcolor: #d9534f;     // the primary brand color
$button-border-width: 1px;    // border width for all form inputs
$button-color-hover: #fcfcfc; // the light/white brand color

This is a great start - now all of the magic numbers make sense. Once all of the necessary related base and component styles are defined, you can take this one step further by explicitly relating each variable:

这是一个很好的开始-现在所有的魔术数字都有意义。 定义了所有必需的相关基础样式和组件样式后，可以通过显式关联每个变量来进一步执行此步骤：

// Pseudocode, for this example
$button-padding: 0.5rem 1rem;
$font-size: type-scale(-1);                // utility function
$button-bgcolor: $color-primary;           // from 'base/_colors.scss'
$button-border-width: $input-border-width; // from 'component/_input.scss'
$button-color-hover: $color-light;         // from 'base/_colors.scss'

混合蛋白 (Mixins)

A component-specific @mixin can give you the ability to dynamically define a stylistic variant of a component. Pragmatically, it's a good idea to limit what the @mixin can vary - you probably don't want the border width to change, nor the font size to have too many variations; otherwise, it might look dissimilar from the other components.

特定@mixin组件的@mixin可使您动态定义组件的样式变体 。 实用上，最好限制@mixin变化范围-您可能不希望更改边框宽度，也不希望字体大小变化太多； 否则，它看起来可能与其他组件不同。

The general structure of our example button should stay the same project-wide, but the button color will vary:

示例按钮的总体结构应在整个项目范围内保持不变，但是按钮的颜色将有所不同：

@mixin scotch-button-theme($color, $color-text-hover: $color-light) {color: $color;border-color: $color;background-color: transparent;&:hover {color: $color-text-hover;background-color: $color;}
}

Now, many different color variations of the same button can be created easily; e.g. @include scotch-button-theme(blue).

现在，可以轻松创建同一按钮的许多不同颜色； 例如@include scotch-button-theme(blue) 。

结构体 (Structure)

Component structure consists of rules that are not subject to many thematic variations - i.e. the layout of the component. A flexible pattern for defining component structure is to put it in a Sass %placeholder that is only @extended once by a real selector. This way, you can decide later to "remove" that component from the output CSS just by removing its real selector, without any adverse side-effects from other components that might be using that component. It also allows you to define the real selector only once, making renaming and referencing the selector easy.

组件结构由不受很多主题变化影响的规则组成，即组件的布局。 定义组件结构的一种灵活模式是将其放入Sass %placeholder ，该%placeholder仅由真实选择器@extend一次 。 这样，您可以稍后决定仅从输出CSS中“删除”该组件，而只需删除其真正的选择器，而不会从其他可能使用该组件的组件产生任何不利影响。 它还允许您只定义一次真正的选择器 ，从而使重命名和引用选择器变得容易。

Here's the structure for our example button component. Notice how it has fewer thematic rules:

这是示例按钮组件的结构。 注意它有更少的主题规则 ：

%button {display: inline-block;padding: $button-padding;font-size: $button-font-size;font-weight: bold;text-transform: uppercase;border-width: $button-border-width;border-style: solid;
}

出口选择器 (Exported Selectors)

This style can now be exported as a class, which I have decided to rename to .scotch-button. Included in the exported class selector is the button's main structure and its theme:

现在可以将此样式导出为一个类，我决定将其重命名为.scotch-button 。 导出的类选择器中包含按钮的主要结构及其主题 ：

.scotch-button {@extend %button;@include scotch-button-theme($color-primary);&.secondary {@include scotch-button-theme($color-secondary);}
}

Did you notice the .scotch-button.secondary variant? The only difference between a normal Scotch button and a secondary one is the color. Another benefit of having exported selectors separate from the actual style declarations in %placeholder is that it gives the flexibility to use different naming systems, such as BEM. In the above example, &.secondary would become &--secondary for BEM.

您是否注意到.scotch-button.secondary变体？ 普通苏格兰威士忌按钮和次要苏格兰威士忌按钮之间的唯一区别是颜色。 将导出的选择器与%placeholder的实际样式声明分开的另一个好处是，它可以灵活使用不同的命名系统 ，例如BEM。 在上述例子中， &.secondary将成为&--secondary对BEM。

结论 (Conclusion)

Proper architecture and style organization is crucial to developing well-developed stylesheets - they promote modular, flexible, and scalable component styles. Instead of asking yourself "where do I put this style?" or "what does this magic number mean?", consider adopting an architecture and style organization strategy at the onset of your Sass project, like the ones described in this article.

正确的架构和样式组织对于开发完善的样式表至关重要-它们促进模块化，灵活和可扩展的组件样式。 而不是问自己“我将这种样式放在哪里？” 或“这个魔术数字是什么意思？”，请考虑在Sass项目开始时就采用一种体系结构和样式组织策略，例如本文所述。

Stay tuned for the next article in this series, Aesthetic Sass 2: Colors and Palettes!

请继续关注本系列的下一篇文章，《 审美Sass 2：颜色和调色板》 ！

翻译自: https://scotch.io/tutorials/aesthetic-sass-1-architecture-and-style-organization

萨斯病毒感染情况