编纂纯CSS而不用担心浏览器加载缓慢,Sass快熟入门与简单实战

Autoprefixer:二个以最好的不二法门处理浏览器前缀的后处理程序

2014/08/26 · CSS ·
CSS

初稿出处:
css-tricks   译文出处:三桂   

Autoprefixer解析CSS文件同时拉长浏览器前缀到CSS规则里,使用Can
I Use的数目来支配哪些前缀是内需的。

全体你必要做的就是把它添加到你的能源营造工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西。尽管依照新型的W3C规范来不荒谬书写你的CSS而不要求浏览器前缀。像那样:

CSS

a{ transition :transform 1s }

1
2
3
a{
     transition :transform 1s
}

Autoprefixer使用三个数据库根据当下浏览器的普及度以及品质辅助提需要你前缀:

CSS

a{ -webkit-transition :-webkit-transform 1s; transition :-ms-transform
1s; transition :transform 1s }

1
2
3
4
5
a{
     -webkit-transition :-webkit-transform 1s;
     transition :-ms-transform 1s;
     transition :transform 1s
}

问题

 

当然大家可以手写浏览器前缀,可是那显得干瘪以及易错。

咱俩也足以采纳类似Prefixr如此的劳务以及编辑器插件,但那照旧乏于跟一堆重复的代码打交道。

我们得以行使象Compass之于Sass以及nib之于Stylus之类的预处理器提供的mixin库。它们能够缓解绝半数以上难题,但同时又引入了别样题材。

它们强制大家应用新的语法。它们迭代慢于当代浏览器,所以当稳定版发布时会爆发不少不须要的前缀,有时大家需要创制自身的mixins。

Compass实际上并从未为你屏蔽前缀,因为您依旧亟待控制许多题材,例如:小编索要为 border-radius 写二个mixin吗?小编急需用逗号分割 +transition 的参数吗?

Lea
Verou的-prefix-free大致化解了那一个标题,不过利用客户端库并不是个好注意,当您把最后用户品质考虑进来的话。为了幸免频仍做同样的事情,最好是在财富营造可能项目揭露时再创设五回CSS。

揭秘

Autoprefixer是三个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于寻常的CSS而不利用一定的语法。可以轻松跟Sass以及Stylus集成,由于它在CSS编译后运维。

Autoprefixer基于Rework,二个方可用来编排你自身的CSS后处理程序的框架。Rework解析CSS成有用Javascript结构经过你的处理后导回给CSS。

Autoprefixer的各种版本都包涵一份最新的 Can I Use 数据:

  • 当前浏览器列表以及它们的普及度。
  • 新CSS属性,值和甄选器前缀列表。

Autoprefixer暗中同意将支撑主流浏览器近日3个版本,那点类似Google。不过你可以在祥和的品类中经过名称或许格局进行精选:

  • 主流浏览器方今三个本子用“last 2 versions”;
  • 全球总结有跨越1%的使用率使用“>1%”;
  • 仅新本子用“ff>20”或”ff>=20″.

然后Autoprefixer计算哪些前缀是索要的,哪些是现已晚点的。

当Autoprefixer添加前缀到您的CSS,还不会遗忘修复语法出入。那种办法,CSS是根据最新W3C规范爆发:

CSS

