问题标签 [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.
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
?
susy-compass - 2 行具有相等的高度以用 Susy 填充父元素
不确定这是否是 Susy 需要处理的事情,我怎样才能获得包含 a 的 2 个元素span
来均匀地填充父级?所以第 1 行和第 2 行的高度相同。
例如CSS
sass - 将参数从 mixin 传递到内容块
Sass 队列中的这个未解决的问题似乎暗示将参数传递给@content
还不是一个功能,但Susy 2似乎能够做到这一点。追踪它是如何完成的有点像兔子洞,我还没有弄清楚。也许有人可以通过一个简单的例子来阐明?我想创建一个自定义 mixin,它将继承从susy-breakpoint()
使用自定义地图传递的布局。
示例:susy-breakpoint()
在全局 Sass 映射中定义 4 列布局,当在's中指定跨度为 4 时,将返回 100% 的宽度@content
。susy-breakpoint()
当 8 cols 的自定义布局通过参数直接传递给 to$layout
时,嵌套的span()
mixin 会选择新的布局。但是自定义嵌套的 mixin 不会选择新的布局。为什么?
编译的CSS:
更新:
我发现,将inherit-value()
mixin 的默认变量设置为现有$susy
地图上 columns 键的值允许 mixin 获取上下文。但为什么?为什么它不适用于不同的地图或外部susy-breakpoint()
?
css - Susy 和 Sass 之间的确切区别是什么?
我有时会使用 Sass,但最近我听说了一些关于 Susy 的事情,它们是相同的还是它们之间的确切区别是什么?
css - 苏西天沟尺寸
我是使用 Susy 的新手。我刚刚下载并安装到我的应用程序中。我正在使用 Susy 2.2
我试图创建一个简单的页面/网格,它有 2 列等宽(50%)。我面临的问题是每列只有 44.4444% 宽,第一列有margin-right
11.111%
HTML:
CSS:
如何减小默认装订线尺寸?以及如何确保 的border-right
显示log-in-section
在屏幕中间?
susy - Susy 列溢出网格
我只是第一次尝试susy,但有点困难。
HTML
SCSS
我认为我有这个权利,但我的列出现在网格之外:
你可以在这里看到运行的代码:http: //codepen.io/EightArmsHQ/pen/Ejjxwv
如何让列完全在网格内?
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 那样工作。
css - 如何正确定义嵌套元素?
鉴于我有以下标记:
的body
固定宽度为910px
:
有body
一个article
元素,由 2 个嵌套的divs
(.foo
和.bar
) 组成。
在这一点上,如果我愿意.foo
,.bar
每人占据 6 列。这很容易做到:
to和后续元素 ( )body
可以直接包含另一个元素吗?@include container
article
@include container
在 Twitter Bootstrap 中,acol
应该始终跟在row
. 但这不是引导程序。是苏西。
row
在 Susy 中, a和 a的相同概念是col
什么?还是@include span
基本上两者都做?
css - 具有交替宽度元素的 Susy 画廊
我正在使用 Susy 网格。我需要制作一个具有交替宽度的块库。它们将是 1/3、2/3 和 3/3 宽度的块。一个页面上可以有许多这样的块,它们可以随机排列。如果一个块不适合单行,它必须跳到下一行。
下一个代码没有帮助......
因为画廊 mixin 仅适用于相同的元素。 http://codepen.io/inliner/pen/YXWRRP
那么这实际上可能吗?
我需要这样的东西 - http://codepen.io/anon/pen/vOKQbx 但是用正确的方法来处理边距。块必须在容器内对齐。
css - 无法在 Susy 中重新定义装订线宽度
解决了!!(见底部)
显然我是苏西的新手。阅读所有文档。我已经阅读了 Zell 教程的免费章节并阅读了他的大部分博客文章。随意翻阅其他资料。我在任何地方都找不到涉及修改装订线宽度的信息。
我一直在尝试更改主网格上的装订线宽度,但更改没有显示任何响应。我已经尝试过所有我见过的测量单位。尽管如此,什么都没有发生!
这是代码:
我也试过:
和
和
和
和
你得到图片。我还尝试删除width
后缀并无限迭代值变化。
没有什么。
内森。
纳达。
是什么赋予了?
编辑
这是与容器网格有关的 CSS,#grid
解决了
问题是我写的是“gutter”而不是“gutter”