标签: susy

我已经从COMPASS转移到Libsass,速度很快,但我需要使用一些凉亭组件来实现这一点.

它可能有点迂腐,但我必须在我的scss文件的顶部导入我的组件.

   @import "../bower_components/compass-mixins/lib/compass";
   @import "../bower_components/susy/sass/susy";

这很丑,有没有办法通过grunt或别名导入它们,所以我可以做

 @import "compass";
 @import "susy";

我想使用Susy设置Off-off列,例如Bootstrap中的偏移列.

我试着用

@include span(4 at 4);

但这不起作用.我做错了什么？

当我使用SUSY构建网格时遇到问题.我设置了以下包装类:

$susy: (
    math: fluid,
    columns: 12,
    gutters: 0.25,
    gutter-position: split,
);

问题是包装内的子元素.如果有时我想制作完整的列,我会尝试这样做

@include span(full);

但这并不完整,它有沟槽差距.然后我尝试另一个

@include span(full no-gutters);

这使得元素没有排水沟,但它仍然留有水槽宽度.

我怎样才能让它充满(没有排水沟)？仅适用于某些元素.

谢谢Chalat

有没有人能够压制这些警告,而sprockets-rails/sass-rails人员解决了这个问题？我正在处理开发中的超慢编译时间.我知道他们实际上并没有伤害,但他们让我疯了.

我正在使用Rails(4.1.6),5.0Beta的sass-rails,以及最新的sprockets-rails(2.2.0)gem,它与我的设置一起工作(3.0Beta还没有用).

我知道我可以降级到Sass 3.2,但是我已经在我的网站上撒了Susy 2并希望尽可能保持这种方式.

谢谢.

这是我在Susy 2中从未理解过的东西.

看一下这个简单的例子就说明:

http://codepen.io/itsthomas/pen/Btzxa

HTML:

<div id="wrapper">
  <div id="content">
    <div class="box1">Box1</div>
    <div class="box1">Box1</div>
    <div class="box1">Box1</div>
  </div>
  <aside>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.</p>  
  </aside>
</div>

上海社会科学院:

@import 'susy';
@include border-box-sizing;

$susy: (
  container: 90%,
  columns: 24,
  gutters: 1/3,
  /* global-box-sizing: border-box, */
  debug: (
    image: show,
    output: overlay,
  ),
);

#wrapper {
  @include container;
}

#content {
  @include span(18 first);
  background-color: red;
  height: 100px;
  padding: gutter();
}

aside …

如何用sass断点实现这个媒体查询？...

@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape)

我试过这个,但它也会影响桌面版......

$mobileLandscape: screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape);

@include breakpoint($mobileLandscape) {
}

我有一个三列网格,并使用该+span功能很好地定义列.所以如果我想要一个元素跨越一列我做:

+span(1 of 3)

和两个:

+span(2 of 3)

等等..

我现在想要一个元素跨越一列,但在位置2,即在中间列.

Susy文档说要使用at关键字来指定这样的位置:

+span(1 at 2 of 3)

但是,这不起作用,我的列位于第一个位置,即左侧.

结果css:

width: 30.303030303%;
float: left;
margin-left: 1.5151515152%;
margin-right: 1.5151515152%;

当我做

+span(1 at 3 of 3)

结果css:

width: 30.303030303%;
float: right;
margin-left: 1.5151515152%;
margin-right: 1.5151515152%;

这工作正常,我的列位于第三位.

如何使位置工作以使我的列位于第二位？

一些图片有助于解释:

在第一栏:

在第3栏:

我想要的是:

最后一个例子来自:

float: none
margin: 0 auto

我认为这是一个黑客,它也意味着高度现在是错误的,因为没有浮动.我不认为这是你应该如何与Susy合作.

版本:

指南针1.0.1 Susy 2.1.3

我使用.sass文件,而不是.scss

有谁知道如何在我的Windows系统上找到安装了哪个版本的Susy？

例如,您可以在命令行compass -v中写入以查找计算机上安装的Compass版本.但是susy -v不起作用.

是否有任何命令可以找出安装了哪个版本的Susy？

谢谢

我有一个相当简单的问题，我似乎无法弄清楚。某些列的定位跨度似乎没有任何影响。

header {  
.fullheight {
    @include backImage('../images/img_hero_brightspace-homepage.png');
    @include container(100%);
    .hgroup {
      @include span(6 at 6 of 12);
      padding: 200px 0 50px 0px;
      text-align: center;
      h3{
        display: block;
        font-weight: $light;
        font-size:2rem;
        color:grey;
      }
    }
}

有问题的线路是

@include span(6 at 6 of 12);

跨度仍然从 1 开始。有什么明显的我做错了吗？

Sass队列中的这个公开问题似乎意味着传递参数@content不是一个功能,但Susy 2似乎能够做到这一点.追踪它是如何完成的虽然是一个兔子洞,我还没想到它.也许有人可以通过一个直截了当的例子来解释一些事情？我想创建一个自定义mixin,它将继承susy-breakpoint()使用自定义地图传递的布局.

示例:在全局Sass映射中定义4列布局,当在susy-breakpoint()s 内指定范围4时,将返回100%的宽度@content.当8周的cols的自定义布局被传递到直接susy-breakpoint()经由$layout参数,嵌套span()混入拾取新的布局.但是自定义嵌套mixin不会选择新的布局.为什么？

@import 'susy';

$susy: (
  columns: 4,
);

@mixin inherit-layout($layout: 4) {
  columns: $layout;
}

@include susy-breakpoint(30em) {
  // nested code uses an 4-column grid from global map
  .global-cols {
    @include span(4);
    @include inherit-layout();
  }
}

@include susy-breakpoint(48em, $layout: 8) {
  // nested code uses an 8-column grid from $layout
  .inherited-cols {
    @include span(4);
    @include inherit-layout();
  } …

我在使用 Susy 2 的 span mixin 的“wide”选项时遇到了问题。

我将装订线位置设置为“之前”。

我有两列彼此相邻

.container{
   @include container;
}

.branding{
   @include span(3 first);
}

.nav-primary{
   @include span(9 wide);
}

<div class='container'>
   <div class='branding'>...</div>
   <div class='nav-primary'>...</div>
</div>

我假设 .nav-primary 的跨度设置为宽，它不应该包括左边距，但它确实如此，从而抛弃了布局。我可以将它重置为零，但我想知道我是否做错了什么。

谢谢