网格切换的故障排除
按照可视化网格https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#visualizing-your-grids指令，我一直在尝试使切换功能正常工作。
首先，有人能解释一下下面应该做什么吗？
compass install singularitygs/grid-toggle我假设创建一个文件夹和一些文件，但是当我运行命令时，什么都不会发生。如果我这样做..。
compass install singularitygs/box-sizing它按预期创建目录和文件。
我的项目可以很好地处理奇点(这只是一个SASS文件，一个html文件)
@include背景网格在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';在所有上述导入下面有一些网格变量、一个容器类、一些其他基本样式。
任何帮助都很感激。
谢谢
回答 2
Stack Overflow用户
发布于 2013-10-01 15:58:40
快速的答案是让你参考我在同一主题上的问题和答案，大约两个问题之前。但是，基本上有三种方式。第一个是您已经找到的，您可以在您希望显示一个网格的元素中放置‘@’。我想你会发现你不能按指示安装网格开关，但我不认为你需要安装。第二种方法是切换。您必须在您的style.scss中的*{.}选择器或html{ .}选择器中放置“@include网格切换”。您可以在网页首页中引用脚本grid.js。但是，该脚本假设您希望在您的主体div上使用网格。在打开div的主体中添加数据开发网格=“显示”(或“隐藏”)。
您可以将网格放置在另一个元素上，比如包div (我们不都使用grid.js吗？)，方法是将数据开发-网格=“显示”添加到包div中，但是您需要修改这个文件。下面是我的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');
}
}
};
};
})();顺便说一句，你的身体或包裹(无论你选择什么)都不能有背景颜色或图像，因为网格将在下面，因此是无形的。
第三种方法是叠加，我特别喜欢它，因为它位于背景颜色之上。为此，在style.scss文件中的*{ .}或html{ .}元素中添加@include overlay(‘#wrap’)；。您将在左下角得到一个4行符号，当您按下它时，它会导致网格出现- mouseoff =消失。
我假设你想把网格放在一个包div中，但是你可以把它放在你喜欢的地方。
我希望这能帮到你。
Stack Overflow用户
发布于 2014-03-01 14:00:31
对我来说，它使用的命令是: bundle exec罗盘安装单点/网格切换。
https://stackoverflow.com/questions/19118359
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号