html如何使用css预处理,CSS NEXT---CSS预处理器简单写法的替代者

原标题：CSS NEXT---CSS预处理器简单写法的替代者

李青青，2014年7月入职Qunar, 是大住宿事业部国内酒店大前端组的前端小驼，主要负责国内酒店touch端的开发及维护，以及app、小程序内h5页面开发及维护等工作。践行工匠精神、争做最好的自己~

背景

18年下半年，我们进行了酒店 touch 主站的技术及 UI 升级，初次在项目中尝试了 css next，感觉很不错，从之前的预编译语言 less 转过来也完全没有落差，在这里推荐给大家~

简介

网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。表现层 CSS 的编写是非常重要的一部分，而不同浏览器对 CSS 标准的支持程度是不同的，同时 CSS 的发展速度相比大众期待中的也有一定差距：没有变量、不支持嵌套、编程能力较弱、代码复用性差等，这使得 SASS 和 LESS 等 CSS 预处理语言深受开发者欢迎。说到预编译语言，不得不提起的就是当下很流行的 postcss ,终于有一点点进入正题了~ postcss 是一种对 css 编译的工具，类似 babel 对 js 的处理，其依托强大的插件体系为 CSS 处理增加了无限可能。PostCSS 一般不单独使用，而是与已有的构建工具进行集成。PostCSS 与主流的构建工具，如 webpack 、grunt 和 gulp 都可以进行集成。完成集成之后，选择满足功能需求的 PostCSS 插件并进行配置，如兼容性处理大多使用 Autoprefixer 、代码审查通常用 stylelint。 本文中即将要介绍的是 css next ，一个 postcss 插件。它对最新的 CSS 语法提供了支持，将业务中 css 转换成更兼容的 CSS ，让开发者不用担心于浏览器是否支持这些特性。Use tomorrow's CSS syntax, today.

如何开始(仅介绍webpack版) install

npm install postcss-loader postcss-cssnext创建postcss.config.js

// 此处只引入cssnext插件，其他插件可自行添加

module.exports = {

plugins: [

require('postcss-cssnext')()

]

};配置webpack.config.js

module.exports = { module: { rules: [

{

test: /.css$/,

use: [ 'style-loader',

{ loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ]

}

]

}

}语法简介(顺附与less、sass的对比) 自定义属性 & var()

css next 可以自定义变量以备下文重复使用，变量名以 -- 开始，如果一定要追究 -- 有何含义，那么其实它仅仅是一个标示，如 Sass 的 $ 、Less 的 @ 。

:root {

--base-color: #333;

--base-font: 12px;

--base-font-family: "PingFangSC-Regular", "MicroSoft YaHei", "sans-serif";

}

变量的使用则是通过 var() 函数，如：

body {

color: var(--base-color);

font-size: var(--base-font);

font-family: var(--base-font-family);

}

css next 属性其实是有作用域的，像上面 :root 可以理解为根节点、全局作用域，在使用时优先级最低，如：

/* 声明根、yellow、blue颜色分别为red、yellow、blue, 最终 * 中 color读取则不同 */

:root { --color: red; }

.yellow { --color: yellow; }

.blue { --color: blue; }

* { color: var(--color); }

yellow

blue

red

less && sass, eg:

/* sass 变量示例 */

$base-color: #333;

$base-font: 12px;

body {

$base-font: 14px;

font-size: $base-font; // 14px

color: $base-color

}

#app {

font-size: $base-font; // 12px

}

/* less 变量示例 */

@base-color: #333;

@base-font: 12px;

body {

@base-font: 14px;

font-size: @base-font; // 14px

color: @base-color

}

#app {

font-size: @base-font; // 12px

}自定义属性集 & @apply

可在 :root 中自定义一套变量( 属性集 )，然后在下文中通过 @apply 装饰器来引用:

:root { /* 省略号 */

--text-ellipsis: {

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

overflow: hidden;

}

}

.base-info {

& p {

@apply --text-ellipsis;

}

...

}

less && sass 中用法稍有差异, eg:

/* sass 示例 */

@mixin text-ellipsis {

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

overflow: hidden;

}

.base-info{

p {

@include text-ellipsis;

}

}

