[英]Using susy and breakpoint with grunt-sass
Im working on a new project and started to use grunt-sass instead of grunt-contrib-sass because its alot faster. 我正在从事一个新项目,并开始使用grunt-sass代替grunt-contrib-sass,因为它的速度更快。 I also removed compass.
我还删除了指南针。 The thing now is that i cannot find a way to add 'susy' grid and 'breakpoint' anymore.
现在的问题是,我无法再找到添加“可疑”网格和“断点”的方法。 I used to put this in a config.rb file but im not using this anymore because im not using compass.
我曾经把它放在config.rb文件中,但是我不再使用它了,因为我没有使用指南针。
So i added all susy style in my project and thats works fine but its not my preferred method. 所以我在项目中添加了所有可疑的样式,并且效果不错,但不是我的首选方法。 But cant find a way to add breakpoint.
但是找不到增加断点的方法。
Is there a way to add these? 有没有办法添加这些? Or do i have to use compass for this?
还是我必须为此使用指南针?
Sorry for my bad english, not very good at it. 对不起,我的英语不好,不是很好。
No need for Compass, there's a new susy-media
breakpoint Mixin designed to work with LibSass which is what you are essentially using via grunt-sass. 不需要Compass,有一个新的可疑
susy-media
断点Mixin设计用于LibSass,这实际上是您通过grunt-sass使用的。 That's what I use and it works great. 这就是我使用的,效果很好。 So you'd define some Susy grid variables and breakpoints in a _vars.scss partial for example:
因此,您可以在_vars.scss部分中定义一些Susy网格变量和断点,例如:
// Define susy.
$susy: (
columns: 12,
gutters: .8,
);
// Define some breakpoints.
$bp-narrow: 30em; // 480px
$bp-med: 48em; // 768px
Now put it all together, say in _layout.scss for example: 现在放在一起,例如在_layout.scss中说:
// the breakpoint (media query)
@include susy-media($bp-med) {
// now a grid
.l-foobar-wrap {
.foo {
@include span(7)
}
.bar {
@include span(5 at 8)
}
}
}
For more info, read the susy docs , it's all there for you and this works with grunt-sass (LibSass). 有关更多信息,请阅读susy文档 ,它全都为您提供,并且可以与grunt-sass(LibSass)一起使用。 It's part of my everyday workflow.
这是我日常工作流程的一部分。
Note, as an alternative for really nice media query rendering and retina workflows, I now use Include Media rather than susy-media
and it also works fine with LibSass. 请注意,作为非常好的媒体查询渲染和视网膜工作流的替代方法,我现在使用Include Media而不是
susy-media
,它在LibSass中也可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.