问题标签 [susy-sass]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
648 浏览

sass - Create square divs using susy-grid

Is it possible to have @include span(3 of 12) return in pixels instead of a %?

I'm trying to create square elements, and I want the height of this element to be equal to its width.

Of course this causes height to be a %, which is really a % of its parent container, so it is not equal to the width! Any ideas?

0 投票
2 回答
1205 浏览

compass-sass - 没有使用指南针的“susy”这样的框架

我正在尝试使用 susy 网格创建一个指南针项目。

我在 Windows 7 上使用 git-bash。我安装了 Ruby 2.0.0p451、Sass 3.3.8 和 Compass 0.12.6。我require 'susy'在我的 config.rb 文件中有。

0 投票
1 回答
109 浏览

susy-compass - Susy2:我如何获取或设置边距

我在这里有一个要点:http: //sassmeister.com/gist/09f8182351b9cba3af21

我做错了什么或没有做什么 - 我想如果我使用 span mixin 也会计算边距,但它们在 li 项目上都是 0。我在这里想念什么?

0 投票
1 回答
3130 浏览

sass - Susy 2 SASS 未定义 mixin 的框架'span'

我在使用 Susy 时遇到了一个小问题,因为它似乎使用的是旧语法。

我有最新版本的 SASS (3.3.6)。我有最新版本的 SUSY (2.1.2)。我有最新版本的 Codekit (1.9.3)。

我已将其包含在我的 global.rb 文件中:

我也将其导入如下:

所以一切都应该没问题。使用标准变量进行设置,我将以下代码添加到一个简单的 div 块中:

这应该跨越 10 列中的 5 列。很简单,但我得到一个错误:

如果我错了,请纠正我,但这不是新语法,如下所示:

http://susydocs.oddbird.net/en/latest/install/

如果我使用这个:

一切安好。但这是使用 Susy One 的旧语法。我在这里错过了显而易见的事情吗?我会很感激任何方向。

0 投票
1 回答
498 浏览

grid-layout - Susy:@include span mixin 的行为很奇怪

通过 CodeKit 使用 Susy,我遇到了一个奇怪的情况:

如果我使用:

或者

根据文件,Susy 按预期工作。但是,当使用例如

制作了一个4列的盒子,但它没有放在第5列,而只是向左浮动。

但是,当使用例如 .example { @include span (3 at 8 of 12); }

正如预期的那样,该框是 3 列,但开始向右浮动,而不是在第 8 列中。换句话说,将元素放在某个列中不起作用。用简单的 margin-left 替换 susy mixin 效果很好,但这不是使用像 Susy 这样的网格系统的目的。

我已经联系了 CodeKit 的开发者,但他不认为 Susy 是 CodeKit 的问题。我已经使用一些在线课程的代码对其进行了测试,但它仍然可以正常工作。

这会是什么?使用 Susy 将元素放置在某个列中是否有任何先决条件?我在这里想念什么吗?

0 投票
1 回答
1986 浏览

sass - susy 2中未定义的mixin susy-grid-background

我正在尝试让 Susy 2 在我的计算机上运行。我尝试了几种安装方式,但似乎都没有完全奏效。

第一次尝试:通过 gem install compass 等手动安装 compass、susy 和 sass。然后我创建了一个项目(compass create)并包含了@import 'susy'。一切似乎都很好,但是 span mixin 不起作用。

第二次尝试:卸载 compass、sass 和 susy。安装了 gem compass-susy-plugin。使用 -r susy -u susy 创建了一个指南针项目。这个时间跨度有效,但未定义 susy-grid-background mixin。

第三次尝试:卸载 compass susy 插件,compass 和 sass。安装了 sass、susy 和 gem compass --pre。现在 span 混合可以工作,但 susy-grid-background 混合是未定义的。我们真的没有得到这个。这应该很容易,但这里出了点问题。

我现在有这个宝石列表:

指南针 (1.0.0.alpha.19), Sass (3.3.8, 3.2.19), Susy (2.1.2)

我已经在两台不同的计算机(mac 和 windows)上对此进行了测试。结果相同。

我的 screen.scss 有一个 base 的包含,并且在 base 中有一个 susy 的包含。Config.rb 中有 require susy 。没有 package.json 文件。

我希望有人有一些指示。

0 投票
1 回答
794 浏览

sass - 在 Susy 2 中创建具有不同布局的嵌套网格的最佳方法是什么?

如果你能想象结构,我有一个如下的站点布局!

  • 标题

    • 品牌 | 搜索
  • 导航

    • 主页 | 关于 | 博客 | 新闻 | 接触
  • 主要的

    • 消息
    • 促销1 | 促销2 | 促销3
    • 更多内容 | 更多内容
  • 先说侧边栏
  • 侧边栏第二

  • 页脚

    • 隐私政策 | ETC

上面这些不同部分的宽度都是不同的——有些比其他部分有更多的内脏/填充。

我试图弄清楚如何在 Susy 2 中管理不同布局上下文的最佳方式,并试图在文档中找出它,但没有适当的例子,我有点挣扎。例如,我尝试在 main 部分下使用 @include 布局,但它无法完成我想要做的事情,所以我猜我不太了解 Susy 2 的基本概念。

任何帮助/建议将不胜感激!

谢谢

只是为了澄清,我不是要求提供我的站点结构的代码,我要求对 Susy 2 库中的函数进行一点澄清,因为没有使用这些函数的示例以及它们是如何使用的应该使用的不是那么明显。

0 投票
1 回答
597 浏览

fixed - 使用 Susy-Sass 的固定宽度内部排水沟

我是 Susy 的新手,真的很喜欢我所看到的,但我试图将排水沟设置为内部固定,但它似乎不喜欢它。我真的很喜欢我的排水沟来匹配我的垂直边距。有人请指点我获得这种效果的设置。

http://sassmeister.com/gist/578f74196db07f8868cb

0 投票
2 回答
1238 浏览

bower - 中间人凉亭和苏西

我正在使用带 bower 的中间人 3.3.3 来安装一些 js/css 包。我可以让我的 scss 工作,但中间人找不到 susy 框架在哪里。(在 bower_components 内)。我也在使用中间人链轮。

所以我的 config.rb 是这样的:

我的文件树是这样的:

myproject - bower_components - susy - sass - lib - 模板 - bower.json - ... - 配置 - 脚本 - 源 - 样式表 - all.css - _setting.scss - ... - bower.json - config.rb - .. ..

所有.css

_settings.scss

我得到的错误告诉我它会继续在源/样式表中搜索“susy”。任何整数?

0 投票
1 回答
79 浏览

susy-sass - Susy:未应用第一个和最后一个关键字

我如何应用第一个或最后一个关键字并不重要,它们似乎没有被应用。

我有: $susy: (columns: 12, column-width: 60px, gutter-width: 20px, grid-padding: $grid-padding, container-style: static, gutter-position: split);

我努力了 :

结果总是:

我希望左边距已被取消?请问我错过了什么?