如何在编译CSS时覆盖SCSS变量

bou*_*her 53 sass jqtouch compass-sass

我正在尝试使用基于SASS和COMPASS的jqtouch主题.我有一个文件custom.scss,其中包含最简单的代码,一个导入和一个要覆盖的变量:

@import 'jqtouch';

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/
Run Code Online (Sandbox Code Playgroud)

当我现在将scss文件编译为css时,它基本上只用我的文件名生成jqtouch css.颜色规范无处可见,尽管变量是每个文档(官方指南)和jqtouch.scss文件中的definitley正确,我导入用于costumizing.

我在Windows机器上运行Sass 3.2.9和Compass 0.12.2.

我已经尝试了更多的变量和不同的文件导入,但结果总是,我的覆盖值没有合并.

指南针的ruby配置文件似乎是不可靠的.

有没有人知道过程中出了什么问题,以便忽略我的覆盖值?

cim*_*non 88

你设置的颜色后,它已被使用.基本上,你要做的是:

$color: red;

.foo {
    background: $color;
}

$color: green;
Run Code Online (Sandbox Code Playgroud)

根据jqtouch的编写方式,您可能根本无法修改颜色.您需要将变量设置为默认值才能提前覆盖它们:

$color: green;
$color: red !default; // red is only used if $color is not already set

.foo {
    background: $color; // color is green
}
Run Code Online (Sandbox Code Playgroud)

所以你的代码应该这样编写:

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

@import 'jqtouch';
Run Code Online (Sandbox Code Playgroud)

  • 但是,在第 3 方变量*之前*定义覆盖变量的唯一问题是,如果您想使用其他变量定义变量,则您将无权访问第 3 方变量 - 例如 `$一些填充变量:$jqtouch-default-padding / 2;` (2认同)