Question

我的scss文件中有以下内容：

@import compass
$base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';


html {
  @include establish-baseline($base-font-size);
  font-family: $lato;
}

但是当我检查我的CSS时，@ include define-baseline规则不输出任何内容，我没有编译错误。任何人都知道什么可能是错的？

Answer 1

主要问题：

在您的情况下，您应该将导入的文件名"compass"放在引号之间：

@import "compass"

如果您只想导入establish-baseline mixin，请改用：

@import "compass/typography/vertical_rhythm";

一些提示：

没有必要设置$base-font-size: 16px，因为导入的罗盘文件带有$base-font-size: 16px !default变量声明
正如@nyuen所说，你不需要传递$base-font-size作为参数，你应该将@include establish-baseline移出html。

以下是修改后的代码：

// you should use the file name to import between quotes
@import "compass";
// $base-font-size: 16px !default; it's already declared in compass
// $base-font-size: 16px;
$base-line-height: 20px;
$lato: 'Lato, Helvetica, Arial, sans-serif';

// This include should be use out of any selector
@include establish-baseline();

html {
  font-family: $lato;
}

Answer 2

我也正在学习垂直节奏，这是我的建议：

我认为语法应该是“@include establish-baseline;” （没有$ base-font-size参数，因为当你包含establish-baseline mixin时，它会自动查找该参数，以及$ base-line-height），你也可以从html选择器中移出该行在$ base-line-height声明下。

@include establish-baseline（$ base-font-size）;不产生输出？

2 个答案: