您好!欢迎访问leyu乐鱼全站app!
专注精密制造10载以上
专业点胶阀喷嘴,撞针,精密机械零件加工厂家
联系方式
013-32079314
您当前的位置: 主页 > 案例展示 > 医疗行业 >

医疗行业

CSS 的未来:PostCSS 和 cssnext

更新时间  2021-12-07 01:39 阅读
本文摘要:PostCSS 是使用 javascript 插件转换 CSS 的后处置惩罚器。PostCSS 自己不会对你的 CSS 做任何事情,你需要安装一些 plugins 才气开始事情。 这不仅使其模块化,同时功效增强。cssnext 是一个 CSS transpiler,允许你使用最新的 CSS 语法。 cssnext 把新 CSS 规范转换成兼容性更强的 CSS,所以不需要等候种种浏览器的支持。

leyu乐鱼全站app

PostCSS 是使用 javascript 插件转换 CSS 的后处置惩罚器。PostCSS 自己不会对你的 CSS 做任何事情,你需要安装一些 plugins 才气开始事情。

这不仅使其模块化,同时功效增强。cssnext 是一个 CSS transpiler,允许你使用最新的 CSS 语法。

cssnext 把新 CSS 规范转换成兼容性更强的 CSS,所以不需要等候种种浏览器的支持。PostCSS 的事情原理就是剖析 CSS 并将其转换成一个 CSS 的节点数,这可以通过 javascript 来控制,然后返回修改后的树并生存。它与 Sass(预处置惩罚器)的事情原理差别,你基本上是用一种差别的语言来编译 CSS。预处置惩罚和后处置惩罚的区别为了简朴的方式解释预处置惩罚和后处置惩罚的差别,这里以单元转换为例。

当书写 Sass 时,我们可以用函数px转换成rem:/* input */.selector { margin-bottom: rem(20px); }/* output, assuming base font size is 1rem */.selector { margin-bottom: 1.25rem; }这种方式节约了我们手工盘算的时间。不外通过 PostCSS,我们能够做的更好。因为是后处置惩罚的缘故,我们不需要任何函数来编译 CSS。

我们可以直接书写px,它可以自动地转换成rem。/* input */.selector { margin-bottom: 20px; }/* output, assuming base font size is 1rem */.selector { margin-bottom: 1.25rem; }PostCSS 会在每一个px值泛起并运行盘算之前处置惩罚声明,将其转换成rem的值。

cssnext 新特性cssnext 包罗了大量的新特性:自动提供浏览器前缀支持自界说属性与 var() 支持自界说属性荟萃与 @apply 支持简化的、更宁静的 calc()可自界说的媒体查询媒体查询规模自界说选择器嵌套image-set()color()hwb()gray()rrggbbaa 颜色rgba() 的降级方案rebeccapurple 颜色font-variant 属性filter 属性inital 值rem 单元的降级方案:any-link 伪类:mathces 伪类:not 伪类:: 伪元素语法的降级方案overflow-wrap 属性的降级方案不区分巨细写的属性功效增强的 rga()功效增强的 hsl()sysem-ui 字体自动提供浏览器前缀支持自动添加(以及删除过时/没用的前缀),由 autoprefixer 实现自界说属性与 var() 支持自界说属性的当前转换旨在提供一种限定在:root选择器中、面向未来的、由原生 CSS 自界说属性提供的新特性。使用特性::root { --mainColor: red;}a { color: var(--mainColor);}自界说属性荟萃与 @apply 支持允许你在已命名的自界说属性中存储一套变量,然后在其他类型规则中引用它。

