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



我有这个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;
  }
}

so:第二次导入global_dynamic不工作

为什么?

in config.rb

删除这一行:

require 'compass/import-once/activate'

或者像这样注释掉

#require 'compass/import-once/activate'
很讨厌

最新更新