我有这个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'
很讨厌