如何确定zurbs基础的sass版本中的装订线宽度 [英] How do determine gutter-width in the sass version of zurbs foundation

查看:45
本文介绍了如何确定zurbs基础的sass版本中的装订线宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

应该比较简单,因为我无法安静地解决它.

Should be relatively simple, by I can't quiet figure it out.

我有这个:

.parent
   @include grid-row()


.main
    @include grid-column(8)

.sidebar
    @include grid-column(4)

元素'main'和'sidebar'最终彼此相邻而没有排水沟.

The elements 'main' and 'sidebar' end up sitting right next to each other with no gutter.

我可以在网格文档中看到一个名为$ column-gutter的变量,并且它具有默认设置.但是我看不到它的效果.

I can see in the grid docs that there is a variable called $column-gutter, and that it has a default setting. But I can't see it's effect.

在文件_grid.scss中,我可以看到$ column-gutter.它具有默认值,而我已经碰过它.但这对连续的并排元素没有影响.这些元素没有装订线.

In the file _grid.scss I can see $column-gutter. It has a default value, and I have touched it. But it has no effect on side-by-side elements in a row. These elements have no gutters.

那我该如何使用该变量,或者设置装订线宽度?

So how do I make use of that variable, or otherwise set gutter widths?

推荐答案

您应在导入Foundation之前设置配置变量的值.

You should set values of the configuration variables prior to importing Foundation.

请参见 http://compass-style.org/help/tutorials/configurable-变量/:

许多Compass模块使用受保护的分配,以允许您为该模块设置默认值.为了使这些可配置变量正常工作,必须在导入模块之前设置变量.例如:

Many Compass modules use guarded assignment to allow you to set defaults for that module. In order for these configurable variables to work correctly, you must set the variables before you import the module. For example:

$ blueprint-grid-columns = 12

$blueprint-grid-columns = 12

@import蓝图/网格"

@import "blueprint/grid"

因此,通常有一个或多个partials首先设置常量,然后在样式表中的其他任何导入之前先将其导入.这通常称为基本"样式表,通常命名为 _base.scss 或_base.sass.

Because of this, it is common to have one or more partials that set the constants first and get imported before any other imports in your stylesheet(s). This is commonly referred to as the "base" stylesheet and is usually named _base.scss or _base.sass.

这篇关于如何确定zurbs基础的sass版本中的装订线宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