a { background : linear-gradient(to top, black, white); display : flex }
::placeholder { color : #ccc }

1
2
3
4
5
6
7
a {
     background : linear-gradient(to top, black, white);
     display : flex
}
::placeholder {
     color : #ccc
}

编译成:

CSS

a { background : -webkit-linear-gradient(bottom, black, white);
background : linear-gradient(to top, black, white); display :
-webkit-box; display : -webkit-flex; display : -moz-box; display :
-ms-flexbox; display : flex } :-ms-input-placeholder { color : #ccc }
::-moz-placeholder { color : #ccc } ::-webkit-input-placeholder { color
: #ccc } ::placeholder { color : #ccc }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a {
    background : -webkit-linear-gradient(bottom, black, white);
    background : linear-gradient(to top, black, white);
    display : -webkit-box;
    display : -webkit-flex;
    display : -moz-box;
    display : -ms-flexbox;
    display : flex
}
:-ms-input-placeholder {
    color : #ccc
}
::-moz-placeholder {
    color : #ccc
}
::-webkit-input-placeholder {
    color : #ccc
}
::placeholder {
    color : #ccc
}

Autoprefixer 同样会清理超时的前缀(来自遗留的代码或接近 Bootstrap
CSS库),由此上边的代码:

CSS

a { -webkit-border-radius : 5px; border-radius : 5px }

1
2
3
4
a {
    -webkit-border-radius : 5px;
    border-radius : 5px
}

编译成:

CSS

a { border-radius : 5px }

1
2
3
a {
    border-radius : 5px
}

因为通过Autoprefixer处理,CSS将仅蕴涵实际的浏览器前缀。Fotorama从Compass切换到Autoprefixer之后,CSS大小减少了将近20%。

演示

假设您还没用过其余工具来自动化打造你的静态财富,一定要尝尝下Grunt,小编强烈推荐你开头采纳构建工具。那将翻开你整整语法糖世界,高效的mixin库以及实用的图纸处理工具。全部开发者的神速方法用来节省大批量精力以及时光(自由选用语言,代码服用,使用第贰方库的能力)现将都适用于前端开发人士。

让大家创立三个品种目录以及在style.css中写些简单的CSS:

style.css

{ }

在那些例子中,大家将利用Grunt。首先要求选拔npm安装 grunt-autoprefixer :

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

接下来大家必要创立 Gruntfile.js 文件以及启用Autoprefixer:

JavaScript

Gruntfile.js module.exports = function (grunt) { grunt .initConfig ({
autoprefixer : { dist : { files : { ‘build/style.css’ : ‘style.css’ } }
}, watch : { styles : { files : [‘style.css’ ], tasks :
[‘autoprefixer’ ] } } }); grunt.loadNpmTasks(‘grunt-autoprefixer’ );
grunt.loadNpmTasks(‘grunt-contrib-watch’ );};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Gruntfile.js
module.exports = function (grunt) {
     grunt .initConfig ({
          autoprefixer : {
               dist : {
                    files : { ‘build/style.css’ : ‘style.css’ } } },
                    watch : {
                         styles : {
                              files : [‘style.css’ ],
                              tasks : [‘autoprefixer’ ]
                         }
                    }
               });
grunt.loadNpmTasks(‘grunt-autoprefixer’ );
grunt.loadNpmTasks(‘grunt-contrib-watch’ );};

此安插文件可以让Autoprefixer编译 style.css 到 build/style.css. 同样大家将用 grunt-contrib-watch``来监听style.css文件变化再一次编译build/style.css。

启用Grunt的Watch功能:

./node_modules/.bin/grunt watch

明日我们添加三个CSS3表达式到style.css并保存:

style.css

JavaScript

a { width : calc(50% – 2em) }

1
2
3
a {
     width : calc(50% – 2em)
}

接下去是见证神迹的随时,以往自身有了build/style.css文件,Grunt监测到style.css文件发生变化并启用Autoprefixer职责。

Autoprefixer发现了calc() 值单元要求Safari
6的编纂纯CSS而不用担心浏览器加载缓慢,Sass快熟入门与简单实战。浏览器前缀。

build/style.css

CSS

a { width : -webkit-calc(50% – 2em); width : calc(50% – 2em) }

1
2
3
4
a {
     width : -webkit-calc(50% – 2em);
     width : calc(50% – 2em)
}

大家再添加多一点点扑朔迷离的CSS3到style.css并保留:

style.css

CSS

a { width : calc(50% – 2em); transition : transform 1s }

1
2
3
4
a {
     width : calc(50% – 2em);
     transition : transform 1s
}

Autoprefixer已知Chrome,Safari 6以及Opera
15需要为transitiontransform 添加前缀。但IE9也要求为transform添加前缀,作为transition的值。

build/style.css

CSS

a { width : -webkit-calc(1% + 1em); width : calc(1% + 1em);
-webkit-transition : -webkit-transform 1s; transition : -ms-transform
1s; transition : transform 1s }

1
2
3
4
5
6
7
a {
     width : -webkit-calc(1% + 1em);
     width : calc(1% + 1em);
     -webkit-transition : -webkit-transform 1s;
     transition : -ms-transform 1s;
     transition : transform 1s
}

Autoprefixer为达成你全部脏活而设计。它会依据Can I
Use数据库,写入全数须要的前缀并且相同清楚规范之间的界别,欢迎来到今后的CSS3
– 不再有浏览器前缀!

下一步?

1、Autoprefixer支持Ruby on
Rails,Middleman,Mincer,Grunt,Sublime
Text。精通越多关于怎么着在你的条件中应用的文档。

二,假诺您的条件还不接济Autoprefixer,请报告给作者。

3、关注@autoprefixer拿到立异以及新特色消息。

赞 收藏
评论

澳门葡京 1

本财富由 伯乐在线 –
凝枫 整理

什么处理CSS3属性前缀,处理CSS3属性前缀

明天闲来无聊,重新来说说CSS3前缀的题材。在祭灶节前和@一丝大姐说起Sass中有至于gradient的mixins。妹妹说:

为什么还要用mixin呢?为什么不使用Autoprefixer?使用Autoprefixer,只需要输入一行代码,编译器帮你做了一切,还纠结个毛mixin。

大嫂的一句话让作者无地自容,小编还在研究着怎么让Sass来写Gradient,只怕类似那样需求带前缀的CSS3属性。也这么让自家在思考,那么有了
Autoprefixer那样的后甩卖,Sass中有关于CSS3的mixins是否已失去了她存在的意思。带着这么的干什么?大家一并来开启前几天关于
于CSS3前缀的探赜索隐。

Sass入门与实战

澳门葡京 2

CSS3的质量为何要带前缀

动用过CSS3属性的同窗都掌握,CSS3属性都亟待带各浏览器的前缀,甚至到明日,依旧还有不少性质须求带前缀。那是为何吧?

自家的敞亮是,浏览器厂商在此之前就径直在实施CSS3,但它还未成为真正的业内。为此,当一些CSS3样式语法还存在波动时,它们提供针对性浏览器的前缀。以往重大流行的浏览器内核首要有:

  • Trident内核:关键代表为IE浏览器
  • Gecko内核:重在代表为Firefox
  • Presto内核:重视代表为Opera
  • Webkit内核:产要代表为Chrome和Safari

而那个不一样基础的浏览器,CSS3属性(部分要求加上前缀的习性)对应须要添加不一致的前缀,也将其誉为浏览器的民用前缀,添加上私有前缀之后的CSS3属性可以说是对应浏览器的私房属性:

  • Trident内核:前缀为-ms
  • Gecko内核:前缀为-moz
  • Presto内核:前缀为-o
  • Webkit内核:前缀为-webkit

来看3个简短的示范,早期写三个圆角border-radius,必要这么写:

.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

这么编写代码,无形之中给前端人士充实了众多工作量,于是从头有人在谈论这几个题材“怎样在编辑CSS时不须求加上浏览器的个体前缀,又能让浏览器识别?”

**Sass is the most mature, stable, and powerful professional grade CSS
extension language in the
world.**打开Sass官网就可以望见那样一句话。那话一点儿都不谦虚:Sass世界上最成熟、最平静、最强大的专业级CSS扩大语言!他那样自信想必是有种种自信的说辞,上面大家就共同来询问摸底Sass,看看它在吹牛还在真的如此了得。

CSS 如你所愿。

-prefix-free

澳门葡京 3

为了缓解手工书写前缀的题材,最早的3个化解方案是由Lea
Verou提供的三个-prefix-free脚本。你只须要在您的.html文件中插入二个prefixfree.js文本(可以是文档任哪个地点方),提议把那几个剧本文件放在样式表之后。

添加这几个本子之后,使用CSS3的性质时,只需书写标准样式即可。可是那种做法将富有压力交给了客户端来拍卖。如此一来页面解析压力就大了,品质会打一定的折扣,并且只要脚本加载战败,那么就会并发浏览器不只怕平常渲染CSS3的体裁风格。

prefixfree脚本仅在IE9+、Opera10+、Firefox3.5+、Safari4+得到接济。

css预处理器

Myth是一款预处理器,就像CSS的填充剂,帮你编写纯净CSS的同时,无需担心老旧浏览器包容可能其余专业支持难点。

编辑器插件

而外prefixfree脚本之外,很多同学看重于文本编辑器的插件来处理。那里来探望Sublime
Text编辑器里是什么样贯彻Autoprefixer功用的。

要在编辑器中安装Autoprefixer插件,首先需求你的环境中曾经安装好了Node.js。你可以在指令终端履行:

node -v

来检测是还是不是已安装,即使没有设置,请先安装。在那边假如你已具备Node.js环境。

当今敞开你的Sublime
Text编辑器,你能够同时按下command + Shift + p几个键,选拔”Install
Package”。然后搜索Autoprefixer。

澳门葡京 4

今昔你在您的Sublime Text中拔取Autoprefixer作用。如果你在样式文件中输入:

.box {
  transform: rotate(45deg);
  border-radius: 5px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.25);
  transition: all .2s ease .1s;
}

以此时候你只要求同时按下Command + Shift + P多个键,采取“Autoprefix
CSS”,并且回车,就能得到上面那样的代码:

.box {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  border-radius: 5px;
  box-shadow: 1px 1px 0 rgba(0,0,0,.25);
  transition: all .2s ease .1s;
}

如下图所示:

澳门葡京 5

注:不一致的陈设,执行的功力不均等。详细可以点击那里查阅。

学过CSS的人都清楚,它不是一种编程语言。网页开发离不开它,但它有发展缓慢。放任自流就有想出了化解方案:css预处理器

安装

Shell

$ npm install -g myth

1
$ npm install -g myth

预处理器中的混合宏

乘势CSS预处理器越来越普及,部分同学开端利用预处理器中的混合宏来处理CSS3前缀的事项。比如说Compass,里面纵使选用Sass的mixin为CSS3亟待带前缀的属性定制了一部分mixin。还有类似于Stylus中的nib等。预处理器中的混合宏确实可以化解广大标题,但也发出了新的难题,就是它所采用的语法是全新的,尽管要动用就不可以不重新学习,别的那类工具的形成速度一般都会跟不上浏览器的上扬进程,那样也会促成其爆发的CSS有不合时宜的标题,有时候为了化解一部分题目,还亟需本身去写mixins。比如:

澳门葡京 6

正如前方所说的,如若要跟上浏览器的演进,就须求不停的更新您的CSS3
mixins,不然就会招致你的代码不是时尚的。其中Compass就存在那样的标题:

@import "compass";

.box {
  @include border-radius(5px);
}

编译出来的CSS:

.box {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

而实际却不得偿所愿,因为到写那篇小说甘休,我们写圆角属性只要求:

.box {
  border-radius: 5px;
}

各主流浏览器就能符合规律的剖析。造成那一个缘故的时,Compass中的CSS3的mixin没有跟上步履去创新定义好的mixins。

CSS 预处理器是哪些?一般的话,它们基于 CSS 增添了一套属于本人的
DSL,来缓解大家书写 CSS 时难以消除的题材:

用法

Shell

$ myth input.css output.css # Generated output.css from input.css

1
2
$ myth input.css output.css
# Generated output.css from input.css

使用Autoprefixer

使用Sass、LESS、Stylus或许其余类似的工具都以属于CSS的前处理器(Preprocessor),而Autoprefixer则是
一种后电脑(Postprocessor)。它是一贯指向CSS自个儿来开展拍卖,不必要其余附加的语法。因为它是在CSS代码爆发之后才举行后续处理。

Autoprefixer是以Rework那种架构所发展的CSS后电脑,他是将CSS代码解析后转成JavaScript的资料结构,举办处理后再暴发新的CSS代码。

Autoprefixer会分析CSS代码,并且依据Can I
Use所提供的质地来决定要抬高哪些浏览器前缀,而你要做的事体就是把她参与自身的自动化开发工具中(比如Grunt只怕Gulp),然后就足以向来利用W3C的正经来写CSS,不需要丰裕其余浏览器的个人前缀。

接下去看看哪些运用自动化工具完结Autoprefixer作用。

语法不够强大,比如不能嵌套书写导致模块化开发中要求书写很多重新的拔取器;

共享财富

  • mnmly/builder-myth:
    component-builder 插件
  • gulp-myth: Gulp 插件
  • grunt-myth: Grunt 插件
  • duo-myth: Duo 插件
  • myth-loader: Webpack 加载器
  • meteor-myth: Meteor 插件
  • myth-transformer: Dart
    转换器

Grunt中配置Autoprefixer

一旦你的条件中已享有了Grunt的周转条件,如若没有请先活动Grunt官网精晓,这里不做过多讲演。

在Github中有二个grunt-autoprefixer的插件,依照其官方指示,作者在命令行中执行了下边的说话:

npm install grunt-autoprefixer --save-dev

一声令下终端提醒:

澳门葡京 7

犹如并未中标(其实本身也不太懂Grunt,只是临阵磨枪)。于是小编改投@一丝大姨子说的postcss。在命令终端重新输入:

npm install grunt-postcss --save-dev

那下就像有戏了:

澳门葡京 8

不过作者还跟着官网所说的推行了其余贰个指令:

npm install grunt-postcss autoprefixer-core csswring

运维命令后得以看来下图的提醒音讯:

澳门葡京 9

接下去需求在你项目的根目录中配备Gruntfile.js文件:

'use strict';
module.exports = function(grunt) {

  // Dynamically loads all required grunt tasks
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

  var autoprefixer = require('autoprefixer-core');

  // Configures the tasks that can be run
  grunt.initConfig({
    postcss: {
        options: {
            processors: [
              autoprefixer({ browsers: ['last 2 version'] }).postcss
            ]
        },
        // dist: {
        //  src: 'src/css/*.css',
        //  dest:'dest/css/*.css'
        // }
        multiple_files: {
          expand: true,
          flatten: true,
          src: 'src/css/*.css', // -> src/css/file1.css, src/css/file2.css
          dest: 'dest/css/' // -> dest/css/file1.css, dest/css/file2.css
        },
    },
  });

  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);

};

为了印证那样做是还是不是正确,小编在类型中的src/css/中开创了3个main.css文本,然后输入代码:

a {
  transition: all .2s ease .1s;
  transform: rotate(45deg) translateY(200px);
}

在指令终端履行:

grunt

终端将运转:

Running "postcss:multiple_files" (postcss) task
File dest/css/main.css created.

Done, without errors.

查看项目中机动成立了1个dest/css/main.css文本,而里边的代码:

a {
  transition: all .2s ease .1s;
  -webkit-transform: rotate(45deg) translateY(200px);
          transform: rotate(45deg) translateY(200px);
}

幸亏本身必要的体裁代码。那样尝试五遍,觉得比拔取Sass中的mixin爽多了。

从没变量和合理的体制复用机制,使得逻辑上相关的属性值必须以字面量的格局重新输出,导致难以维护。

何以要用Myth?

Myth能让你在书写纯净CSS的还要,还是能分享LESS/Sass级别的看待。你照样像使用预处理器一样使用变量和数学函数,它填补了CSS将来正式的空缺。

CSS的少数职能使用时须求开展演算,那是Myth或然预处理器不能控制的,但Myth能帮你写出将来版本的CSS语法,也等于说,对之后的编译器版本可用。当浏览器终于更新到支持那多少个CSS功用时,你不需求再去重写代码,把文件直接级联就行!

输入不经处理的CSS意味着你可以用Myth来重处理其余随意的CSS(或其余预处理输出器),只需添加你所需支撑的浏览器,无需任何重写即可生成语法完全差其余代码。

Myth使用Rework搭建,速度极快,扶助命令行与JS
API。

Gulp中配置Autoprefixer

除却Grunt可以配置Autoprefixer之外,还可以够使用Gulp来安顿。那里也即使你的档次中已具有了Gulp的运作环境,假如没有,可以查看Gulp官网相关质感。

基于gulp-autoprefixer官网指示,我在命令终端输入了:

npm install gulp-autoprefixer --save-dev

在极限中得以看出这么的指示音信:

澳门葡京 10

在Grunt中须求在Gruntfile.js展开配备,而在Gulp中也有点类似,须要在gulpfile.js中开展布局:

// include gulp
var gulp = require('gulp'); 

// include plug-ins
var autoprefix = require('gulp-autoprefixer');

// JS hint task
gulp.task('styles', function() {
  gulp.src(['./src/styles/*.css'])
    .pipe(autoprefix('last 2 versions'))
    .pipe(gulp.dest('./build/styles'));
});

看起来要比Gruntfile.js配备简单一些。为了表达操作是不是科学,小编在档次中创设了src/styles/style.css,并且在style.css文本中输入了:

a {
  transform: translateY(20px) rotate(45deg);
}

接下去在指令终端履行:

gulp styles

看看如下指示音讯:

[12:53:26] Using gulpfile ~/Sites/test/gulp-autoprefixer/gulpfile.js
[12:53:26] Starting 'styles'...
[12:53:26] Finished 'styles' after 7.26 ms

那时候,在档次中会自动成立三个build/styles/style.css文本,打开那些文件查看代码:

a {
  -webkit-transform: translateY(20px) rotate(45deg);
      -ms-transform: translateY(20px) rotate(45deg);
          transform: translateY(20px) rotate(45deg);
}

正是大家必要的。

实在在PostCSS也提供了有关于怎么着在Gulp中配置Autoprefixer的印证。感兴趣的同学能够看看。

有了Autoprefixer那样的工具对于拍卖CSS3属性前缀来说就不再是讨厌的事体了。当然,假使您正在使用CSS预处理器编写代码,那么也得以很完美的结缘Autoprefixer去处理。

为此那就决定了 CSS 预处理器的严重性目的:提供 CSS
缺失的样式层复用机制、收缩冗余代码,进步样式代码的可维护性。那不是如鱼得水,而刚刚是雪里送炭。

案例

多说无凭,有例为证。若是您依据标准写下了以下CSS:

CSS

:root { –green: #a6c776; } @custom-media –narrow-window screen and
(max-width: 30em); @media (–narrow-window) { html { font-size: 1.2rem;
} } a { color: var(–green); font-variant: all-small-caps; transition:
color 1s; } a:hover { color: color(var(–green) shade(20%)); }
::placeholder { opacity: .4; transition: opacity 1s; }
:focus::placeholder { opacity: .2; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
:root {
  –green: #a6c776;
}
 
@custom-media –narrow-window screen and (max-width: 30em);
 
@media (–narrow-window) {
  html {
    font-size: 1.2rem;
  }
}
 
a {
  color: var(–green);
  font-variant: all-small-caps;
  transition: color 1s;
}
 
a:hover {
  color: color(var(–green) shade(20%));
}
 
::placeholder {
  opacity: .4;
  transition: opacity 1s;
}
 
:focus::placeholder {
  opacity: .2;
}

… Myth能帮您转换到浏览器帮忙的CSS:

CSS

@media screen and (max-width: 30em) { html { font-size: 1.2rem; } } a {
color: #a6c776; -webkit-font-feature-settings: “smcp”, “c2sc”;
-moz-font-feature-settings: “smcp”, “c2sc”; font-feature-settings:
“smcp”, “c2sc”; font-variant: all-small-caps; -webkit-transition: color
1s; transition: color 1s; } a:hover { color: rgb(133, 159, 94); }
::-webkit-input-placeholder { opacity: .4; -webkit-transition: opacity
1s; transition: opacity 1s; } ::-moz-placeholder { opacity: .4;
transition: opacity 1s; } :-ms-input-placeholder { opacity: .4;
transition: opacity 1s; } ::placeholder { opacity: .4;
-webkit-transition: opacity 1s; transition: opacity 1s; }
:focus::-webkit-input-placeholder { opacity: .2; }
:focus::-moz-placeholder { opacity: .2; } :focus:-ms-input-placeholder {
opacity: .2; } :focus::placeholder { opacity: .2; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
@media screen and (max-width: 30em) {
  html {
    font-size: 1.2rem;
  }
}
 
a {
  color: #a6c776;
  -webkit-font-feature-settings: "smcp", "c2sc";
  -moz-font-feature-settings: "smcp", "c2sc";
  font-feature-settings: "smcp", "c2sc";
  font-variant: all-small-caps;
  -webkit-transition: color 1s;
  transition: color 1s;
}
 
a:hover {
  color: rgb(133, 159, 94);
}
 
::-webkit-input-placeholder {
  opacity: .4;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
 
::-moz-placeholder {
  opacity: .4;
  transition: opacity 1s;
}
 
:-ms-input-placeholder {
  opacity: .4;
  transition: opacity 1s;
}
 
::placeholder {
  opacity: .4;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
 
:focus::-webkit-input-placeholder {
  opacity: .2;
}
 
:focus::-moz-placeholder {
  opacity: .2;
}
 
:focus:-ms-input-placeholder {
  opacity: .2;
}
 
:focus::placeholder {
  opacity: .2;
}

总结

经过几年的技巧形成,CSS3属性前缀的题材已不复是3个标题。如前几天您一点一滴可以忽略自个儿要不要加前缀,要加什么前缀,而只必要专心去码你的代码。把那么些烦人的事务交给Autoprefixer去处理。当然,越到末端,大概我们都不必要使用其余前缀。

今天闲来无聊,重新来说说CSS3前缀的难题。在中秋节前和@一丝四妹说起Sass中有有关gradient的mixins。…

css预处理器已发展多年,处理Sass外,还有less,Stylus…

特色

除此之外css预处理器,css后电脑也很流行如postcss

变量

语法与CSS规范一样。似乎以后的CSS,但无需级联,谢谢rework-vars支持。

CSS

:root { –purple: #847AD1; } a { color: var(–purple); }

1
2
3
4
5
6
7
:root {
  –purple: #847AD1;
}
 
a {
  color: var(–purple);
}

起来利用Sass

数学

语法与CSS规范无异于。就如将来的CSS,但不难了插值运算时间,感激rework-calc支持。

CSS

pre { margin: calc(50px * 2); }

1
2
3
pre {
  margin: calc(50px * 2);
}

统统协作 CSS3

自定义媒体询问

语法与CSS规范相同,感谢rework-custom-media支持。

CSS

@custom-media –narrow-window (max-width: 30em); @media
(–narrow-window) { /* narrow window styles */ } @media
(–narrow-window) and (script) { /* special styles for when script is
allowed */ }

1
2
3
4
5
6
7
8
9
@custom-media –narrow-window (max-width: 30em);
 
@media (–narrow-window) {
  /* narrow window styles */
}
 
@media (–narrow-window) and (script) {
  /* special styles for when script is allowed */
}

在 CSS 语言基础上添加了伸张功用,比如变量、嵌套 (nesting)、混合 (mixin)

情调控制

语法与CSS规范相同,感谢rework-color-function支持。

CSS

a { color: #847AD1; } a:hover { color: color(#847AD1 tint(20%)); }

1
2
3
4
5
6
7
a {
  color: #847AD1;
}
 
a:hover {
  color: color(#847AD1 tint(20%));
}

对颜色和其他值进行操作的{Sass::Script::Functions 函数}

不必前缀

最常用以及最新版浏览器的前缀都足以接济,所以你再也不用担心现有的浏览器该协理什么的界面尺寸了。谢谢autoprefixer支持!

CSS

.button { background: linear-gradient(to bottom, black, white);
transition: transform .25s; }

1
2
3
4
.button {
  background: linear-gradient(to bottom, black, white);
  transition: transform .25s;
}

函数库控制指令等等的高等功用

以及其余……

  • 3个人和八人十六进制色彩辅助。规范
    鸣谢
  • Font-variant属性简写。规范
    鸣谢

优异的格式,可对出口格式进行定制

API

支持
Firebug

命令行

Shell

Usage: myth [<input>] [<output>] Options: -h, –help
output usage information -V, –version output the version number -c,
–compress compress output -w, –watch watch the input file for changes
-s, –sourcemap add source map -v, –verbose log verbose output for
debugging –no-import disable import support –no-variables disable
variables support –no-custom-media disable custom media support
–no-hex-alpha disable hex alpha support –no-color disable color
support –no-calc disable calc support –no-font-variant disable font
variant support –no-rebeccapurple disable rebeccapurple support
–no-prefixes disable prefixes support Examples: # pass an input and
output file: $ myth input.css output.css # watch the input file for
changes: $ myth –watch input.css output.css # unix-style piping to
stdin and stdout: $ cat input.css | myth | grep background-color

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Usage: myth [<input>] [<output>]
 
Options:
 
  -h, –help          output usage information
  -V, –version       output the version number
  -c, –compress      compress output
  -w, –watch         watch the input file for changes
  -s, –sourcemap     add source map
  -v, –verbose       log verbose output for debugging
 
  –no-import         disable import support
  –no-variables      disable variables support
  –no-custom-media   disable custom media support
  –no-hex-alpha      disable hex alpha support
  –no-color          disable color support
  –no-calc           disable calc support
  –no-font-variant   disable font variant support
  –no-rebeccapurple  disable rebeccapurple support
  –no-prefixes       disable prefixes support
 
Examples:
 
  # pass an input and output file:
  $ myth input.css output.css
 
  # watch the input file for changes:
  $ myth –watch input.css output.css
 
  # unix-style piping to stdin and stdout:
  $ cat input.css | myth | grep background-color

Sass的二种语法

Node.js

JavaScript

var myth = require(‘myth’); var fs = require(‘fs’); var css =
fs.readFileSync(‘index.css’, ‘utf8’); var converted = myth(css);
fs.writeFileSync(‘converted.css’, converted);

1
2
3
4
5
6
7
var myth = require(‘myth’);
var fs = require(‘fs’);
 
var css = fs.readFileSync(‘index.css’, ‘utf8’);
var converted = myth(css);
 
fs.writeFileSync(‘converted.css’, converted);

您也可以一贯运用Rework插件:

JavaScript

var myth = require(‘myth’); var rework = require(‘rework’); var fs =
require(‘fs’); var css = fs.readFileSync(‘index.css’, ‘utf8’); var
converted = rework(css) .use(myth()) .toString();
fs.writeFileSync(‘converted.css’, converted);

1
2
3
4
5
6
7
8
9
10
var myth = require(‘myth’);
var rework = require(‘rework’);
var fs = require(‘fs’);
 
var css = fs.readFileSync(‘index.css’, ‘utf8’);
var converted = rework(css)
  .use(myth())
  .toString();
 
fs.writeFileSync(‘converted.css’, converted);

可选项:

关键词 类型 描述
browsers Array 支持的浏览器版本数组列表。
compress Boolean CSS输出时是否压缩
features Object 无效功能字典。所有功能默认开启,可用功能有:calc, color, customMedia, fontVariant, hexAlpha, import, prefixes, rebeccapurple, variables.
preserve Boolean 输出时是否保留变量
source String CSS源文件的完整路径,如果你想要Myth把CSS中所有@import规则串联起来,请务必使用它。
sourcemap Boolean 是否嵌入源地图
variables Object 使用CSS变量字典

Sass 有二种语法。

License

The MIT License (MIT)

官方网站:
开源地址:

首先种被号称 SCSS (Sassy CSS),是二个 CSS3
语法的扩展版本,也等于说,全数符合 CSS3
语法的样式表也都是兼具同样语法意义的 SCSS 文件。

第两种相比较老的语法成为缩排语法(或者就称为 “Sass”), 提供了一种更简单的
CSS 书写格局。
它不利用花括号,而是经过缩排的措施来表述采用符的嵌套层级,I而且也不行使分号,而是用换行符来分隔属性。

貌似采纳Scss多余Sass,然则两岸除了上述不一致外,基本在活龙活现,或者你和本身一样,有时候写写Python后会突然想用Sass,有时有青眼于Scss,这个都无所谓

SASS提供多少个编译风格的选项

nested:嵌套缩进的css代码,它是暗中认同值。

expanded:没有缩进的、扩大的css代码。

compact:简洁格式的css代码。

compressed:压缩后的css代码。

终极推荐我们使用gulp来编译Sass。关于gulp那里不多讲。下边给出1个简易gulp配置文件来编译sass

constgulp=require(‘gulp’)constsass=require(‘gulp-sass’)gulp.task(‘sass’,function()
{returngulp.src(‘./sass/**/*.scss’)       
.pipe(sass().on(‘error’,sass.logError))       
.pipe(gulp.dest(‘./css’))})gulp.task(‘sass:watch’,function()
{gulp.watch(‘./sass/**/*.scss’, [‘sass’])})

实际参见GitHub

下面大家将飞速学习sass的语法

sass语法火速入门

着力语法

1.变量

Sass让大千世界受益的七个最主要特征就是它为css引入了变量。你能够把反复使用的css属性值
定义成变量,然后经过变量名来引用它们,而无需再度书写这一属性值。只怕,对于仅使用过一回的属性值,你可以赋予其2个浅显的变量名,令人一眼就精晓那几个属性值的用途。

//scss
style//———————————–$fontStack:Helvetica,sans-serif;$primaryColor:#333;body{font-family:$fontStack;color:$primaryColor;}//css
style//———————————–body{font-family:Helvetica,sans-serif;color:#333;}

2.嵌套

sass可以开展采纳器的嵌套,表示层级关系,看起来很优雅整齐。

//scss
style//———————————–nav{ul{margin:0;padding:0;list-style:none; 
}li{display:inline-block;
}a{display:block;padding:6px12px;text-decoration:none;  }}//css
style//———————————–navul{margin:0;padding:0;list-style:none;}navli{display:inline-block;}nava{display:block;padding:6px12px;text-decoration:none;}

3.
乘除成效

SASS允许在代码中利用算式:

body{margin: (14px/2);top:50px+ 100px;right:80*10%;}

4.颜色

sass中合二为一了汪洋的水彩函数,让变换颜色越发简约。

//scss
style//———————————–$linkColor:#08c;a{text-decoration:none;color:$linkColor;&:hover{//
&是父选取器的标识符color:darken($linkColor,十分之一);    }}//css
style//———————————–a{text-decoration:none;color:#0088cc;}a:hover{color:#006699;}

&是父选用器的标识符

5.
注释

Sass共有二种注释风格。

标准的CSS注释 /* comment */ ,会保留到编译后的文件。

单行注释 // comment,只保留在SASS源文件中,编译后被略去。

在/*背后加1个感慨号,表示那是”主要注释”。固然是缩减情势编译,也会保留那行注释,平时可以用于表明版权音讯。

/*!我是个傲娇的笺注,不会被总结*/

代码的录用

1.
导入

澳门葡京,sass中如导入其他sass文件,最终编译为二个css文件,优于纯css的@import

文本的名目约定以下划线发轫

以下划线卡头的文件名称不会被编译

//scss style//———————————–//
_reset.scsshtml,body,ul,ol{margin:0;padding:0;}//scss
style//———————————–//
base.scss@import’reset’;body{font-size:100%Helvetica,sans-serif;background-color:#efefef;}//css
style//———————————–html,body,ul,ol{margin:0;padding:0;}body{background-color:#efefef;font-size:100%Helvetica,sans-serif;}

2.
扩展/继承

sass可透过@extend来兑现代码组合讲明,使代码越发优化简洁。

//scss
style//———————————–.message{border:1pxsolid#ccc;padding:10px;color:#333;}.success{@extend.message;border-color:green;}.error{@extend.message;border-color:red;}.warning{@extend.message;border-color:yellow;}//css
style//———————————–.message,.success,.error,.warning{border:1pxsolid#cccccc;padding:10px;color:#333;}.success{border-color:green;}.error{border-color:red;}.warning{border-color:yellow;}

3.
mixin

sass中可用mixin定义一些代码片段,且可传参数,方便日后按照须求调用。比如说处理css3浏览器前缀*(更好的化解方案:autoprefixer)*

//scss
style//———————————–@mixinbox-sizing($sizing)
{-webkit-box-sizing:$sizing;-moz-box-sizing:$sizing;box-sizing:$sizing;}.box-border{border:1pxsolid#ccc;@includebox-sizing(border-box);}//css
style//———————————–.box-border{border:1pxsolid#ccc;-webkit-box-sizing:
border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

mixin的精锐之处,在于可以指定参数和缺省值。

高级用法

尖端用法可以翻译为“用的少”,但威力很大“

1.口径语句

@if可三个准绳单独行使,也得以和@else结合多规格使用

//scss style//——————————-$lte7:true;$type:
monster;.ib{display:inline-block;@if$lte7{*display:inline;*zoom:1;   
}}p{@if$type== ocean {color:blue;  }@else if$type== matador {color:red; 
}@else if$type== monster {color:green;  }@else{color:black;  }}//css
style//——————————-.ib{display:inline-block;*display:inline;*zoom:1;}p{color:green;
}

2.循环语句

SASS支持for循环:

for循环有三种样式,分别为:@for $var from through 和@for $var from to
。$i代表变量,start表示先河值,end表示截止值,那多个的不同是生死攸关字through表示包蕴end那一个数,而to则不包蕴end那个数。

@for$ifrom1to10{.border-#{$i}{border:#{$i}pxsolidblue;  }}

也支持while循环:

$i:6;@while$i>0{.item-#{$i}{width:2em*$i; }$i:$i- 2;}

each命令,作用与for类似:

语法为:@each $var in
。其中$var表示变量,而list和map表示list类型数据和map类型数据。sass
3.3.0新加盟了多字段循环和map数据循环。

//scss style//——————————-$animal-list: puma,
sea-slug, egret, salamander;@each$animalin$animal-list{ 
.#{$animal}-icon{background-image:url(‘#{$animal}.png’); 
}}//css
style//——————————-.puma-icon{background-image:url(‘puma.png’);
}.sea-slug-icon{background-image:url(‘sea-slug.png’);
}.egret-icon{background-image:url(‘gret.png’);
}.salamander-icon{background-image:url(‘salamander.png’); }

询问了上边这一个故事情节,基本上就是入门了,再去探访那一个链接:

Sass官网

Sass中文网

w3cplus

gulp中文网

实战

传送门:GitHub

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website