1.postcss PostCSS 的主要功能只有两个:第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构(Abstract Syntax Tree,AST),第二个就是调用插件来处理 AST 并得到结果. PostCSS 一般不单独使用,而是与已有的构建工具进行集成.PostCSS 与主流的构建工具,如 Webpack完成集成之后,选择满足功能需求的 PostCSS 插件并进行配置. 2.CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),需…

如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松.如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难. 我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass.Sty…

提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “你说的我都懂,那为什么要用它?” 套装与单件 如果Sass等预编译器是新定义了一种模板语言,然后将其转化为css的话,PostCSS则是更纯粹地对css本身做转换. 回想一下你是如何学习使用css预编译器的:了解到有这样一种可以转化为css的语言,它有很多特性,变量.嵌套.继承等等,每一种特性都通过…

关于sass,就不想多说什么了.只要你有css基础,十分钟入门好吗.可以参考下资料:http://www.w3cplus.com/sassguide/ 今天想说的是webStorm下如何实现sass自动编译. 最近在学习SASS,研究了下编译的方法,现在大家一般用的有两种,一种是直接用命令行编译,另一种就是利用一些方便的编译工具,例如腾讯的koala.后来我发现,原来webstorm早就支持了sass编译  - - 真是贴心啊.... 废话不多说,直接去webstorm配置去. 打开settin…

什么是postcss postcss 一种对css编译的工具,类似babel对js的处理,常见的功能如: 1 . 使用下一代css语法 2 . 自动补全浏览器前缀 3 . 自动把px代为转换成 rem 4 . css 代码压缩等等 postcss 只是一个工具,本身不会对css一顿操作,它通过插件实现功能,autoprefixer 就是其一. 与 less sass 的区别 less sass 是预处理器,用来支持扩充css语法. postcss 既不是预处理器也不是后处理器,其功能比较广泛,而…

市面上已经有很多的前端工具,再来引入新的前端工具,价值大不大?这主要取决于,它是否给开发人员提供了新的功能,是否值得花时间和精力去学习和使用? PostCSS出现时有一个很有趣的现象.像sass和less这些主要做css预处理的工具,已经有了它们的类别和使用方法的区别. 让我们先解决一些PostCSS常见的认识误区,这样可以看出它是如何提高你的工作效率,改善你的css编码工作的. 提示:如果你想了解PostCSS是什么及如何安装使用它,请看<PostCSS简介>,然后再回来看这篇文章. 误区1…

Sass是一种CSS预处理语言.CSS预处理语言是一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁.适应性更强,可读性更佳,更易于代码的维护等诸多好处. CSS预处理语言有Scss(Sass) 和Less.Postcss. Scss和Sass sass一开始用的是一种缩进式的语法格式 采用这种格式文件的后缀名是.sass 在sass3.0版本后我们常用的是sassy css语法,扩展名是.scss,更接近与…

本文是58到家前端工程化集成解决方案boi的博文系列之一.boi是基于webpack打造的一站式前端工程化解决方案,现已开源Github. 作为前端构建工具不可或缺的一个环节,自动生成css sprites图片不仅仅能够减少频繁的人工操作,还能够避免多人协作时对同一个sprites图片维护过程中因个人原因引起的图片不规范问题.58到家前端工程化解决方案boi的自动css sprites功能基于webpack实现,本文记录一下实现方案的各个细节以及需要注意的地方. 1. 功能需求 css spri…

一些比较小的H5页面,我觉得全没有必要一定要使用框架的,比如vue和react之类的,我觉得原生的js,html5也可以写好移动端. 最近刚好要赶10多个h5页面,适配移动端的,各种手机型号都要适配,笔者想起了自己的以前写过的一个转换小工具, 大家可以看之前我的文章和我一起使用postcss+gulp进行vw单位的移动端的适配 老实说,笔者根据之前的记录,根本就没有还原出小工具,实在是汗颜.不过,在笔者实在无法精确还原工具之后,笔者找到了之前练习的demo. 笔者一下子就搞定了. 先给大家看下项…

首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁.适应性更强,可读性更佳,更易于代码的维护等诸多好处.CSS预处理语言有SCSS (SASS) 和LESS.POSTCSS 那么SCSS和SASS 有什么区别呢 · 文件扩展名不同,文件后缀分别是“.scss”和“.sass” · sass是以严格缩进语法规则来编写代码的,不包括大括号和…

