• CSS IN JS (polished.js用法)


    由于 CSS 的封装非常弱,导致了一系列的第三方库,用来加强 React 的 CSS 操作。它们统称为 CSS in JS,意思就是使用 JS 语言写 CSS。根据不完全统计,各种 CSS in JS 的库至少有47种。老实说,现在也看不出来,哪一个库会变成主流。

    你可能会问,它们与"CSS 预处理器"(比如 Less 和 Sass,包括 PostCSS)有什么区别?回答是 CSS in JS 使用 JavaScript 的语法,是 JavaScript 脚本的一部分,不用从头学习一套专用的 API,也不会多一道编译步骤。我看到一个新的 CSS in JS 库,叫做 polished.js。它将一些常用的 CSS 属性封装成函数,用起来非常方便,充分体现使用 JavaScript 语言写 CSS 的优势。

    polished.js提供的其他方法如下,详细用法请参考文档:https://polished.js.org/docs/。

    • normalize():样式表初始化
    • placeholder():对 placeholder 伪元素设置样式
    • selection():对 selection 伪元素设置样式
    • darken():调节颜色深浅
    • lighten():调节颜色深浅
    • desaturate():降低颜色的饱和度
    • saturate():增加颜色的饱和度
    • opacify():调节透明度
    • complement():返回互补色
    • grayscale():将一个颜色转为灰度
    • rgb():指定红、绿、蓝三个值,返回一个颜色
    • rgba():指定红、绿、蓝和透明度四个值,返回一个颜色
    • hsl():指定色调、饱和度和亮度三个值,返回一个颜色
    • hsla():指定色调、饱和度、亮度和透明度三个值,返回一个颜色
    • mix():混合两种颜色
    • em():将像素转为 em
    • rem():将像素转为 rem

    参考文章:https://www.ruanyifeng.com/blog/2017/04/css_in_js.html

  • 相关阅读:
    第二次冲刺个人工作总结06
    第二次冲刺个人工作总结05
    第十三周学习进度
    第二次冲刺工作总结04
    软件工程课堂作业——寻找水王2
    第二次冲刺个人工作总结03
    第二次冲刺周期个人工作总结02
    第二次冲刺个人工作总结01
    第二次冲刺会议
    git 的更新代码的取消
  • 原文地址:https://www.cnblogs.com/peter-web/p/15020856.html
Copyright © 2020-2023  润新知