标签: susy-compass

我目前有一个3个标签页.每个选项卡都是display: hidden未选中时设置的div .在这些选项卡中,我有一个使用Susy(罗盘插件)创建的网格系统.每个标签页还有一组Highcharts.当我加载页面时,根据URl中的哪个选项卡,加载其中一个选项卡.所有的图表看起来都很好,但是当我切换到另一个标签时,一些图表在他们的div中不正确.如果我只是重新调整窗口大小,则会重新计算图表,然后它们完全匹配.或者,如果我重新加载相同的选项卡,图表也适合.当我进行标签切换时,我可以调用一个能够调整页面上所有图表大小的功能吗？

它看起来像这样:

它应该是这样的:

编辑:似乎这不是一个与highcharts直接相关的问题,例如我的谷歌地图看起来像这样:

但是当我调整窗口大小时,它会正确调整:

当切换选项卡时,我可以通过JS中的函数调用来刷新/调整我的网格吗？

我在OSX/Terminal上与Sass,Compass和Susy合作.但我无法让Susy与Sass和Compass一起工作.我做了什么:

sudo gem install sass
sass -v

返回:Sass 3.3.0(Maptastic Maple)

sudo gem install compass

这似乎也安装了sass-3.2.14.gem,然后是compass-0.12.3.gem.

compass -v

返回:指南针0.12.3(Alnilam)

到目前为止,一切似乎都很好; 我可以创建一个Compass项目并使用它.然后我尝试安装Susy:

sudo gem install susy --pre

要不就

sudo gem install susy

这似乎安装susy-2.0.0

比我跑:

compass create /Users/tom/Thomas/htdocs/susi4-test -r susy -u susy

我收到这个错误:

Gem::LoadError on line 2064 of /Library/Ruby/Site/1.8/rubygems/specification.rb: Unable to activate susy-2.0.0, because sass-3.2.14 conflicts with sass (~> 3.3.0)
Run with --trace to see the full backtrace

因此,不同版本的兼容性似乎存在问题.我该怎么做才能解决此错误？

我已成功使用美丽的Susy网格系统来创建类似于WebDesignerWall.com的响应式布局:

我未能实现的是position:fixed侧边栏.

当页面滚动并保持在同一位置时,这样的侧边栏不会滚动.这非常方便(无论如何,你实际上无法将更多内容放入侧边栏,因为它会在狭窄的窗口中混乱页面顶部).

每当我申请position:fixed专栏时,我的布局都会变得疯狂: 彩色块被声明为三列宽,但在position:fixed应用于侧栏时会进一步伸展.

我认为问题是侧边栏的宽度是相对的,即以百分比设置.由于position:fixed,宽度是根据浏览器窗口的宽度而不是其容器来测量的(尽管我将容器设置为position:relative).

问题是:如何在对其容器而不是视口测量其宽度的同时将列固定到窗口？

也许用JS来修复元素的位置是可能的？

PS我已经尝试了width: inherit解决方案,但它对我的情况没有任何帮助.

我正在使用Susy 2.0.我正在构建一个固定宽度的站点(将在后期阶段响应).但是,我认为我的问题适用于使用Susy作为静态或流体.

以下是我的全局设置:

$susy: (
 container: auto, 
 columns: 12,  
 column-width: 62px,
 math: static, 
 gutters: 1/3,
);

根据关于静态站点的Susy 2.0文档,我将容器设置为auto,我让列宽设置决定了我的容器元素的宽度.

我想对容器应用一些左右填充,这样当视口在移动设备上变窄时,两侧都会有一点呼吸空间.

这样做的最佳方法是什么？如果我只是将padding-left和padding-right(在纯CSS中)应用于我的容器元素,这会破坏网格.容器不再宽,不足以包含Susy的列宽计算.

我在CSS中将'box-sizing'普遍设置为'border-box'.如果我在容器元素上使用'content-box'覆盖它,那么网格行为正确.我原本期望相反吗？

解决方案是将'box-sizing:content-box'应用于我的容器元素吗？或者在Susy中有一个设置我可以申请我失踪了吗？我觉得可能有.如果可能的话,我宁愿让Susy处理所有网格计算.

我的问题也适用于响应/流体设计,因为即使我给容器设置一个特定的宽度并删除'列宽'和'数学'设置,我仍然有同样的问题.

我想知道这两个网格系统之间是否存在任何关键差异.我在表面上看不到任何东西,也不知道为什么我要选择一个而不是另一个.在过去的几个月里,我建立了具有奇点和susy 1的网站,他们都很棒.它们似乎都是由坚实的人们积极开发和建造的.一个人提供的优势是否有其他优势？是否有任何情况可能是更好的选择？

