css新一代特性
作者:互联网
前言:
sass和Less等css预处理器,已经被前端工程师们应用了好多年了,其中很多变量、函数、嵌套等规则让我们写起css来非常高效。在新一代的css规范中,也慢慢加入了一些新特性,支持css的动态编写等。虽然目前浏览器支持度不是很好,但一定是未来的趋势~
文章目录
一、css新特性
1、支持变量var()
变量用--
表示,用var()
使用变量,区别于sass等,变量有不同的作用域。在:root
伪类中设置变量,作用域为全局。
变量名称是区别大小写的。
:root{
--base-color: #333;
}
body {
color: var(--base-color);
}
局部作用域:
.hello {
--base-color: red;
color: var(--base-color);
}
目前大部分浏览器均支持
2、自定义属性集
用定义变量的方式,自定义属性集,用@apply
装饰器使用变量。参考sass中的@mixin用法
:root{
--text-ellipsis: {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.demo {
@apply --text-ellipsis;
}
经测试,目前chrome(87.0)不支持此特性
3、计算属性方法calc()
.demo{
--font-size: 12px;
font-size: calc(var(--font-size) * 2);
width: calc(100% - 30px);
height: calc(100vh - 20px);
}
浏览器支持良好
4、语义化的媒体查询@custom-media
@custom-media --my-screen (width >= 375px) and (width <= 420px);
@media (--my-screen) {
.content {
background: blue;
}
}
经测试,目前chrome(87.0)不支持此特性
5、嵌套写法&
<div class="demo">
<p class="title">这是一段标题</p>
</div>
直接子元素:& 和子元素之间要有空格
.demo {
& .title {
height: 50px;
}
}
6、 image-set() 函数
- 如果是普通屏,此时选择image-set中的@1x背景图像;
- 如果是高清屏幕,此时选择image-set中的@2x背景图像
& .content {
height: calc(100vh - 20px);
background-image: image-set(url(../assets/bg@1x.png) 1x,
url(../assets/bg@2x.png) 2x,
url(../assets/bg@3x.png) 600dpi);
}
在手机上验证居然无效,很奇怪
7、color() 函数
通过color函数来修改颜色,改变透明度、灰度等。更多参考:官方介绍
background-color: color(yellowgreen alpha(-10%));
二、在vue-cli4中使用
PostCSS是使用NodeJs编写的css处理工具,实际上postcss只是工具的骨架,其丰富的插件使其变得强大。是使用 javascript 插件转换 CSS 的后处理器。
postcss-cssnext 是一个 CSStranspiler,允许你使用最新的 CSS 语法。cssnext 把新 CSS 规范转换成兼容性更强的 CSS,所以不需要等待各种浏览器的支持。
安装插件依赖包来支持。
npm i postcss-cssnext --save-dev
npm i postcss-import --save-dev
npm i postcss-loader --save-dev
注意:postcss-cssnext本身包含了 autoprefixer 插件~
在.postcssrc.js中配置
module.exports = {
plugins: {
autoprefixer: {
overrideBrowserslist: [ // 支持的浏览器
'Android 4.1',
'iOS 7.1',
'Chrome > 31',
'ff > 31',
'ie >= 8'
]
},
'postcss-cssnext': {}
}
}
标签:变量,--,image,特性,新一代,color,postcss,css 来源: https://blog.csdn.net/qq_36131788/article/details/112320700