:root { --danger-theme: { color: white; background-color: red; };}.danger { @apply --danger-theme;}简化的、更宁静的 calc()使用优化预分析 var() 引用来允许你更宁静的用 calc() 使用自界说变量:root { --fontSize: 1rem;}h1 { font-size: calc(var(--fontSize) * 2);}可自界说的媒体查询一个更好的方法来实现语义化的媒体查询@custom-media --small-viewport (max-width: 30em);/* check out media queries ranges for a better syntax !*/@media (--small-viewport) { /* styles for small viewport */}媒体查询规模允许用 <= 和 >=来取代min和max@media (width >= 500px) and (width <= 1200px) { /* your styles */}/* or coupled with custom media queries */@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);@media (--only-medium-screen) { /* your styles */}自界说选择器允许你缔造自己的选择器@custom-selector :--button button, .button;@custom-selector :--enter :hover, :focus;:--button { /* styles for your buttons */}:--button:--enter { /* hover/focus styles for your button Read more about :enter proposal http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877 */}嵌套允许你使用嵌套选择器a { /* direct nesting (& MUST be the first part of selector)*/ & span { color: white; } /* @nest rule (for complex nesting) */ @nest span & { color: blue; } /* media query automatic nesting */ @media (min-width: 30em) { color: yellow; }}image-set() 函数允许你凭据差别的用户设备来提供差别的图片解决方案.foo { background-image: image-set(url(img/test.png) 1x, url(img/test-2x.png) 2x, url(my-img-print.png) 600dpi);}color() 函数一个颜色函数来修改颜色a { color: color(red alpha(-10%));}a:hover { color: color(red blackness(80%));}hwb() 函数与 hs1() 相似,不外更容易阅读body { color: hwb(90, 0%, 0%, 0.5);}gray() 函数允许你使用凌驾50种渐变的灰度值,对于第一个参数,你可以使用 0 - 255 的数值或者百分比。.foo { color: gray(85);}.bar { color: gray(10%, 50%);}rrggbbaa 颜色值允许使用4位或者8位十六进制数来表现颜色body { background: #9d9c;}rgba() 的降级方案如果你使用的是旧的浏览器(好比 IE8),那么把 rgba() 转换为实体颜色body { background: rgba(153, 221, 153, 0.8); /* you will have the same value without alpha as a fallback */}rebeccapurple 颜色允许你使用新的颜色关键词body { background: rgba(153, 221, 153, 0.8); /* you will have the same value without alpha as a fallback */}font-variant 属性通过 font-feature-settings降级的一种属性。你可以通过这个链接来检察浏览器支持h2 { font-variant-caps: small-caps;}table { font-variant-numeric: lining-nums;}filter 属性W3C 的 filters 只允许使用url(data:*)来转换 svg filter。

.blur { filter: blur(4px);}inital 值允许你使用如何值的初始值。该值表现属性初始化值所指定的值,但这并不意味着浏览器的默认值。好比,对于display属性,initial 时钟标示内联,因为这是属性指定的初始值。

一个例子,div { display: initial }并不代表block,而是inline。div { display: initial; /* inline */}rem 单元在旧浏览器里将 rem 降级为 px(好比IE8)h1 { font-size: 1.5rem;}:any-link 伪类允许你使用:any-link伪类 nav :any-link { background-color: yellow;}:matches 伪类允许你使用:matches伪类p:matches(:first-child, .special) { color: red;}:not 伪类允许你使用支持最多选择器的:not伪类,将此降级为只选择一个选择器的:notp:not(:first-child, .special) { color: red;}:: 伪元素语法降级如果你的浏览器是旧浏览器,会将 :: 降级为:。

a::before { /* ... */}overflow-wrap 属性将overflow-wrap转换为word-wrap属性body { overflow-wrap: break-word;}不区分巨细写的属性允许你使用不区分巨细写的属性[frame=hsides i] { border-style: solid none;}功效增强的 rga()允许你使用由空格支解的参数与可选的由斜线支解的不透明度新语法。你也可以使用数字来表现颜色通道。alpha 值接受百分比和数字,而且将 rgb() 作为可选参数。

因此 rgb() 和 rgba() 现在是相互的别名。div { background-color: rgb(100 222.2 100.9 / 30%);}功效增强的 hs1()允许你使用由空格支解的参数与可选的由斜线支解的不透明度新语法。

hsl() 现在接受角度(deg, grad, rad, turn)以及用数字表现色调,用百分比或者数字来表现 alpha 值。所以 hsl() 与 hsla() 现在也是相互的别名。div { color: hsl(90deg 90% 70%); background-color: hsl(300grad 25% 15% / 70%);}system-ui 字体允许你使用 system-ui 通用字体系列。

乐鱼官网推荐

当前转换提供了一个实际的字体列表来作为降级方案。body { font-family: system-ui;}使用 cssnext 书写未来的 CSScssnext 是一个 PostCSS 的包,我们可以在样式表中使用 cssnext 分外增加一些 CSS 规范。

/* custom properties */:root { --heading-color: #ff0000;}/* custom selectors */@custom-selector :--headings h1, h2, h3, h4, h5, h6;/* usage */:--headings { color: var(--heading-color);}通过 cssnext,上述代码会被处置惩罚成以下内容h1,h2,h3,h4,h5,h6 { color: #ff0000;}这真的很简练,其中另有许多令人兴奋的特性。因为我们书写的是未来规范的 CSS,所以 PostCSS 的生成步骤不需要浏览器去执行。用自界说函数扩展 CSS 的功效使用 cssnext,我们可以通过 javascript 建立自界说函数来操作被剖析的 CSS。

在 Sass 中,我们经常使用生成行距的函数(凭据基本的 line-height 盘算),它有助于建立简朴且可维护的垂直韵律。$line-height: 32px;/* vertical rhythm function */@function vr($amount) { @return $line-height * $amount;}/* input */.selector { margin-bottom: vr(2) }/* output */.selector { margin-bottom: 64px; }如果用 PostCSS 做的话,我们可以自界说 CSS 组件而不是函数。

/* input */.selector { margin-bottom: 2vr }/* output */.selector { margin-bottom: 64px; }执行速度PostCSS 声称比预处置惩罚器快 3-30 倍。这里使用 10000 个选择器的 5 个属性上使用上述 Sass 函数和 PostCSS 函数,也就是处置惩罚 50000 次,以下是对比效果。Libsass 3.2PostCSS从效果中很显然看出,PostCSS 比 LibSass 的速度快了许多。


本文关键词:CSS,的,未来,PostCSS,和,cssnext,PostCSS,是,使用,乐鱼官网推荐

本文来源:leyu乐鱼全站app-www.zzjxt.com