问题标签 [susy]

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 回答
178 浏览

sass - 从susy中改变宽度的div中获取网格列的宽度

susy 新手,无法找到这个简单问题的答案:

这是html结构:

这里是我的基本 susy 设置和布局:

基本上,侧边栏在悬停时会从 1 列扩展到 4 列,并且主 div 会相应地被推送。

我需要向其中的元素添加 1 列的边距或填充,.sidebar以便在侧边栏展开之前它是不可见的。但是,如果我使用.sidebar h2 { @include prefix(1 of 1)}填充与侧边栏一起扩展并且永远不会显示。如果我margin-left:span(1)改用,我会得到一个非常小的值(侧边栏宽度的 1/16?)。

如何从内部获取网格宽度的值(即 span(1)).sidebar

0 投票
1 回答
65 浏览

susy-compass - 2 行具有相等的高度以用 Susy 填充父元素

不确定这是否是 Susy 需要处理的事情,我怎样才能获得包含 a 的 2 个元素span来均匀地填充父级?所以第 1 行和第 2 行的高度相同。

例如CSS

0 投票
1 回答
2273 浏览

sass - 将参数从 mixin 传递到内容块

Sass 队列中的这个未解决的问题似乎暗示将参数传递给@content还不是一个功能,但Susy 2似乎能够做到这一点。追踪它是如何完成的有点像兔子洞,我还没有弄清楚。也许有人可以通过一个简单的例子来阐明?我想创建一个自定义 mixin,它将继承从susy-breakpoint()使用自定义地图传递的布局。

示例:susy-breakpoint()在全局 Sass 映射中定义 4 列布局,当在's中指定跨度为 4 时,将返回 100% 的宽度@contentsusy-breakpoint()当 8 cols 的自定义布局通过参数直接传递给 to$layout时,嵌套的span()mixin 会选择新的布局。但是自定义嵌套的 mixin 不会选择新的布局。为什么?

编译的CSS:

更新:

我发现,将inherit-value()mixin 的默认变量设置为现有$susy地图上 columns 键的值允许 mixin 获取上下文。但为什么?为什么它不适用于不同的地图或外部susy-breakpoint()

见这里:http ://sassmeister.com/gist/d86e217aca3aa8337b83

0 投票
3 回答
179 浏览

css - Susy 和 Sass 之间的确切区别是什么?

我有时会使用 Sass,但最近我听说了一些关于 Susy 的事情,它们是相同的还是它们之间的确切区别是什么?

0 投票
1 回答
331 浏览

css - 苏西天沟尺寸

我是使用 Susy 的新手。我刚刚下载并安装到我的应用程序中。我正在使用 Susy 2.2

我试图创建一个简单的页面/网格,它有 2 列等宽(50%)。我面临的问题是每列只有 44.4444% 宽,第一列有margin-right11.111%

HTML:

CSS:

如何减小默认装订线尺寸?以及如何确保 的border-right显示log-in-section在屏幕中间?

0 投票
1 回答
95 浏览

susy - Susy 列溢出网格

我只是第一次尝试susy,但有点困难。

HTML

SCSS

我认为我有这个权利,但我的列出现在网格之外:

在此处输入图像描述

你可以在这里看到运行的代码:http: //codepen.io/EightArmsHQ/pen/Ejjxwv

如何让列完全在网格内?

0 投票
0 回答
344 浏览

css - Sass:断点混合参数错误

这是我的代码:https ://github.com/Oreqizer/susy-tutorial/blob/master/app/styles/modals/_layout.scss 第 12 到 17 行,在此处提取:

如果未注释,则尝试编译时,我得到:

我正在使用 LibSass 进行编译。Vanilla Sass 以同样的方式失败了。一切都更新了。

如果我从 args 中删除单位,例如:断点(768),它会编译,但什么也不做。知道为什么会这样吗?

编辑:

如果没有单位,这是编译的 .css:

看起来编译器以某种方式假设我将使用'em's。为什么会发生这种情况,我不知道。

但是,如果我将 'px' 替换为 'em',则会引发相同的错误。

编辑2:

混音:

有完全相同的问题。

编辑 3:

我卸载了断点,susy-breakpoint 似乎工作正常。但是,单独使用断点并不像 Susy 那样工作。

0 投票
1 回答
60 浏览

css - 如何正确定义嵌套元素?

鉴于我有以下标记:

body固定宽度为910px

body一个article元素,由 2 个嵌套的divs(.foo.bar) 组成。

在这一点上,如果我愿意.foo.bar每人占据 6 列。这很容易做到:

to和后续元素 ( )body可以直接包含另一个元素吗?@include containerarticle@include container

在 Twitter Bootstrap 中,acol应该始终跟在row. 但这不是引导程序。是苏西。

row在 Susy 中, a和 a的相同概念是col什么?还是@include span基本上两者都做?

0 投票
1 回答
226 浏览

css - 具有交替宽度元素的 Susy 画廊

我正在使用 Susy 网格。我需要制作一个具有交替宽度的块库。它们将是 1/3、2/3 和 3/3 宽度的块。一个页面上可以有许多这样的块,它们可以随机排列。如果一个块不适合单行,它必须跳到下一行。

下一个代码没有帮助......

因为画廊 mixin 仅适用于相同的元素。 http://codepen.io/inliner/pen/YXWRRP

那么这实际上可能吗?

我需要这样的东西 - http://codepen.io/anon/pen/vOKQbx 但是用正确的方法来处理边距。块必须在容器内对齐。

0 投票
0 回答
83 浏览

css - 无法在 Susy 中重新定义装订线宽度

解决了!!(见底部)

显然我是苏西的新手。阅读所有文档。我已经阅读了 Zell 教程的免费章节并阅读了他的大部分博客文章。随意翻阅其他资料。我在任何地方都找不到涉及修改装订线宽度的信息。

我一直在尝试更改主网格上的装订线宽度,但更改没有显示任何响应。我已经尝试过所有我见过的测量单位。尽管如此,什么都没有发生!

这是代码:

我也试过:

你得到图片。我还尝试删除width后缀并无限迭代值变化。

没有什么。
内森。
纳达。

是什么赋予了?

编辑

这是与容器网格有关的 CSS,#grid

解决了

问题是我写的是“gutter”而不是“gutter”