sass是css预处理器 需要安装node-sass支持 核心是c++编写 集成 sass-loader 把scss装换成css css-loader 找出@import和url()导入的语法,告诉webpack依赖的资源.同时支持css modules.压缩css等 style-loader 把css转换成字符串,注入到javascript里.单独提出ExtractTextPlugin PostCSS是更纯粹地对css本身做转换,在css之后来处理,利用插件类似gulp里的task PostC…

1:⚠️⚠️ 首先安装依赖 npm install --save-dev webpack style-loader css-loader postcss-loader sass-loader autoprefixer 2:然后配置webpack module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.scss$/, use: [ { loader: 'style-loader'…

为什么要使用PostCss 转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 rem,精简了不常用的配置.将成为vw优先单位使用,以rem作为回退模式.考虑到vw在移动设备的支持度不如rem,这款插件很好的解决了该问题.然后简单的介绍下. 安装指令 $ npm install @ moohng / postcss-px2vw --save-dev 使用方法 先创建一个.pos…

原文链接:A look into writing future CSS with PostCSS and cssnext 译者:nzbin 像twitter,google,bbc使用的一样,我打算看一看使用PostCSS处理的css的世界. PostCSS是什么? PostCSS 是使用 javascript 插件转换 css 的后处理器.PostCSS 本身不会对你的 css 做任何事情,你需要安装一些 plugins 才能开始工作.这不仅使其模块化,同时功能也会更强. 它的工作原理就是解析…

虽然PostCSS才是未来,但是Sass成熟稳定,拥有一大波忠实的使用者,及开源项目,且最近Bootstrap 4 alpha也从Less转到Sass了.所以了解Sass还是非常有必要的. 基于快速开发及效率,我开发环节习惯通过编辑器插件来完成Less/Sass编译,这样可以快速定位.修复Bug. 下面介绍一款Sublime Text的插件SASS build system for Sublime Text 2可以在编辑器完成Sass编译.名字是2但Sublime Text 3可用无压力. 安装…

Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include display-flex; } 会得到如下代码: .row { display: -webkit-flex; display: flex; } 但是, 做为一个长期用原生CSS书写方式的CSSer,不太习惯去官方查文档,再以@include方式书写. 那么问题来了,我只能放弃高效率方式么? 其实不然, Aut…

对样式审查?很少人会这么做吧,但实际上开发者应该有这样的态度,尤其是不同团队多人开发时,这一点尤为重要. 在本文中,我将陈述两点:一是为什么我们需要对样式进行审查,二是如何将审查工具融合到整体的构建流程中(适用于 CSS,也适用于 Sass). 简介 什么是代码审查 代码审查是一个检查代码是否符合编程规范以及查找代码错误的过程,如果要做个比喻,那么它就是编程语言的拼写检查工具.代码审查可以帮助独立开发者更好的维护代码,但它更大的能力是帮助团队维护代码. 为什么我们需要审查样式 对样式进行审查的原…

因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 在阅读本文章之前,请先确认你已经阅读了上篇文章sass揭秘之变量,不然会给你带来疑惑的感觉. 其实很多人之所以对sass或less感兴趣,就是因为他们能使用变量和这个@mixin功能,而后面的%和@function知道的人就比较少了.所以说@mixin这个东西还是很有诱惑力的,没办法,广告做得好啊,大明星.这里之所以把%和@function和@mixin放在一起,当然并非无…

原生移动app框架inoic功能研究 本篇只侧重框架提供的功能和能力的研究,请关注后续实际部署使用体验. 一.inoic是什么? inoic是一个可以使用Web技术以hybird方式开发移动app的前端开源框架. 二.inoic框架特点 1. 利用web技术开发移动app. ionic提供了一套HTML.CSS.JS的类库.我们可以使用其提供的CSS组件和工具构建具有良好交互性的app. 2. 关注性能 ionic框架以更少的DOM操作,零JQuery和硬件加速过度,在现代最新的移动设备上性能表…

在html某元素上绑定一个click事件,该事件是一个执行事件很长的函数,比如执行几十亿或几百亿次加法,那么在这个函数执行的过程中,其他元素绑定的事件,是如何触发的呢,异步触发还是同步,触发时是怎么执行的呢,也是同步执行下来的么?明天好好研究一下. 目前找到一篇不错的博文,今晚看不完了,明天接着研究及该文章其参考的文章  文章2 通过以上文章,已经对js引擎的单线程以及浏览器内核的多线程机制了解了一番,那么对于jquery的延迟对象以及ES6的promise的异步又是怎样实现的呢.目前自己的结论…

阅读目录 1. 了解RGB和HSL颜色标准 2. RGB函数 3. HSL函数 4. Opacity函数 5. 其他颜色函数 6. 一个简单的应用 在Sass中,定义了很多现成的函数,可供我们使用.在最初使用Sass的时候,用的最多的颜色函数就是lighten($color, $amount)和darken($color, $amount),对于其他的函数,少之又少,真是弱爆了,有木有. 切图的时候,我的颜色全部是通过PS的吸管工具获取的,之后复制粘贴即可.如果我们熟悉了颜色标准,那以后我们对颜…

工作中用到了Bootstrap,涉及到了LESS,对其做了一个简单的了解,CSS的预处理器使用最广泛的就是LESS和Sass,都是努力把CSS武装成为开发语言,让它从简单的描述性语言过渡到具有程序式特性的语言,主要的特性就是:变量.Mixins.嵌套.继承等.就像教程里说的:CSS的预处理器就是让CSS从设计师的工具,变为开发人员的工具.但是看完之后觉得,作为对CSS研究尚不透彻的前端小生,我最好还是不要高攀,况且在我目前的项目中拿LESS来写CSS有点儿杀鸡用牛刀的感觉.但回过头来说,技不压身…

PostCSS介绍 原文链接:http://www.smashingmagazine.com/2015/12/introduction-to-postcss/ 转自:http://www.zcfy.cc/article/81 CSS的发展与所有语言的发展一样,都有一个迭代的过程.伴随着每一个主要版本的发布,我们都可以获得新的特性和语法帮忙我们更好的完成样式.CSS3 介绍了很多新的特性,可以让我们设计交互,之前我们都是通过javascript来实现交互.每一天都会有新工具出现,让我们可以更灵活地…

前言:搜了半天,各种推荐,什么十大工具啦.优秀工具集合啦之类的咸淡文章,就是没有一个讲怎么弄的.配合官网的article自己研究了半天总算配置好了.顺便吐槽下官网关于sass/less设置这块说的模糊不清的.写个教程给大家,相信会对新手们有帮助的. 声明:本文不涉及Grunt. 开发环境:windows7 编辑器:sublime text3 浏览器:firefox31 介绍 一般前端写页面,修改了html or css要想看效果通常就得 Alt+Tab,切换到浏览器,然后F5刷新,时间久了….…

less,sass,stylus配置和应用教程及三者比较  Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运行在客户端(支持IE10+,firefox,Webkit),也可以借助于Node.js在服务器端运行(支持IE6+,firefox,Webkit). 什么是CSS预处理技术?CSS预处理技术,是指用一种新语言用来为CSS 增加可编程的的特性,无需考虑浏览器的兼容性问题.你可以在 CSS 中使用变量.…

首先,需要支持sass,不管是有ruby环境的sass,还是node-sass,用npm装的sass模块,bootstrap-sass,gulp-sass..总归要有一个吧!(这里采用node-sass) 其次,还需要webpack的sass-loader,让loader起作用的方法: 要么给scss 文件做个独立entry,要么在现在entry(或它的依赖)里import 你的scss 文件,要么在主模块ts文件中require 需要的 scss文件.不然scss 的loader 都识别不了s…

常常有人会问,使用 Sass 进行开发,那么是不是直接通过“<link>”引用“.scss”或“.sass”文件呢? 那么这里告诉大家,在项目中还是引用“.css”文件,Sass 只不过是做为一个预处理工具,提前帮你做事情,只有你需要时候,他才有攻效. 这样一来,也就有了这章需要介绍的内容—— Sass 的编译.因为 Sass 开发之后,要让 Web 页面能调用 Sass 写好的东西,就得有这么一个过程,这个过程就称之为 Sass 编译过程.Sass 的编译有多种方法: 命令编译 GUI工具编…

什么是 CSS 预处理器? 定义:CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作. 在 CSS 中使用变量.简单的逻辑程序.函数等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁.适应性更强.可读性更佳,更易于代码的维护等诸多好处. CSS 预处理器语言,比如说:Sass(SCSS)LESSStylusTurbineSwithch CSSCSS Cachee…

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行.详情见,https://github.com/postcss/autoprefixer关于Autoprefixer当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异.这种方式,CSS是基于最新W3C规范产生: a { background : linear-gra…

Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一种即可,简单点说,Sass就是“CSS预处理器”,你可以称其是工具或者是语言.如果你实在想知道他是什么?可以看Sass官网上的一段描述. Sass is an extension of CSS that adds power and elegance to the basic language. It all…