Sass结合Modernizr的使用方法

Modernizr在初始化的时候会首先找寻class=“no-js”的元素:

<!DOCTYPE html>
<html class="no-js">
<head lang="en">
    <title>ModernizrDemo</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./stylesheets/base.css">
</head>
<body>
<script src="js/Modernizr.js"></script>
</body>
</html>

如果浏览器支持JavaScript，那么节点的class会被变成“js”，使用firebug或者谷歌控制台查看就是如下结果:

<!DOCTYPE html>
<html class="js fontface cssanimations
 backgroundsize borderradius boxshadow csstransitions no-csscalc">
<head lang="en">
    <title>ModernizrDemo</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="./stylesheets/base.css">
</head>
<body>
<script src="js/Modernizr.js"></script>


</body></html>

我们可以看到，在html节点，附加了一些“未知”的样式名称，这正是Modernizr检测CSS支持情况的结果，如果附加的className是no-""，那么表明当前浏览器内核不支持改css属性，那么就为我们在开发中解决浏览器的差异上提供了很大的便利。

本文只阐述如题观点，如果你同时在使用sass作为css预处理器的话，实测可以告诉您一个技巧，来看一个例子：

.csscalc .mg-right{
  margin-right:calc(100% - 900px);
}
 .no-csscalc .mg-right{
  margin-right: 3%;
}

上述样式说明了，在浏览器支持css运算函数calc的时候，右边距样式使用calc来计算，不支持的时候右边距样式为3%;

这就使得我们在使用sass的时候，如果我们很元素都在使用这个边距，

那么我们不能以一个函数（@mixin）来表示公共的右边距了，因为它不具备一个单独的样式木块（不具备一个具体名称mg-right），不能被命名空间.csscalc或者.no-csscalc所管理：

如下代码：

/**这种方式编译到样式中以后并不能被Modernizr所产成的命名空间所管理，bad**/
@mixin mixin_mg_right(){
  margin-right: calc(100% - 900px);
  margin-right: 3%;
}
body{
  @include mixin_mg_right();
}



/**使用继承的方式来管理。good**/
.csscalc .mg-right{
  margin-right:calc(100% - 900px);
}
.no-csscalc .mg-right{
  margin-right: 3%;
}
body{
  @extend .mg-right;
}

如此，完结！

posted @ 2016-06-01 10:52  嘿煤贵  阅读(253)  评论(0)  编辑  收藏  举报