我刚开始和Susy一起玩.我有一个12列网格,上面有网格填充.现在我希望我的页面标题跨越整个网格,包括网格填充.我现在正在做的是计算总宽度,然后在标题上设置负边距.这对我来说感觉相当苛刻......有更清洁的方法吗？

$total-columns  : 12;
$column-width   : 3.5em;
$gutter-width   : 1.25em;
$grid-padding   : 2em;

$total-width: ( $total-columns * ($column-width + $gutter-width) ) + ( 2 * $grid-padding ) - $gutter-width;

header {
    height: 150px;
    width: $total-width;
    margin-left: -$grid-padding;
}

我无法弄清楚我与Susy的设置有什么问题.我在OS X 10.7.4上

我跟在这里:http://susy.oddbird.net/guides/getting-started/

错误

Syntax error: File to import not found or unreadable: susy.
Load paths:
Users/simon/Websites/wpsvntree/trunk/sass
/Users/simon/.gem/ruby/1.8/gems/compass-0.11.7/frameworks/blueprint/stylesheets
/Users/simon/.gem/ruby/1.8/gems/compass-0.11.7/frameworks/compass/stylesheets
            Compass::SpriteImporter
on line 2 of /Users/simon/Websites/wpsvntree/trunk/sass/_base.sass
from line 2 of /Users/simon/Websites/wpsvntree/trunk/sass/screen.sass

我安装的宝石:

*** LOCAL GEMS ***

chunky_png (1.2.6, 1.2.5)
compass (0.12.2, 0.11.7)
compass-boilerplate-plugin (0.1.0)
compass-h5bp (0.0.5, 0.0.2)
compass-rails (1.0.3)
fssm (0.2.9, 0.2.8.1)
html5-boilerplate (2.1.0)
sass (3.2.1, 3.1.15)
susy (1.0.3)

我的config.rb文件位于项目的根目录中

require 'susy' 
# Require any additional compass plugins here.

# Set this to the root of your …

使用Susy时,在行的最后一项上放置一个"omega"标志以删除它margin-right.例如,假设我们需要在12列网格上布置一些项目:

<div class="item">...</div>
<div class="item">...</div>
<div class="item">I'm the last of the row</div>
<div class="item">...</div>

和SCSS:

.item{
  @include span-columns(4);
  @include nth-omega(3n);
}

但我们的网格是响应式的,较小的显示器使用8列网格.问题是omega现在需要出现2n,而不是3n:

<div class="item">...</div>
<div class="item">I'm the last of the row</div>
<div class="item">...</div>
<div class="item">...</div>

所以我的问题是:对于Susy,您是否需要为每个断点重新定义列,或者是否有某种方法可以一劳永逸地定义列宽并让它omega自然地落在正确的位置？

如果没有,是否有其他网格系统提供？

我正在努力找到一个很好的解决方案,在两个不同的罗盘项目上工作 一个基于Compass使用Blueprint(旧版本),另一个基于susy grid(较新版本).

目前,我必须为该watch过程重新安装正确的版本.

是否可以compile使用指定版本运行？如果还可以运行watch具有指定版本的进程,那将会很棒.

在我最大的桌面视图/断点中,我尝试在Susy演示页面(http://susy.oddbird.net/demos/magic/)上完成相同的行为- 当达到容器最大宽度时,只有填充或边距当容器本身保持最大宽度时,每侧都在增长.

但是我仍然对像优选单元这样的几个点有点困惑,以及实现所描述的填充/边距行为的最佳功能是什么.

我目前的一般Susy设置如下:

$total-columns: 24;
$column-width: 3%;
$gutter-width: 1%;
$grid-padding: 0;

特定的Scss部分看起来像那样.我已经包括一个容器,并通过压扁边缘与它边缘:

.sectionwrap{
    @include container;
    @include squish(3,3);
    @include breakpoint($medium) {
        @include squish(2,2);
    }
    @include breakpoint($small) {
        @include squish(1,1);
    }
}

但问题是容器和压扁区域都会成长,成长并按比例增长.可能有一个缺点是使用的单位是百分比？使用em或rem会更合理吗？

总结并达到最大宽度的手段(列数*(柱宽+沟宽))自动只有压扁区域在理论上继续增长？但我尝试了它失败了.

我也尝试过:

$container-width: 1000px;

但也没有运气.任何提示都表示赞赏.最好的问候拉尔夫

更新: 我首先将我的网站重新安排到移动设备,并认为我得到了整个Susy网格概念,这个概念在最初的squish()事件中有点误导.:s但不知怎的,我猜我又做错了什么.

// breakpoint variable set for Breakpoint - value is converted to em by Breakpoint
$fivehundred: min-width 500px;   

//basic Susy settings for the initial mobile viewport
$total-columns: 8;  
$column-width: 3em;
$gutter-width: 1em;
$grid-padding: 1em;

//modified Susy setting for a larger …