SASS和SMACSS构建大型CSS应用架构

• 下载 CSSArchitecture.zip - 1.3 MB

引言

一年来，我一直是SMACSS的忠实粉丝，SMACSS在创建大型CSS应用方面非常有帮助。我认为，没有SMACSS，就无法创建大型应用程序。在这里，我将介绍使用SMACSS和SASS构建大型应用程序。本文对于那些真正善于学习并希望创建大型模块化应用程序的人来说将非常有帮助。我已尽力而为，希望阅读本文的每个人都能学到一些新东西。

演练

1. 设置

a) 首先，请从此处的下载用于SASS编译器的Mindscape Web Workbench Visual Studio扩展。您还需要从此处下载Sassy Compiler。您必须安装以上两个扩展。有了这些扩展，您就可以轻松创建SASS文件，并在保存文件时编译SASS代码。Mindscape Web Workbench是一个免费插件，适用于Visual Studio 2010 - Visual Studio 2013，提供CoffeeScript，Sass，Compass和Less编辑！在这里，我将使用SASS。

b) SMACSS提供了五个类别的文件夹或文件结构，如下所示：

• Base
• 布局
• 模块
• 状态
• 主题

您可以在此处获取完整的SMACSS指南。只需阅读页面右侧的核心菜单。现在，我将展示该菜单的图片。

c) 在此处了解SASS的基础知识。尽管我将在本文中通过适当的示例来介绍SASS。

2. 我的方法

我为创建SMASS和SASS的文件夹结构付出了很多努力。长期以来，我一直想为大型应用程序创建CSS架构，但我没有在网上找到任何更好的解决方案，可以轻松理解并以正确的方式进行管理。最后，我做到了。我在下面的Visual Studio MVC5空项目中创建了文件夹。

现在，我将描述文件夹结构的内容。content文件夹包含三个文件夹，如fonts，images和sass。以下是我对每个文件夹的解释。

a) 字体

您可以在此文件夹中放入Bootstrap字体、Font Awesome字体或您喜欢的字体，或者所有这些字体。但我建议您使用Font Awesome，因为它提供了许多现成的图标。许多开发人员浪费宝贵的时间来为他们的网站创建图标，所以我认为所有图标对每个Web开发人员都非常必要。您可以在此处或NuGet下载Font Awesome。如果您想从NuGet下载，请在程序包管理器控制台中输入命令。命令如下。

PM> Install-Package FontAwesome

安装完成后，您将看到fonts文件夹（位于content文件夹之外）以及两个CSS文件，如font-awesome.css和font-awesome.min.css，它们都位于content文件夹中。删除font-awesome.min.css文件，因为在开发过程中不需要min文件。最后，您需要压缩此文件，但不是现在。我将在下面用图示说明。

现在，您需要复制Font Awesome的所有字体并粘贴到content>fonts中，然后复制font-awesome.css文件并粘贴到vendor文件夹中。放置字体和CSS文件后，将font-awesome.css文件重命名为_font-awesome.scss。我在这里使用下划线意味着此文件不会生成CSS文件。它只会进行编译。我使用了.scss扩展名，因为所有CSS文件都将包含在sass中，并合并到style.scss文件中。最终的文件夹结构如下。

b) 图片

您可以在这里放置画廊、导航（菜单）、布局图片。在Web中，PNG是更好的图像格式，所以尝试将PNG图片放在这里。

c) SASS

SASS（Syntactically Awesome Style Sheets）是一种CSS生成语言。通过添加嵌套规则、变量、混合宏、选择器继承等，可以生成格式良好、标准的CSS。Sass使编写和控制CSS变得容易。

我的提议架构并不复杂。它将清晰地说明您如何组织CSS。现在，我将逐步描述我的提议架构。

c.1) 工具

tools文件夹包含四个文件，如function、helper、mixin和site-settings。tools文件夹的图示如下。

c.2) 基础

base文件夹的图示如下。

c.3) 供应商

在这里，我使用了两个供应商，一个是Font Awesome，另一个是Bootstrap。我已经展示了如何将Font Awesome添加到我的项目中。现在，我想通过命令行将Twitter Bootstrap添加到项目中。

Install-Package Twitter.Bootstrap.Sass

执行命令行后，Sass已添加到项目中，如下所示。

现在，我将剪切所有Bootstrap文件并粘贴到content vendor文件夹中，如下所示。并删除项目中包含Bootstrap文件的sass文件夹。并注释掉Bootstrap文件中的normalize.scss，因为不需要在这里规范化，我已经在项目开始时添加了normalize。.

c.4) 布局

layout文件夹的图示如下。

c.5) 模块

layout文件夹的图示如下。

c.6) 状态

layout文件夹的图示如下。

c.7) 主题

layout文件夹的图示如下。

c.8) style.scss

所有文件都将包含在style.scss中。style.scss的代码表示如下。

/* Compass */
//@import "compass/css3/images";

/* Tools */
@import "tools/functions";
@import "tools/site-settings";
@import "tools/mixins";
@import "tools/helpers";

/* Fonts */
//@import "fonts/...";

/* Base */
@import "base/normalize";
@import "base/base";

/* Vendor */
@import "vendor/bootstrap/bootstrap";
@import "vendor/font-awesome";

/* Layout */
@import "layout/header";
@import "layout/nav";
@import "layout/footer";
@import "layout/constrained";
@import "layout/main";
@import "layout/form";
@import "layout/home";
@import "layout/dashboard";

/* Modules */
@import "module/button";
@import "module/icons";
@import "module/calender";
@import "module/table";
@import "module/animations";
@import "module/date-picker";
@import "module/time-picker";

/* State */
@import "state/class";
@import "state/pseudo-class";
@import "state/media-query";

/* Theme */
@import "theme/gray";

结论

我已经尽力在CSS架构中组织文件夹和文件。这种架构对于高级开发将非常有帮助。我已将完整代码包含在我的项目文件中。请下载并尽情享用。