sass转css并处理浏览器兼容性

一、大前提,你必须安装必备的环境

  node.js

  安装cnpm解决下载卡顿

    命令:npm install -g cnpm --registry=https://registry.npm.taobao.org

    查看官网api:https://www.gulpjs.com.cn/docs/getting-started/quick-start/

  安装gulp

    查看官网api:npm install --global gulp-cli

    查看官网api:https://www.gulpjs.com.cn/docs/getting-started/quick-start/

  查看环境

    

二、开始:

cnpm init
cnpm install --save-dev gulp
cnpm install --save gulp-sass
cnpm install --save gulp-autoprefixer

创建gulpfile.js文件

let gulp = require(‘gulp‘),
    sass = require(‘gulp-sass‘),//sass转css插件
    auto = require(‘gulp-autoprefixer‘);//解决浏览器兼容问题的插件
gulp.task(‘sass‘, function(){
    return gulp.src(‘sass/*‘)//需要编译的文件目录
        .pipe(sass({outputStyle:‘compressed‘}).on(‘error‘,sass.logError))
        .pipe(auto({//处理兼容
            browsers:[‘last 2 version‘],
            cascade:false
        }))
        .pipe(sass())//开始编译
        .pipe(gulp.dest(‘css‘));//存放编译之后的目录
});

// exports.default = function(){}

使用gulp sass运行(此处的sass对应的就是gulpfile.js文件中的task指令)

结果:

  

  

原文地址:https://www.cnblogs.com/zhizou/p/11751591.html

时间: 2024-10-11 18:14:40

sass转css并处理浏览器兼容性的相关文章

css专题学习-浏览器兼容性问题目录

此帖是我所分享的浏览器兼容性问题相关的所有目录. [分享]浏览器兼容性问题综述 -- 正确的认识浏览器兼容性问题 [分享]你的元素居中对齐了吗? --- 关于 'text-align:center' 的问题 [分享]<a>标签的伪类书写顺序问题 [分享]IE6 中 A 标签 hover 伪类特殊性过高的问题 [分享]深入挖掘document.getElementsByTagName()方法的返回值 [分享]警惕你的 Date 对象 [分享]重新认识IE盒模型bug [分享]你知道吗?--- 表

css中常见浏览器兼容性问题

浏览器兼容问题一:不同浏览器的标签默认的外补丁和内补丁不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:CSS里 *{margin:0;padding:0;} 备注:这个是最常见的也是最易解决的一个浏览器兼容性问题,几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0. 浏览器兼容问题二:块属性标签float后,又有横行的margin情况下,在IE6显示 margin比设置的大 问题症状:常见症状是I

CSS的一些浏览器兼容性

1. cursor:hand   VS   cursor:pointer firefox不支持hand,但ie支持pointer解决方法:   统一使用pointer 2.innerText在IE中能正常工作,但在FireFox中却不行. 需用textContent.解决方法: if(navigator.appName.indexOf("Explorer") > -1){ document.getElementById('element').innerText = "m

浏览器兼容性问题(待更新)

1.对于不支持渐变的浏览器,可以添加浏览器前缀来适应渐变效果 浏览器前缀: Firefox :-moz- Chrome & Safari :-webkit- Opera : -o- IE : -ms- 2.如果浏览器不支持属性的话,前缀则加载属性名称前 ex: animation : css3中做动画的属性 -moz-aniamtion:值;/*火狐*/ -webkit-animation:值;/*Chrome&Safari*/ -o-aniamtion:值;/*Opera*/ 3.如果浏

CSS实现跨浏览器的box-shadow盒阴影效果(2)

一.前言 我之前曾写过一篇关于实现跨浏览器实现box-shadow效果的文章,本文虽然题目类似,但是核心部分是有差异的.前面的文章虽然实现IE下的盒阴影效果也是使用的滤镜,但是使用的是shadow滤镜,这种滤镜的效果很牵强,效果过渡不自然,见下图: 您可以狠狠地点击这里:IE下阴影不自然demo 而本文实现的IE下的盒阴影效果就相对非常自然,而且还支持内阴影的UI表现.到底是如何实现的,究竟效果如果,请继续浏览. 二.浏览器纯爷们模式下的支持情况 CSS3 box-shadow属性基本上所有的现

CSS 多浏览器兼容性问题及解决方案

css的兼容性也是大家关注的热点.大家一定要注意多测试. Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点1.DOCTYPE 影响 CSS 处理 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式 4.div 的垂直居中问题: vertical-

浏览器兼容性问题解决方案之CSS,已在IE、FF、Chrome测试

当前主浏览器的核心是什么? 1) Trident:IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的 IE7.Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon.TheWorld .TT.GreenBrowser.AvantBrowser等). 2) Geckos: Netcape6开始采用的内核,后来的FF也采用了该内核,Geckos的特点是

CSS浏览器兼容性问题

常见的CSS浏览器兼容性问题及解决方案: 1. div的垂直居中问题 CSS的vertical-align属性,是对(x)html中具有valign特性的元素才起作用的,例如,表格元素的<caption>.<th>.<td>,而像<div>.<span>这样的元素不具有valign特性,veritcal-align对这些元素不起作用.

常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果.所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题. 在学习浏览器兼容性之前,我想把前端开发人员划分为两类: 第一类是精确按照设计图开发的前端开发人员,可以说是精确到1px的,他们很容易就会发现设计图的不足,并且在很少的情况下会碰到浏览器的兼容性问题,而这些问题往往都死浏览器