Sass 配置compass浏览器支持(compass 1.x语法)
使用Compass的0.12.x版本,我定义了对旧版的支持:Sass 配置compass浏览器支持(compass 1.x语法),sass,compass-sass,compass,Sass,Compass Sass,Compass,使用Compass的0.12.x版本,我定义了对旧版的支持: @import "compass/support" $legacy-support-for-ie6: false; $legacy-support-for-ie7: true; $legacy-support-for-ie8: true; $legacy-support-for-mozilla: false; @if ($legacy-support-for-ie7) { // specific declaration if
@import "compass/support"
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: true;
$legacy-support-for-ie8: true;
$legacy-support-for-mozilla: false;
@if ($legacy-support-for-ie7) {
// specific declaration if ie7 is supported
}
我不知道我该如何定义以下内容。
也许是这样的:
// Add support for a specific browser
$browser-minimum-versions: (
'ie': "7",
'ie': "8"
);
// Reject browsers
$supported-browsers: reject(browser-versions("ie"), "6", "7", "8");
但它返回该错误(在Compass 1.0.1上运行):
排除浏览器是通过修改
$magnetive usage threshold
变量来完成的。如果浏览器X仅占4.99%的市场份额,则需要将其设置为5
$debug-browser-support: true;
$browser-minimum-versions: (
"ie": "9"
);
$graceful-usage-threshold: 4.46163;
@import "compass";
.foo {
@include opacity(.5);
@include border-radius(10px);
}
输出:
.foo {
/* Content for ie 8 omitted.
Minimum support is 9. */
opacity: 0.5;
/* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -webkit because 0.1583% of users are affected which is less than the threshold of 4.46163. */
border-radius: 10px;
}
.foo {
/* Content for ie 8 omitted.
Minimum support is 9. */
opacity: 0.5;
/* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is prefixed with -webkit because safari "4" is required. */
/* Creating new -webkit context. */
-webkit-border-radius: 10px;
border-radius: 10px;
}
请注意,这会导致排除您可能希望支持的其他少数浏览器。这时,$browser最低版本就开始起作用了
$browser-minimum-versions: (
"ie": "9",
"safari": "4"
);
输出:
.foo {
/* Content for ie 8 omitted.
Minimum support is 9. */
opacity: 0.5;
/* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -webkit because 0.1583% of users are affected which is less than the threshold of 4.46163. */
border-radius: 10px;
}
.foo {
/* Content for ie 8 omitted.
Minimum support is 9. */
opacity: 0.5;
/* Capability border-radius is not prefixed with -moz because 0.25036% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -ms because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is not prefixed with -o because 0% of users are affected which is less than the threshold of 4.46163. */
/* Capability border-radius is prefixed with -webkit because safari "4" is required. */
/* Creating new -webkit context. */
-webkit-border-radius: 10px;
border-radius: 10px;
}
为了更容易地排除旧浏览器,工作中进行了一些更改。你可以在这里找到它们:
如果要为特定浏览器制定规则,则使用$critical usage threshold
变量:
$debug-browser-support: true;
$browser-minimum-versions: (
"ie": "9"
);
$critical-usage-threshold: 4.46163;
$graceful-usage-threshold: 4.46163;
@import "compass";
.foo {
@include for-legacy-browser('ie', '8') {
color: green;
// this is based on $critical-usage-threshold by default
// if $critical-usage-threshold is lower than the version's usage
// then this content will be generated
}
@if support-legacy-browser('ie', '8') {
color: red;
}
}
您想支持哪些浏览器版本?关于IE,>ie7。谢谢。然后,我假设$generate usage threshold
是一个基于But-Then的百分比,关于我问题的第二部分。如何为特定浏览器添加声明,如@if($legacy-support-for-ie7){//specific declaration}
@raphaellarinaga,已用示例更新。