如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器。不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。

有几个PostCSS插件配合预处理器得到很好的赞誉,因为他们将功能添加到你的工作流中,让你工作变得更加轻松。如果你只使用一个预处理器,而不使用这些插件,你的工作流至少会变得更加困难。

我们会涉及一些免费的PostCSS插件,然后我们将会介绍一些配置的阐述,告诉您如何将PostCSS和你喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。

为什么要使用两个?

在我们开始介绍如何要把预处理器和PostCSS一起使用,我们将谈一谈为什么你会这么想。简短的答案是:PostCSS插件有很多优秀的预处理器功能。下面的内容会向你们展示为什么这些PostCSS插件是值得拥有的,而且这些插件和预处理器结合在一起工作会变得更好。

注意:在常规的预处理器通过使用混合宏或函数特性像程序一样处理代码,但下面的例子是自动处理的,也能达到类似的结果。不过不同的是,你关心的是编写你自己的CSS代码,而其他一切通过插件去处理,而这个过程中不需要调用函数,也没有混合宏等等。

Autoprefixer

预处理器中有很多混合宏处理浏览器前缀。比如说,Compass库中使用@include box-sizing(border-box);来解决box-sizing属性在各浏览器的私有前缀。

依靠混合宏处理浏览器私有前缀,会存在下面这些问题:

  • 要知道属性需要的前缀,然后才能决定如何部署混合宏
  • 必须知道混合宏的名称和如何调用混合宏
  • 必须时刻关注浏览器对每个属性的私有前缀变化(比如,box-sizing现在就不再需要前缀)

Autoprefixer消除了对这些方面的担忧,它可以根据CanIUse.com数据对属性自动添加浏览器的私有前缀。

有关于Autoprefixer更详细的信息可以点击这里

rtlcss

预处理器可以根据来源在样式中生成LTR(leftright,这也是默认的)和RTL(right 向left),但它通常需要使用一些混合宏或变量插值。例如,你要写margin-left:1rem,你可能需要编写margin-#{$dir}:1rem;@include margin-left(1rem);

然而,@Mohammad Younes开发的rtlcss插件,你不需要再使用混合宏或变量插值。你平时只要按正常的编写方式编写CSS,插件会自动根据所有实例,完成rightleft的互换。你不需要编写任何特殊代码,就可以让margin-left:1rem;会自动生成margin-right:1rem;

有关于rtlcss插件更详细的介绍,可以点击这里

postcss-colorblind

由@Brian Holt提供的postcss-colorblind插件可以自动生成不同版本的样式表,让你不懂色彩的人也能亲身体验自己的设计。这款插件模拟了八种不同类型的颜色配色方案,可以快速访问你的配色方案。

这是PostCSS插件的一个有用功能,而这个功能在预处理器中要实现是非常困难的。

有关于postcss-colorblind相关的信息可以点击这里

postcss-svgo

@Ben Briggs的postcss-svgo插件可以给内联SVG的代码做优化,例如:

  1. background: url('data:image/svg+xml;utf-8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"><circle cx="50" cy="50" r="40" fill="yellow" /></svg>');

优化后的代码不到原来的一半:

  1. background: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="#ff0"/></svg>');

有关于postcss-svgo插件更多的信息可点击这里

cssnano

虽然预处理器中可以带空格和注释,但@Ben Briggs的cssnano插件可以执行的各种优化远远超过这两个步骤。本系列教程中的《PostCSS深入学习: 压缩和优化CSS》详细讨论了如何使用cssnano对你的样式表进行优化和压缩。

有关于cssnano更详细的信息可以点击这里

postcss-font-magician

@Jonathan Neal的postcss-font-magician插件可以让你非常容易的使用自定义字体。你不需要使用任何混合宏之类,只需要像平时那样使用font-family规则就行:

  1. body {
  2. font-family: "Alice";
  3. }

