9159.com   译文出处,Sass世界上最成熟、最稳定

作者: 前端  发布:2019-11-09

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私下认可将支撑主流浏览器近来2个版本,那一点类似Google。可是你能够在团结的种类中通过名称只怕方式开展分选:

  • 主流浏览器近期2个本子用“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的浏览器前缀。

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。领会越来越多关于如何在你的景况中应用的文档。

2、假使您的条件还不扶植Autoprefixer,请报告给自家。

3、关注@autoprefixer获取更新以致新特征音信。

赞 收藏 评论

9159.com 1

本能源由 伯乐在线 - 凝枫 整理

哪些处理CSS3属性前缀,管理CSS3属性前缀

明日闲来无聊,重新来讲说CSS3前缀的主题材料。在新禧佳节前和@一丝大嫂谈到Sass中有有关gradient的mixins。小姨子说:

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

堂姐的一句话让本身无地自厝,小编还在切磋着如何让Sass来写Gradient,只怕雷同这样须要带前缀的CSS3属性。也这么让自家在动脑,那么有了 Autoprefixer这样的后甩卖,Sass中有关于CSS3的mixins是否已错失了她存在的意思。带着这么的干什么?大家一齐来展开明天关于 于CSS3前缀的商讨。

Sass入门与实战

9159.com 2

CSS3的属性为啥要带前缀

选拔过CSS3属性的同室都知情,CSS3属性都须求带各浏览器的前缀,以致到现行反革命,依旧还大概有非常多本性必要带前缀。那是为啥呢?

自身的知道是,浏览器厂家以前就径直在实践CSS3,但它还没成为真正的正式。为此,当有个别CSS3样式语法还存在波动时,它们提供指向性浏览器的前缀。现在尤为重要流行的浏览器内核重要有:

  • Trident内核:主要代表为IE浏览器
  • Gecko内核:要害代表为Firefox
  • Presto内核:根本代表为Opera
  • Webkit内核:产要表示为Chrome和Safari

而那几个区别根基的浏览器,CSS3属性(部分必要加上前缀的天性卡塔 尔(英语:State of Qatar)对应须求增加不相同的前缀,也将其名称为浏览器的村办前缀,增添上私有前缀之后的CSS3属性可以说是对应浏览器的个体属性:

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

来看一个简便的示范,中期写一个圆角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

9159.com 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。

9159.com 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;
}

如下图所示:

9159.com 5

注:分化的配置,实行的作用不等同。详细能够点击这里查阅。

学过CSS的人都掌握,它不是黄金时代种编制程序语言。网页开采离不开它,但它有发展缓慢。束手就禽就有想出理解决方案:css预微处理机

安装

Shell

$ npm install -g myth

1
$ npm install -g myth

预微机中的混合宏

趁着CSS预微处理器越来越广泛,部分同学初叶运用预微机中的混合宏来管理CSS3前缀的事项。比方说Compass,里面就是运用Sass的mixin为CSS3须要带前缀的性能定制了一些mixin。还可能有相符于Stylus中的nib等。预微机中的混合宏确实能够解决广大主题素材,但也时有发生了新的题目,正是它所选用的语法是全新的,假诺要选用就亟须重新学习,其余那类工具的演进速度通常都会跟不上浏览器的开垦进取速度,那样也会以致其发生的CSS有不适合时机的主题素材,一时候为明白决生龙活虎部分标题,还索要自个儿去写mixins。举个例子:

9159.com 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卡塔 尔(英语:State of Qatar)。它是一向指向CSS本人来展开始拍录卖,无需任何附加的语法。因为它是在CSS代码爆发之后才进行继续管理。

Autoprefixer是以Rework这种架构所发展的CSS后Computer,他是将CSS代码分析后转成JavaScript的材料结构,举行管理后再产生新的CSS代码。

Autoprefixer会解析CSS代码,並且依照Can I Use所提供的资料来支配要增多哪些浏览器前缀,而你要做的事务正是把她参预本人的自动化开荒工具中(比如Grunt或许居尔p卡塔 尔(英语:State of Qatar),然后就足以直接行使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

命令终端提示:

9159.com 7

犹如未有中标(其实自个儿也不太懂Grunt,只是抱佛脚卡塔 尔(英语:State of Qatar)。于是本人改投@一丝二妹说的postcss。在指令终端重新输入:

npm install grunt-postcss --save-dev

那下仿佛有戏了:

9159.com 8

只是笔者还跟着官方网站所说的执行了此外叁个命令:

npm install grunt-postcss autoprefixer-core csswring

运作命令后方可看来下图的提醒新闻:

9159.com 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/中创设了贰个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.

查阅项目中自动创造了二个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

在巅峰中得以见到那般的提醒新闻:

9159.com 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属性前缀的主题材料已不复是二个标题。如前天您完全能够忽视自身要不要加前缀,要加什么样前缀,而只必要潜心去码你的代码。把那几个烦人的事务交给Autoprefixer去管理。当然,越到末端,或者我们都无需使用此外前缀。

后日闲来无聊,重新来讲说CSS3前缀的标题。在春节前和@一丝四姐谈到Sass中有至于gradient的mixins。...

css预微电脑已进步多年,处理Sass外,还会有less,Stylus...

特色

而外css预微电脑,css后Computer也很盛行如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;
}

函数库调控指令等等的高档功用

以致其余……

  • 4位和8位十七进制色彩扶助。规范鸣谢
  • 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这里非常的少讲。上边给出多个轻便易行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属性值 定义成变量,然后通过变量名来援引它们,而无需重新书写那意气风发属性值。也许,对于仅使用过一回的属性值,你能够赋予其二个伊始的变量名,令人一眼就精晓这几个属性值的用场。

//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. 导入

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

本文由9159.com发布于前端,转载请注明出处:9159.com   译文出处,Sass世界上最成熟、最稳定

关键词:

上一篇:没有了
下一篇:没有了