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;

}

如此，完结！

Sass结合Modernizr的使用方法的更多相关文章

  1. Sass 编译的几种方法

    常常有人会问,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢? 那么这里告诉大家,在项目中还是引用“.css”文件,Sass 只不过是 ...

  2. sass学习笔记 -- sass的四种编译方法

    sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...

  3. sass安装更新及卸载方法

    在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本 ...

  4. sass中文注释的解决方法和一些简单用法

    最近用sass来编写项目中的css,发现不能添加中文注释,报错如下 于是查阅了一下发现需要在scss文件顶部加上@charset "utf-8"即可解决. 在此顺便记录一些sass ...

  5. 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sas ...

  6. Sass环境安装-Sass sublime 编辑器插件编译方法

    首先官网(http://www.ruby-lang.org/en/downloads/)下载 ruby (1)打开链接进入到下载页面,点击如下位置进行下载 (2)下载页面 (3)进入到各个版本的列表页 ...

  7. Sass基本数据类型和各类型的原生方法

    数据类型: 数字:1,2,3,11,10px (可以带单位) 字符串:"asd",'asd',asd (有引号和无引号都是字符串类型) 如 $name : zhang san ; ...

  8. sass初步认识2

    sass可以使用变量,采用 $ 来进行变量声明,格式为: $highlight-color:#f90;(声明方式和css属性声明类似.使用的变量名可以更加语义化) 与js分为全局变量和局部变量类似,s ...

  9. sass+require实现侧边栏

    一.效果图(如下)及使用的技术 实现用sass实现页面中右侧固定侧边栏的样式,用require.js实现返回顶部的功能 二.sass 具体的sass的介绍就不多说了,大家可以参考sass官网介绍,下面 ...

随机推荐

  1. 常用git 命令

    1.取消跟踪某些文件或文件夹: 删除文件: $git rm --cached FILENAME 删除文件夹: $git rm -r --cached Path 2.忽略某些文件或文件夹 $vi .gi ...

  2. .net发送邮件代码示例

    下面的代理已经调试过,用的是163的SMTP using System;using System.Collections.Generic;using System.Linq;using System. ...

  3. 初尝backbone

    backbone的基础知识在此将不再进行介绍.自己后续应该会整理出来,不过今天先把这几天学的成果用一个demo进行展示. 后续可运行demo将会在sinaapp上分享,不过近期在整理sinaapp上d ...

  4. windows server 2008 R2 远程连接用户数修改

    设置windows server 2008 R2 远程连接用户数修改,三步搞定 1.运行(win+R)中输入tsconfig.msc 2.双击“限制每个用户只能进行一个会话”,取消这个选项负选框 3. ...

  5. crawler

    # !/usr/bin/env python# encoding:UTF-8from util import request_urlimport reimport osimport sys#from ...

  6. MYSQL存储过程中常使用的命令记录

    MYSQL存储过程中常使用的命令记录 1.触发器trigger 查看:show triggers; 2.存储过程procedure 查看:show procedure status; 查看详细:sho ...

  7. ZOJ 3791 An Easy Game（DP）

    题目链接 题意 : 给你两个长度为N的字符串,将第一个字符串每次只能变化M个,问变换K次之后变成第二个字符串一共有几种方法. 思路 : DP.dp[i][j]表示变了 i 次之后有j个不一样的字母的方 ...

  8. poj 3604 Professor Ben

    质因数分解:牛人推导公式(1^3+2^3+……+(1+a1)^3)*……*(1^3+2^3+……+(1+ai)^3)…… 链接http://poj.org/problem?id=3604 #inclu ...

  9. Android面试题基础（转）

    71道经典Android面试题和答案 1.下列哪些语句关于内存回收的说明是正确的? (b ) A. 程序员必须创建一个线程来释放内存 B.内存回收程序负责释放无用内存 C.内存回收程序允许程序员直接释 ...

  10. JMeterPluginCMD命令行工具使用详解

    MeterPluginCMD命令行工具生成png图片和csv统计文件 Jmeter是个纯java的开源的轻量级性能测试工具,功能强大.因为是轻量级的,与loadrunner相比,报告统计的相对较少.不 ...