插件会生成一份完整的@font-face规则:

  1. @font-face {
  2. font-family: "Alice";
  3. font-style: normal;
  4. font-weight: 400;
  5. src: local("Alice"), local("Alice-Regular"),
  6. url("http://fonts.gstatic.com/s/alice/v7/sZyKh5NKrCk1xkCk_F1S8A.eot?#") format("eot"),
  7. url("http://fonts.gstatic.com/s/alice/v7/l5RFQT5MQiajQkFxjDLySg.woff2") format("woff2"),
  8. url("http://fonts.gstatic.com/s/alice/v7/_H4kMcdhHr0B8RDaQcqpTA.woff") format("woff"),
  9. url("http://fonts.gstatic.com/s/alice/v7/acf9XsUhgp1k2j79ATk2cw.ttf") format("truetype")
  10. }
  11. body {
  12. font-family: "Alice";
  13. }

在关于postcss-font-magician更多信息可以点击这里

项目配置

下面有六个配置指南:每个主流预处理器(Sass、LESS或Stylus)分别结合Gulp或Grunt在项目中的配置指南。当然,你没必要都看,你完全可以选择你自己喜欢的预处理器和构建工具。如果你不能确定在项目中使用Gulp还是Grunt。那么本教程将会告诉你,Gulp是一个很好的选择,因为其简单。

无论你使用什么样的项目配置指南,你都需要一个空的Gulp或Grunt的项目。你可以阅读本系列教程中有关于Gulp或Grunt配置项目的相关教程:

如果你不想从头开始手动设置您的项目,你可以下载本教程中提供的源码附件,提取Gulp或Grunt项目到一个空的文件夹中。

然后在命令终端运行:npm install

项目中安装PostCSS插件

当你为下面的小节设置了一个空的项目,你还需要安装两个PostCSS插件:Autoprefixer和cssnano。你可以通过下面的命令来安装:

  1. npm install autoprefixer cssnano --save-dev

我们将用这两个插件来测试你的预处理器和PostCSS一起工作。

预处器在PostCSS之前运行

使用预处理器和PostCSS一起处理你的样式表,首要的原则是:预处理器要运行在PostCSS之前。这主要是因为你不想让任何预处理器的指定语法让PostCSS插件瘫痪不能工作,当然也不希望PostCSS修改你的代码,防止预处理器不能按预期运行。

PostCSS插件和PostCSS测试代码

在开始介绍每个预处理器和PostCSS一起工作的配置之前,我们都会让预处理器编译完成之后再运行PostCSS插件Autoprefixer和cssnano。在每个配置介绍中,我们都需要为这两个插件添加一些测试代码。

为了在每个小节中节省重复相同的代码,当你看到说让你添加PostCSS测试代码这样的指令时,请在预处理器源文件中添加下面的代码:

  1. .css_nano, .css_nano + p, [class*="css_nano"], .css_nano {
  2. /* cssnano will remove this comment */
  3. display: flex;
  4. font-weight: normal;
  5. margin-top: 1rem;
  6. margin-bottom: 2rem;
  7. margin-left: 1.5rem;
  8. margin-right: 2.5rem;
  9. font-weight: normal;
  10. padding: 1.75rem;
  11. width: calc(50rem - (2 * 1.75rem));
  12. }

如果成功了,每个示例编译出来的代码如下:

  1. .css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

注意:使用Autoprefixer给flexbox添加私有前缀和使用cssnano来优化和压缩你的样式表。我们使用相同的代码来测试cssnano,正如前面的教程《PostCSS深入学习: 压缩和优化CSS》所介绍的一样,所以你可以参考前面的教程了解其中执行优化和压缩的细节。

Sass和PostCSS

因为你已经使用了Node.js来运行Gulp或Grunt和PostCSS,所以使用Sass最简单的方法就是使用LibSass。而且LibSass编译速度也要比Ruby Sass快很多。在下面的教程中,将通过gulp-sassgrunt-contrib-sass模块来部署LibSass。

通过Gulp来配置

使用npm install gulp-sass --save-dev将gulp-sass模块安装到你的项目中。

接下来像下面一样更新你的gulpfile.js文件:

  1. var gulp = require('gulp');
  2. var postcss = require('gulp-postcss');
  3. var sass = require('gulp-sass');
  4. var autoprefixer = require('autoprefixer');
  5. var cssnano = require('cssnano');
  6. gulp.task('css', function () {
  7. var processors = [
  8. autoprefixer,
  9. cssnano
  10. ];
  11. return gulp.src('./src/*.scss')
  12. .pipe(sass().on('error', sass.logError))
  13. .pipe(postcss(processors))
  14. .pipe(gulp.dest('./dest'));
  15. });

