Question

在可视化您的网格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 AND grid.min.js文件，并在index.html文件的头部引用它们。我按照建议将 data-development-grid =“show”添加到body标签中。我甚至无法在默认情况下显示网格，更不用说让它与切换一起使用了。

这是我的宝石文件的一部分

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';

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

任何帮助表示感谢。

由于

Answer 1

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

您可以将网格放在另一个元素上，例如wrap div（我们都不使用wrap吗？），通过向wrap div添加data-development-grid =“show”，但是你需要修改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 =消失。

我假设你想要一个换行div中的网格，但你可以把它放在你喜欢的地方。

我希望这会有所帮助。

Answer 2

对我而言，它使用命令：bundle exec compass install singularitygs / grid-toggle

Grid Toggle故障排除

2 个答案: