sass代码_如何组织您的SASS代码

sass代码

SASS is an awesome way to treat your CSS as if it was an OOP language. Among many other features, SASS allows you to approach CSS in a modular way, enabling reusability and maintainability features that are not that evident in CSS.

SASS是一种将CSS视为OOP语言的绝佳方式。 在许多其他功能中，SASS允许您以模块化的方式处理CSS，从而实现CSS中不明显的可重用性和可维护性功能。

Here I'll show you how I manage my SASS files and hopefully convince you to engage in a similar practice.

在这里，我将向您展示如何管理SASS文件，并希望说服您从事类似的实践。

在你开始前 (Before you start)

如果您对SASS一无所知，建议您先阅读以下内容： The Power os SASS Power os SASS From SASS to CSS 从SASS到CSS

隔离的艺术 (The art of isolation)

如果您开始使用SASS编写CSS，最终将获得大量潜在的可重用代码。 这些将主要是针对特定情况一般的 Mixins that address general of particular situations. Let's take, for instance, the example of a Mixin that applies rounded corners to an element given radius value: Mixins 。 让我们以Mixin为例，该示例将圆角应用于给定半径值的元素：

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

Another good example is the color palette of your company's branding that can be represented by a set of variables:

另一个很好的例子是您公司品牌的调色板，可以用一组变量表示：

$font-family: Verdana;
$font-size: 10px;

$color-text: #555;
$color-text-active: #000;
$color-background: #fff;
$color-background-active: #dcdcdc;

$rounded-corner-radius: 5px;

So the main idea is to split them in groups and, per application, pick the ones you want to use.

因此，主要思想是将它们分组，然后针对每个应用程序选择要使用的应用程序。

()

为什么不使用本地CSS @import？ (Why not using the native CSS @import?)

我想解决这个问题，因为这是一个显而易见的问题：

If CSS already supports @import, why do I need SASS for this?

如果CSS已经支持@import，为什么我需要SASS？

@import out of the box but it comes with some caveats. One evident problem is that each @import is handled by loading the correspondent CSS file, and this process behaves differently depending on the browser. I don't want to go too much in detail here, but the way the browser loads the @import files can be different if you have only imports in your style block or if you have other styles of links before. @import ，但有一些警告。 一个明显的问题是，每个@import都通过加载相应CSS文件来处理，并且此过程的行为因浏览器而异。 我不想在这里详细介绍，但是如果您的样式块中仅包含导入功能，或者以前有其他样式的链接，则浏览器加载@import文件的方式可能会有所不同。

More importantly, with the default CSS @import instruction, you're not generating one single CSS file, you're simply avoiding multiple links in the head of your page.

更重要的是，使用默认CSS @import指令，您不会生成一个CSS文件，而只是避免了页面顶部的多个链接。

@import在SASS中的力量 (
The Power of @import in SASS)

将CSS与SASS结合使用的最大好处是，最后，您将拥有一个CSS文件。 这意味着一个HTTP请求。 当您要优化加载静态资源的方式时，这是要做的主要事情之一。

()

Group your Mixins

The obvious first  ones to be reorganized are the Mixins. Create a mixins folder with multiple SASS files, grouping your Mixins in a logical way. For instance, group your mixins by generic and application specific. By generic I mean, for instance, the above 

将您的Mixins分组

首先要重组的显然是Mixins。 创建包含多个SASS文件的mixins文件夹，以合理的方式对Mixins进行分组。 例如，按通用和特定于应用程序将混合模块分组。 一般而言，我的意思是，例如，上面的 border-radius mixin, and others like gradients, rotations, etc.

()

Split your files by View and/or Component

Create another folder for application specific SASS files; feel free to split the files as much as possible. Personally, I like to split them by view and by component; it makes it easier to know where to go if we need to change them.

按视图和/或组件拆分文件

为应用程序特定的SASS文件创建另一个文件夹； 随时尽可能地拆分文件。 就个人而言，我喜欢按视图和按组成部分拆分它们； 如果我们需要更改它们，可以更轻松地知道要去哪里。

Do you have a toolbar, header, footer, or menu? Create a separate SASS file for each one.

您是否有工具栏，页眉，页脚或菜单？ 为每个文件创建一个单独的SASS文件。

将它们全部与@import放在一起 (
Put them all back together with @import)

因此，现在有了一堆SASS文件，是时候将它们放在一起并构建应用程序CSS文件了。 主要思想是拥有一个仅包含@import指令的文件，并导入所需的所有“组件”。

Here's an example for a myapplication.scss file:

这是

@import 'mixins/_generic.scss';

@import 'app/_variables.scss';
@import 'app/_fonts.scss';

// views
@import 'app/views/_view1.scss';
@import 'app/views/_view2.scss';
@import 'app/views/_view3.scss';

()

Final thoughts

At this point, and if you have read my other SASS articles, you know:

最后的想法

至此，如果您已经阅读了我的其他SASS文章，那么您将知道：

• what SASS can do
  SASS可以做什么
• how to convert SASS into CSS
  如何将SASS转换为CSS
• how to organize your code in order to get the most out of SASS
  如何组织代码以充分利用SASS

翻译自: https://www.experts-exchange.com/articles/24119/How-to-organize-your-SASS-code.html

sass代码