修改了默认的gulpfile.js文件:

  • 添加变量,加载gulp-sassautoprefixercssnano
  • autoprefixercssnano变量放在processors数组内
  • 将要编译的源文件名.css的扩展名修改为.scss
  • 添加pipe().pipe(sass()...)用来处理Sass,需要确保的是处理Sass要放在PostCSS前面

现在我们可以写一些测试代码来确保Sass和PostCSS都能正常编译。

测试预处理器

src/style.css文件重命名为src/style.scss,并且在文件中添加下面的测试代码:

  1. $font-stack: Helvetica, sans-serif;
  2. $primary-color: #333;
  3. body {
  4. font: 100% $font-stack;
  5. color: $primary-color;
  6. }

运行gulp css,并且看看dest/中有没有一个新文件style.css,并且文件中的内容:

  1. body {
  2. font: 100% Helvetica, sans-serif;
  3. color: #333; }

测试PostCSS

现在,在style.scss文件中添加前面提供测试PostCSS的代码。并且运行gulp css之后,查看dest/style.css文件:

  1. body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

通过Grunt来配置

使用npm install grunt-contrib-sass在你新的Grunt项目中安装grunt-contrib-sass模块。

然后在grunt.loadNpmTasks()函数中添加grunt-contrib-sass,放在之前PostCSS的后面:

  1. grunt.loadNpmTasks('grunt-postcss');
  2. grunt.loadNpmTasks('grunt-contrib-sass');

现在需要设置一个新的任务来处理Sass:

  1. grunt.initConfig({

但是需要在postcss任务前添加这段代码:

  1. sass: {
  2. dist: {
  3. files: {
  4. 'src/style.css': 'src/style.scss'
  5. }
  6. }
  7. },

现在已经注册好了Sass和PostCSS任务。之后需要在grunt.loadNpmTasks()函数中插入这些任务:

  1. grunt.registerTask('css', ['sass', 'postcss']);

测试预处理器

src/style.css文件重新命名为src/style.scss,并且添加下面的Sass代码,来测试你的配置:

  1. $font-stack: Helvetica, sans-serif;
  2. $primary-color: #333;
  3. body {
  4. font: 100% $font-stack;
  5. color: $primary-color;
  6. }

运行grunt css命令之后,在dest/文件夹中会创建一个新文件style.css,编译后的代码将放在这个文件中:

  1. body {
  2. font: 100% Helvetica, sans-serif;
  3. color: #333; }

设置PostCSS

现在我们需要运行autoprefixercssnano插件,在你的gruntfile.js文件中的processors数组中添加下面代码:

  1. processors: [
  2. require('autoprefixer')(),
  3. require('cssnano')()
  4. ]

测试PostCSS

将测试PostCSS的代码添加到style.scss文件中,然后在命令中再次运行grunt css命令,你会在dest/style.css中看到编译后的代码,编译后的代码包括了autoprefixer处理后的代码,并且整个代码进行了压缩和优化。

Stylus和PostCSS

首先得非常感谢@Sean King提供的PostStylus的插件包,它能让你将Stylus和PostCSS很好的结合在一起工作。如果你是一名Stylus开发者,你可以将PostStylus添加到你的工作流中。

通过Gulp来配置

如果你正在使用一个半成品的gulpfile.js来启动你的项目,需要注意的是,里面使用了gulp-postcss插件。而实际上是只有使用Sass的才需要在流程添加这个插件,但对于使用Stylus的同学来说,这个插件是不需要的,我们要使用的是PostStylus插件包作为编译器。

使用npm uninstall gulp-postcss --save-dev删除它,并且将gulpfile.js文件中的这行代码删除掉:

  1. var postcss = require('gulp-postcss');

接下需要安装Stylus和PostCSS插件,你可以在命令行中执行下面的命令:

  1. npm install gulp-stylus poststylus --save-dev

并且将gulpfile.js文件更新为:

  1. var gulp = require('gulp');
  2. var stylus = require('gulp-stylus');
  3. var poststylus = require('poststylus');
  4. var autoprefixer = require('autoprefixer');
  5. var cssnano = require('cssnano');
  6. gulp.task('css', function () {
  7. var processors = [
  8. autoprefixer,
  9. cssnano
  10. ];
  11. return gulp.src('./src/*.styl')
  12. .pipe(stylus({
  13. use: [
  14. poststylus(processors)
  15. ]
  16. }))
  17. .pipe(gulp.dest('./dest'));
  18. });

上面的代码主要执行:

  • 添加gulp-styluspoststylusautoprefixercssnano变量来加载这些插件
  • processors数组中添加autoprefixercssnano变量
  • 将要编译的源文件名.css扩展名换成.styl
  • 移除.pipe()行中的.pipe(postcss(processors))
  • .pipe()行中添加.pipe(stylus{...})来设置gulp-styluspoststylus模块的编译功能

测试预处理器

开始首轮测试编译。在src目录中,把style.css文件重新命名为style.styl,并且在文件中添加测试Stylus的代码:

  1. $font-stack = Helvetica, sans-serif
  2. $primary-color = #333
  3. body
  4. font: 100% $font-stack
  5. color: $primary-color

运行gulp css命令之后,你在dest/目录中能看到一个style.css文件,并且带有编译后的代码:

  1. body {
  2. font: 100% Helvetica, sans-serif;
  3. color: #333;
  4. }

测试PostCSS

将前面提到测试PostCSS代码添加到你的style.styl文件中,确保粘贴后的代码中只有tab缩进,而没有spaces缩进。

重新编译一下文件,检查你的dest/style.css文件,是否包含了编译之后输出的代码:

  1. body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

通过Grunt来配置

和使用Gulp配置Stylus的项目一样,默认的PostCSS编译器不是项目必需的,它只是纯用于Sass和LESS这样的处理器中。你可以通过npm uninstall grunt-postcss --save-dev命令将其从你的项目中删除。

现在,使用下面的命令将grunt-contrib-styluspoststylus功能模块安装到你的项目中:

  1. npm install grunt-contrib-stylus poststylus --save-dev

由于我们不需要再使用grunt-postcss,所以将下面这行代码:

  1. grunt.loadNpmTasks('grunt-postcss');

换成:

  1. grunt.loadNpmTasks('grunt-contrib-stylus');

因为不需要使用grunt-postcss,所以在grunt.initConfig({...})中就不再需要postcss任务,所以得删除掉这个任务,并且将stylus任务替换上去:

  1. stylus: {
  2. compile: {
  3. options: {
  4. },
  5. files: {
  6. 'dest/style.css': 'src/style.styl'
  7. }
  8. }
  9. }

测试预处理器

现在我们已经准备好测试编译器。把你的src文件夹中的style.css重命名为style.styl,并且在这个文件中添加Stylus测试代码:

  1. $font-stack = Helvetica, sans-serif
  2. $primary-color = #333
  3. body
  4. font: 100% $font-stack
  5. color: $primary-color

在命令行中执行grunt stylus命令。你可以在dest/文件夹中的style.css文件中可以看到下面的代码:

  1. body{font:100% Helvetica,sans-serif;color:#333}

配置PostCSS

将PostCSS插件添加到项目的编译过程中,首先将这段代码添加到gruntfile.js顶部,在module.exports...上面:

  1. var poststylus = function() {
  2. return require('poststylus')(['autoprefixer', 'cssnano'])
  3. };

在项目中加载你想要的PostCSS插件上,而不是像前面的教程一样,放在一个processors数组中。

应该在stylus任务中添加options对象,可以按下面的方式更新你的代码:

  1. options: {
  2. use: [poststylus]
  3. },

这是告诉grunt-contrib-stylus使用poststylus插件来编译,当然你也可以在这个里面添加PostCSS的其他插件。

测试PostCSS

src/style.styl文件中添加PostCSS的测试代码,然后在命令行中运行grunt stylus命令。你在dest/style.css文件中可以看到编译后的代码:

  1. body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

LESS和PostCSS

通过Gulp来配置

通过npm install gulp-less --save-devgulp-less模块安装到你的项目中。

接下来需要更新gulpfile.js文件的配置:

  1. var gulp = require('gulp');
  2. var postcss = require('gulp-postcss');
  3. var less = require('gulp-less');
  4. var autoprefixer = require('autoprefixer');
  5. var cssnano = require('cssnano');
  6. gulp.task('css', function () {
  7. var processors = [
  8. autoprefixer,
  9. cssnano
  10. ];
  11. return gulp.src('./src/*.less')
  12. .pipe(less())
  13. .pipe(postcss(processors))
  14. .pipe(gulp.dest('./dest'));
  15. });

默认的gulpfile.js文件做了一些改变:

  • 添加gulp-lessautoprefixercssnano变量加载这些模块
  • processors数组中添加autoprefixercssnano变量
  • 将编译源文件中的.css扩展名换成.less
  • .pipe()添加LESS处理,并且放在PostCSS处理器前面

测试预处理器

接下来测试LESS和PostCSS。

src/style.css重命名为src/style.less,并且在文件中添加下面的测试代码:

  1. @font-stack: Helvetica, sans-serif;
  2. @primary-color: #333;
  3. body {
  4. font: 100% @font-stack;
  5. color: @primary-color;
  6. }

运行gulp css命令,在你的dest/目录中可以看到添加了一个style.css文件,文件中包含了编译后的代码:

  1. body{font:100% Helvetica,sans-serif;color:#333}

测试PostCSS

现在在你的style.less文件中添加前面提供的PostCSS测试代码。

运行gulp css命令,编译后的代码添加到dest/style.css文件中:

  1. body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

通过Grunt来配置

在新的Grunt项目中通过npm install grunt-contrib-less命令将grunt-contrib-less模块添加到项目中,接着在grunt.loadNpmTasks()函数中像下面一样添加PostCSS插件:

  1. grunt.loadNpmTasks('grunt-postcss');
  2. grunt.loadNpmTasks('grunt-contrib-less');

接下来设置LESS处理器的新任务:

  1. grunt.initConfig({

在现有的postcss任务中添加下面的代码:

  1. less: {
  2. production: {
  3. files: {
  4. 'src/style.css': 'src/style.less'
  5. }
  6. }
  7. },

现在注册运行LESS和PostCSS的任务。在grunt.loadNpmTasks()函数中添加下面的代码:

  1. grunt.registerTask('css', ['less', 'postcss']);

测试预处理器

测试预处理器,重新将src/目录中的style.css命名为style.less,并且在测试文件中添加LESS代码:

  1. @font-stack: Helvetica, sans-serif;
  2. @primary-color: #333;
  3. body {
  4. font: 100% @font-stack;
  5. color: @primary-color;
  6. }

在命令行中执行grunt css命令。你可以看到dest/目录中新创建了一个style.css文件,并且包含了编译之后的代码:

  1. body {
  2. font: 100% Helvetica, sans-serif;
  3. color: #333333;
  4. }

配置PostCSS

现在将PostCSS插件添加到工作流中。更新gruntfile.jsprocessors数组:

  1. processors: [
  2. require('autoprefixer')(),
  3. require('cssnano')()
  4. ]

测试PostCSS

将测试PostCSS的代码添加到style.less文件中,并且再次运行grunt css。在dest/style.css文件中可以看到PostCSS编译后的代码:

  1. body{font:100% Helvetica,sans-serif;color:#333}.css_nano,.css_nano+p,[class*=css_nano]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:1rem 2.5rem 2rem 1.5rem;font-weight:400;padding:1.75rem;width:46.5rem}

接下来的教程

下一篇教程我们将介绍使用不同的PostCSS插件自动生成BEM/SUIT的CSS类名。在这个过程中可以让你能更好的跟踪BEM/SUIT开发过程,而且更有效率。

如果你对接下来的内容感兴趣的话,欢迎持续关注这个系列教程的下一篇。

本文根据@Kezz Bracey的《Using PostCSS Together with Sass, Stylus, or LESS》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://webdesign.tutsplus.com/tutorials/using-postcss-together-with-sass-stylus-or-less--cms-24591

PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用的更多相关文章

  1. 用postcss cli运行postcss

    一.验证autoprefixer插件1.新建项目 新建文件夹postcss: 在postcss目录中,新建package.json文件,新建css文件夹: 在css文件夹新建outfile.css,i ...

  2. Vue使用PostCSS 插件和如何使用sass及常用语法

    为什么要使用PostCss 转换 px 单位的插件有很多,知名的有 postcss-px-to-viewport 和 postcss-pxtorem,前者是将 px 转成 vw,后者是将 px 转成 ...

  3. CSS预编译器配置-------LESS Sass Stylus webstorm

    预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...

  4. sass学习--什么是sass

    1.预备知识--什么是 CSS 预处理器 CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这 ...

  5. 学习笔记:SASS

    SASS: http://www.sass.hk/sass-course.html  SASS 2015-10-10 http://sass.bootcss.com/docs/sass-referen ...

  6. sass学习之一:sass安装compass部署

    主要参考 http://www.jianshu.com/p/5bfc9411f58f -------------------------------------------- sass基于ruby 需 ...

  7. 【学习笔记】Sass入门指南

    本文将介绍Sass的一些基本概念,比如说“变量”.“混合参数”.“嵌套”和“选择器继承”等.著作权归作者所有. 什么是Sass? Sass是一门非常优秀的CSS预处语言,他是由Hampton Catl ...

  8. Ruby Rails学习中:Sass 和 Asset Pipeline,布局中的链接(Rails路由,具名路由),用户注册: 第一步

    接上篇: 一.Sass 和 Asset Pipeline Rails 中最有用的功能之一是 Asset Pipeline, 它极大地简化了静态资源文件(CSS.JavaScript 和图像)的生成和管 ...

  9. 前端学习(八)sass和bootstrap(笔记)

    less sass 和less基本上70%差不多(书写方式不一样) sass功能更多一点 1.定义一个变量 $b:blue; div{width:100px;height:100px; backgro ...

随机推荐

  1. 03.SQLServer性能优化之---存储优化系列

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 概  述:http://www.cnblogs.com/dunitian/p/60413 ...

  2. 说说Makefile那些事儿

    说说Makefile那些事儿 |扬说|透过现象看本质 工作至今,一直对Makefile半知半解.突然某天幡然醒悟,觉得此举极为不妥,只得洗心革面从头学来,以前许多不明觉厉之处顿时茅塞顿开,想想好记性不 ...

  3. ASP.NET Aries 入门开发教程1:框架下载与运行

    背景: 鉴于框架的使用者越来越多,文档太少,不少用户反映框架的入门门槛太高. 好吧,再辛苦下,抽时间写教程吧! 步骤1:下载框架源码 开源地址:https://github.com/cyq1162/A ...

  4. 浅谈我对DDD领域驱动设计的理解

    从遇到问题开始 当人们要做一个软件系统时,一般总是因为遇到了什么问题,然后希望通过一个软件系统来解决. 比如,我是一家企业,然后我觉得我现在线下销售自己的产品还不够,我希望能够在线上也能销售自己的产品 ...

  5. 菜鸟学Struts2——Results

    在对Struts2的Action学习之后,对Struts2的Result进行学习.主要对Struts2文档Guides中的Results分支进行学习,如下图: 1.Result Types(Resul ...

  6. Kotlin的Lambda表达式以及它们怎样简化Android开发(KAD 07)

    作者:Antonio Leiva 时间:Jan 5, 2017 原文链接:https://antonioleiva.com/lambdas-kotlin/ 由于Lambda表达式允许更简单的方式建模式 ...

  7. [WCF]缺少一行代码引发的血案

    这是今天作项目支持的发现的一个关于WCF的问题,虽然最终我只是添加了一行代码就解决了这个问题,但是整个纠错过程是痛苦的,甚至最终发现这个问题都具有偶然性.具体来说,这是一个关于如何自动为服务接口(契约 ...

  8. 手动添加kdump

    背景:     Linux嵌入式设备内核挂死后,无法自动重启,需要手动重启.而且如果当时没有连串口的话,就无法记录内核挂死时的堆栈,所以需要添加一种方式来记录内核挂死信息方便以后调试使用.设备中增加k ...

  9. NET Core-TagHelper实现分页标签

    这里将要和大家分享的是学习总结使用TagHelper实现分页标签,之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里http://www.cnblogs.com/wangrudo ...

  10. angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布

    应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...