0

按照可视化您的网格https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids说明，我一直在尝试使切换功能正常工作。

首先，有人可以解释以下实际上是做什么的吗？

compass install singularitygs/grid-toggle

我假设创建一个文件夹和一些文件，但是当我运行命令时，什么也没有发生。如果我执行以下操作..

compass install singularitygs/box-sizing

它按预期创建目录和文件。

我的项目适用于 Singularity（这只是 1 个 SASS 文件，1 个 html 文件）

@include background-grid在 SCSS 文件中工作，但这是第一种方法，我对切换版本感兴趣。

我试图手动包含提供的 grid.js 和 grid.min.js 文件，并在我的 index.html 文件的头部引用它们。我按照建议将data-development-grid="show"添加到 body 标记中。我什至无法让网格默认显示，更不用说让它与切换一起使用了。

这是我的 gem 文件的一部分

gem 'toolkit', '~>1.0.0'
gem 'singularitygs', '~>1.0.7'
gem 'breakpoint', '~>2.0.2'

group :development do
  gem 'guard'
  gem 'guard-compass'
  gem 'guard-livereload'
end

还有我的简单 HTML 文件

<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/screen.css" />
<script type="text/javascript" src="javascripts/grid.min.js"></script>
<script type="text/javascript" src="javascripts/grid.js"></script>
</head>
<body data-development-grid="show">
  <h1>test</h1>
  <div id="mydiv" class="no-mqs container">
    <p>This is my div</p>
  </div>
</body>
</html>

还有我的 1 个 SCSS 文件

@import 'compass';
@import 'compass/reset';
@import 'toolkit';
@import 'singularitygs';
@import 'breakpoint';

在上述所有导入的下方有一些网格变量、一个容器类、一些其他基本样式。

任何帮助表示赞赏。

谢谢

4

2 回答 2

2

快速回答是让您参考我关于同一主题的问答，大约两个问题前。但是，基本上，有三种方式。您找到的第一个，您可以将“@include background-grid”放在您希望显示网格的元素中。我想你会发现你不能按照指示安装 grid-toggle，但我认为你不需要。第二种方法是切换。您必须将 '@include grid-toggle' 放在 style.scss 中的 * { ... } 选择器或 html{ ... } 选择器中。您在网页头部引用脚本 grid.js。但是，该脚本假定您希望在 body div 上使用网格。您在正文开头的 div 中添加 data-development-grid="show" （或“hide”）。

您可以通过将 data-development-grid="show" 添加到 wrap div 来将网格放在另一个元素上，例如 wrap div（我们不都使用 wrap 吗？），但是您需要修改 grid.js文件。这是我的 javascript 版本作为指南（似乎有效，但我不是程序员！）：

(function() { 

  window.onload = function() {
    var body = document.body;
        body.onkeypress = function(e) {
            if (e.keyCode === 103 || e.charCode === 103) {
                var wrap = document.getElementById('wrap');
                var dev = wrap.getAttribute('data-development-grid');
                if (dev === null || dev === 'hide') {
                    wrap.setAttribute('data-development-grid', 'show');
                }
                else {
                    wrap.setAttribute('data-development-grid', 'hide');
                }
      }

    };

  };

})();

顺便说一句，您的身体或包裹（无论您选择哪个）都不能有背景颜色或图像，因为网格将在下方，因此是不可见的。

第三种方法是叠加，我特别喜欢它，因为它位于背景颜色之上。为此，添加 @include grid-overlay('#wrap'); 到 style.scss 文件中的 *{ ...} 或 html{ ... } 元素。您将在左下角看到一个 4 行符号，当您将鼠标悬停在它上面时，它会导致网格出现 - mouseoff = 消失。

我假设您希望将网格放在 wrap div 中，但您可以将其放在您喜欢的位置。

我希望这有帮助。

于 2013-10-01T15:58:40.563 回答
0

对我来说，它使用以下命令工作： bundle exec compass installsingularitygs/grid-toggle

于 2014-03-01T14:00:31.247 回答