/* less 示例 */

.text-ellipsis() {

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

overflow: hidden;

}

.base-info {

p {

.text-ellipsis;

}

}

/* 编译结果 */

.base-info p {

text-overflow: ellipsis;

white-space: nowrap;

word-wrap: normal;

overflow: hidden;

}计算属性方法 calc()

使用优化预分析 var() 引用来允许你更安全的用 calc() 使用自定义变量：

:root {

--font-size: 12px;

--height: 10%;

--reset: {

font-size: calc(var(--font-size) * 2);

height: calc(100% - var(--height));

}

}

body {

@apply --reset;

}

编译后：

body {

font-size: 24px;

height: 90%;

}

less && sass 的计算非常强大，这里简单举例, eg:

/* sass示例 */

$font-size: 12px;

$height: 10%;

body {

font-size: $font-size *2;

height: 100%-$height;

}

/* less示例 */

@font-size: 12px;

@height: 10%;

body {

font-size: @font-size * 2;

height: 100%-@height;

}媒体查询 & @custom-media

媒体查询的查询规则可以提取出来单独定义，使得 css 更加语义化:

写法：

@custom-media --my-screen (width >= 375px) and (width <= 420px);

@media (--my-screen) {

...

}

编译后：

@media (min-width: 500px) and (max-width: 1200px) {

...

}

less && sass 中媒体查询与通常 css 一般无二，只是多了嵌套，这里不多举例了。

自定义选择器 & @custom-selector

一长串的选择器看着很不美观有木有，提取出来创建自定义群组选择器，简单明了：

@custom-selector :--mpclear body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, div;

:--mpclear {

margin: 0;

padding: 0;

}

编译后：

body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, div {

margin: 0;

padding: 0;

}

less && sass 中无批量声明选择器，单个自定义选择器可以使用选择器插值 ,eg:

/* 插值 sass示例 */

$mySelector: app;

$attr: border;

#{$mySelector} {

#{$attr}-color: #333;

}

/* 插值 less示例 */

@mySelector: app;

.@{mySelector}{

width: 100%;

background: #fff;

}嵌套 & &

嵌套这个不用多说，大家使用过 less、sass 的都很熟悉了，唯一区别是 css next 的嵌套带 & 前缀，如：

div {

& p {

color: #fff; }

}

less、sass 中 & 代表对父选择器的引用，否则为后代元素; sass 中还额外提供了属性嵌套 ,eg:

/* sass示例 */

div {

&.qt-bg-white {

background: #fff;

}

&.qt-bg-grey {

background: #f3f3f3;

}

p {

color: #ff0;

font: {

family: fantasy;

size: 14px;

weight: bold;

}

}

}

/* less示例 */

div {

&.qt-bg-white {

background: #fff;

}

&.qt-bg-grey {

background: #f3f3f3;

}

p {

color: #ff0;

font-family: fantasy;

font-size: 14px;

font-weight: bold;

}

}

/* 编译后 */

div.qt-bg-white {

background: #fff;

}

div.qt-bg-grey {

background: #f3f3f3;

}

div p {

color: #ff0;

font-family: fantasy;

font-size: 14px;

font-weight: bold;

}

...

另外还有图片适配多设备方案、强大的颜色函数、最新伪类选择器以及其他新语法，在这里我就只写上面简单语法抛砖啦，感兴趣的小伙伴们自行探索剩余神器哦~

使用总结

在这里就相对 css next 的新特性对比着 sass、less 给大家介绍这么多。可以看到 less、sass 日常我们使用频率较高的语法，css next 都是有支持的。 整体而言，预编译语言跟 css next 各有优劣，sass、less 等预编译语言可以做更多复杂灵活的工作，若日常开发中需求只是常规特性，那 css next 是一个更优的选择。若设想的再远再完美一点，在某一天浏览器支持程度上升不存在兼容性等问题，由于 postcss 插件独立于业务代码之外可随时去除，由原生浏览器来解析当前 css next 即可，跟业务无任何粘连，而预编译语言跟业务代码关联紧密想要分离并不容易。 最后呢，项目中确定技术方案时可以具体分析再做出选择，祝大家猪年好运~~返回搜狐，查看更多

责任编辑：