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官网介绍,下面 ...
随机推荐
- android开发修改相机扫描二维码框的高宽
我用的是网上一个现成的例子,可以直接用,但是高宽不合适,现在主流都是大屏幕手机了,所以需要更改. 找到CameraManager 类,更改下面的方法 public Rect getFramingRec ...
- java核心技术记录之集合
java库中的具体集合: 集合类型 描述 ArrayList 一种可以动态增长和缩减的索引序列 LinkedList 一种可以在任何位置进行高效地插入和删除操作的有序序列 ArrarDeque 一种用 ...
- struts2学习笔记（3）——struts2的局部类型转换
今天又学到了一个新的东西,就是struts2的类型转换. 为什么要类型转换? 今天我就要传一个点的坐标给你,保存时用一个自定义的Point类来保存. 因为在表单里面传过去的是字符串,如“12,23”, ...
- http://my.oschina.net/u/1185331/blog/502350
http://my.oschina.net/u/1185331/blog/502350
- vector、string实现大数加法乘法
理解 vector 是一个容器,是一个数据集,里边装了很多个元素.与数组最大的不同是 vector 可以动态增长. 用 vector 实现大数运算的关键是,以 string 的方式读入一个大数,然后将 ...
- 李洪强iOS开发之上传照片时英文改中文
今天在做项目的时候,有一个功能是上传照片选择系统相册的照片,或者拍照上传照片,但是页面上的文字是英文的, 需求想改成中文的,解决方法是在 info.plist里面添加 Localized resour ...
- lintcode：Compare Strings 比较字符串
题目: 比较字符串 比较两个字符串A和B,确定A中是否包含B中所有的字符.字符串A和B中的字符都是 大写字母 样例 给出 A = "ABCD" B = "ACD" ...
- 规范化ProjectEuler
Euler Level3 规范化程序: 包名:LevelX,X是等级 每题程序名:PE0xx.java,PE0xx.py 程序有必要的注释,不同方法运行结果也在程序中 规范化博文: 名字:Projec ...
- 是谁决定了走redis缓存？当然是mybatis啊
1.是谁决定了走redis缓存?当然是mybatis啊 mybatis里默认实现数据的增删改查功能,这里要用到缓存啊 而且是mybatis这种orm框架采用缓存机制的,mybatis默认都有两层缓存了 ...
- 用static关键字修饰类
Java里面static一般用来修饰成员变量或函数.但有一种特殊用法是用static修饰内部类,普通类是不允许声明为静态的,只有内部类才可以.被static修饰的内部类可以直接作为一个普通类来使用,而 ...