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;
}
如此，完结！
Sass结合Modernizr的使用方法的更多相关文章
- Sass 编译的几种方法
常常有人会问,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢? 那么这里告诉大家,在项目中还是引用“.css”文件,Sass 只不过是 ...
- sass学习笔记 -- sass的四种编译方法
sass的四种编译方法:(.scss) (一)ruby下的命令行编译 首先需要安装ruby,注意需勾选Add Ruby executables to your PATH选项,以添加环境变量. ruby ...
- sass安装更新及卸载方法
在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包,大家可以到 Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本 ...
- sass中文注释的解决方法和一些简单用法
最近用sass来编写项目中的css,发现不能添加中文注释,报错如下 于是查阅了一下发现需要在scss文件顶部加上@charset "utf-8"即可解决. 在此顺便记录一些sass ...
- 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法
Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sas ...
- Sass环境安装-Sass sublime 编辑器插件编译方法
首先官网(http://www.ruby-lang.org/en/downloads/)下载 ruby (1)打开链接进入到下载页面,点击如下位置进行下载 (2)下载页面 (3)进入到各个版本的列表页 ...
- Sass基本数据类型和各类型的原生方法
数据类型: 数字:1,2,3,11,10px (可以带单位) 字符串:"asd",'asd',asd (有引号和无引号都是字符串类型) 如 $name : zhang san ; ...
- sass初步认识2
sass可以使用变量,采用 $ 来进行变量声明,格式为: $highlight-color:#f90;(声明方式和css属性声明类似.使用的变量名可以更加语义化) 与js分为全局变量和局部变量类似,s ...
- sass+require实现侧边栏
一.效果图(如下)及使用的技术 实现用sass实现页面中右侧固定侧边栏的样式,用require.js实现返回顶部的功能 二.sass 具体的sass的介绍就不多说了,大家可以参考sass官网介绍,下面 ...
随机推荐
- Winform控件学习-TreeView
转自 http://www.cnblogs.com/zxlovenet/p/3589425.html 作者: 初行 TreeView控件用来显示信息的分级视图,如同Windows里的资源管理 ...
- [转载]Windows 7 IIS (HTTP Error 500.21 - Internal Server Error)解决
今天在测试网站的时候,在浏览器中输入http://localhost/时,发生如下错误: HTTP Error 500.21 - Internal Server Error Handler " ...
- PE文件结构详解（一）基本概念
PE(Portable Execute) 文件是Windows下可执行文件的总称,常见的有DLL,EXE,OCX,SYS等,事实上,一个文件是否是PE文件与其扩展名无关,PE文件可以是任 何扩展名.那 ...
- 如何通过热修复，搞定开发中的那些 Bug？
作为程序员,Bug 修复终究是绕不开的话题,本期移动开发精英俱乐部讨论的主题便是 Bug 修复中的 Hotfix,即热修复.接下来让我们跟随大牛的脚步来了解 Hotfix,就算你不能一下豁然开朗,相信 ...
- 从后端到页面：如何全方位监控 Ruby 应用？
[编者按]本文参考技术分享 ,由 OneAPM 工程师补充整理,并且已经征得原作者的同意. 为什么选择 OneAPM ? 在性能监控领域,业界比较有名的是 New Relic 还有 Appdynami ...
- Apache Ignite——新一代数据库缓存系统
[编者按]飞速增长的数据需要大量存储,对这些数据的管理也不是一件容易的事.但相比于存储和管理,如何处理数据才是开发人员真正的挑战.对于TB级别数据的存储和处理通常会让开发人员陷入速度.可扩展性和开销的 ...
- zoj 3232 It's not Floyd Algorithm（强联通分量，缩点）
题目 /******************************************************************/ 以下题解来自互联网:Juny的博客 思路核心:给你的闭包 ...
- ZOJ 3791 An Easy Game（DP）
题目链接 题意 : 给你两个长度为N的字符串,将第一个字符串每次只能变化M个,问变换K次之后变成第二个字符串一共有几种方法. 思路 : DP.dp[i][j]表示变了 i 次之后有j个不一样的字母的方 ...
- Lambda Action Func练习
namespace lambda { delegate void TestDelegate(string s); class Program { static void Main(string[] a ...
- C# Regex类用法
使用Regex类需要引用命名空间:using System.Text.RegularExpressions; 利用Regex类实现全部匹配输出 string str = "test43232 ...