css新一代特性

2024-02-23 09:06:04

前言：

sass和Less等css预处理器，已经被前端工程师们应用了好多年了，其中很多变量、函数、嵌套等规则让我们写起css来非常高效。在新一代的css规范中，也慢慢加入了一些新特性，支持css的动态编写等。虽然目前浏览器支持度不是很好，但一定是未来的趋势~

文章目录

前言：
一、css新特性
二、在vue-cli4中使用

一、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': {}
  }
}

码农公寓

前言：