在这篇文章中，我们将引导您完成一个项目。 在该项目中，我们将创建一个静态HTML网站，并将使用Kit语言来构建HTML页面，并使用LESS CSS作为样式语言。
如果您遵循了前面有关“工具包”介绍的文章 ，您会发现它使我们能够使用变量并导入外部文件 ，从而轻松管理具有大量HTML页面的项目。
由于“工具包”是Codekit的专有语言，并且（在撰写本文时）也是目前唯一支持它的应用程序，因此您必须首先安装Codekit。 它的售价为28美元 。 您可以通过试用版尝试该应用程序，该试用版通常包含所有功能。
入门
让我们为项目创建一个新文件夹，并将其命名为“ mysite”。 在该文件夹中，我们创建三个名为“ kit”，“ less”，“ assets”的文件夹。
“ kit”文件夹将包含.kit文件。 在其中创建一个名为“ inc”的新文件夹，以保存部分.kit文件，该文件随后将包含在其他文件中。
同样，我们将在“较少”文件夹下创建一个“ inc”文件夹。
最后，“ assets”文件夹将包含项目CSS，JavaScript和图像。 让我们在其中另外创建3个文件夹：“ css”，“ js”和“ img”。 最后，项目目录结构应如下所示：
-- assets
-- css
-- img
-- js
-- kit
�? -- inc
-- less
-- inc启动Codekit。 将项目文件夹拖放到应用程序窗口上，以将其添加为“ Codekit项目”。
创建文件
使用Kit以及其他类似语言（如Haml或Jade）的优点之一是，我们可以将文档切成几个部分文件。
我们可以将文档的标头保存在“ header.kit”中，或将“ footer.kit”用作文档的页脚。 例如，当我们对“ header.kit”进行更改时，它将在包含“ header.kit”的其他页面上反映出来。 由于无需单独编辑文件，因此为我们节省了很多时间。
套件文件
在此项目中，我们创建以下Kit文件并将其保存在“ inc”文件夹中：
- “ doc-open.kit” –包含用于打开HTML文档的内容，其中包括
DOCTYPE和<head>标记。 - “ doc-close.kit” –包含用于关闭HTML文档的内容。 我们将
</html>和</body>放入其中。 - “ header.kit”，“ footer.kit”，“ sidebar.kit”，“ navigation.kit” –这些文件分别包含文档的页眉，页脚，侧边栏和菜单导航HTML结构。
我们在下面的“ kit”文件夹下直接创建这些Kit文件：
- “ index.kit” –这将是网站的主页。
- “ page.kit” –这是网站的第二页。
-- assets
�? -- css
�? -- img
�? -- js
-- kit
�? -- inc
�? �? -- doc-close.kit
�? �? -- doc-open.kit
�? �? -- footer.kit
�? �? -- header.kit
�? �? -- navigation.kit
�? �? -- sidebar.kit
�? -- index.kit
�? -- page.kit
-- less
-- inc我们将本项目中的网站限制为只有2页，因此本教程不会使您不知所措，但是实际项目中您可以拥有任意数量的页面。
LESS文件
我们还以类似的结构创建LESS文件。 此外，我们还将利用LESS mixin库名称LESSHat 。 这样我们就可以更快，更简单地编写我们的LESS代码。 以下屏幕快照显示了该项目的所有LESS文件。
.
-- assets
�? -- css
�? -- img
�? -- js
-- kit
�? -- inc
�? �? -- doc-close.kit
�? �? -- doc-open.kit
�? �? -- footer.kit
�? �? -- header.kit
�? �? -- navigation.kit
�? �? -- sidebar.kit
�? -- index.kit
�? -- page.kit
-- less
-- inc
�? -- footer.less
�? -- header.less
�? -- lesshat.less
�? -- navigation.less
�? -- sidebar.less
-- style.less它们也在Codekit中列出。
套件语法
套件语言基本上是具有特殊功能HTML 。 问题是大多数代码编辑器都不知道.kit扩展名。 如果我们打开它，代码编辑器将无法自动以适当的颜色语法突出显示它。
如果使用的是SublimeText，则可以按照以下技巧为工具包语言启用语法突出显示：
首先，在SublimeText中安装PackageResourceViewer 。 这个插件使我们可以快速打开SublimeText核心软件包 。 安装完成后，启动Command Palette（命令面板） -Cmd + Shift + P-并搜索“ Open Resource”（不带引号）。
然后，导航至HTML> HTML.tmLanguage 。 在其中，您将看到用<string>标签包裹的扩展列表。 通过在列表之间包含<string>kit</string>来添加对.kit扩展的支持。 保存文件，然后重新启动SublimeText。
输出路径
我们创建的所有文件都在Codekit中列出。 更改到位后，Codekit将监视所有这些文件并进行编译。 默认情况下， 编译后的文件将与源文件保存在同一目录级别，而我们项目的所有资产（如CSS）都应保存在“ assets”文件夹中。
因此，我们需要配置输出路径。 让我们启用项目级别的设置。
LESS CSS输出路径
在“设置”页面中，导航到左侧栏中的“减少”选项卡。 选择“到此路径：”选项。 输入/assets/css/作为输出路径，并将“相对于”选项设置为“项目的根文件夹”，如下所示。
向下滚动应用程序窗口一点，然后单击“ 应用输出路径”按钮以确认上述配置。
套件输出路径
工具包编译为HTML。 我们将所有HTML文档直接保存在项目根目录下 。 导航到“工具包”选项卡。 它类似于我们上面完成的“ Less”配置。 我们选择“到此路径：”选项。 输入/作为输出路径，然后将“相对于”选项设置为“项目的根文件夹”。
最后单击“ 应用输出路径”按钮。
未完待续
这是本教程第1部分的结束。总而言之，我们已经设置了项目文件，结构和配置。 接下来，我们将开始使用Kit和LESS开发网站。 因此，请继续关注。
扫一扫
2340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
