Question

我有这个scss文件：

test.scss

@media screen and (min-width: 1200px)  {
  @import 'desktop_vars';
  @import 'global_dynamic';
}
@media screen and (max-width: 767px)  {
  @import 'smartphone_vars';
  @import 'global_dynamic';
}

global_dynamic.scss

#companies {
  margin: 0px $envelope-Margin-Right 0 $envelope-Margin-Left;
}

#envelope {
  padding: 0 $envelope-Margin-Right 0 $envelope-Margin-Left;
}

#footer {
  margin: 0 $envelope-Margin-Right 0 $envelope-Margin-Left;
}

smartphone_vars.scss

$envelope-Margin-Left: 5px;
$envelope-Margin-Right: 7px;

desktop_vars.scss

$envelope-Margin-Left: 25px;
$envelope-Margin-Right: 47px;

结果test.css：

@media screen and (min-width: 1200px) {
  /* line 1, ../../resources/assets/sass/global_dynamic.scss */
  #companies {
    margin: 0px 45px 0 25px;
  }

  /* line 5, ../../resources/assets/sass/global_dynamic.scss */
  #envelope {
    padding: 0 45px 0 25px;
  }

  /* line 9, ../../resources/assets/sass/global_dynamic.scss */
  #footer {
    margin: 0 45px 0 25px;
  }
}

如果我更改了导入的test.scss中的顺序，即第一个智能手机，然后是桌面，则生成的css文件如下所示

@media screen and (max-width: 767px) {
  /* line 1, ../../resources/assets/sass/global_dynamic.scss */
  #companies {
    margin: 0px 7px 0 5px;
  }

  /* line 5, ../../resources/assets/sass/global_dynamic.scss */
  #envelope {
    padding: 0 7px 0 5px;
  }

  /* line 9, ../../resources/assets/sass/global_dynamic.scss */
  #footer {
    margin: 0 7px 0 5px;
  }
}

所以：global_dynamic的第二次导入永远不会起作用

为什么？

Answer 1

在config.rb

中

删除此行：

require 'compass/import-once/activate'

或者像这样评论

#require 'compass/import-once/activate'

太烦人了

使用compass / sass / scss导入相同的文件不包括在内

1 个答案: