• 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

  • 相关阅读:
    正则表达式学习
    由#pragma GCC diagnostic ignored "-Wdeprecated-declarations" 浅出
    Xcode调试
    多线程GCD 完整版
    [不定时更新-(进阶必看)我常去逛的iOS干货文章、blog等
    老程序自动安装更新程序
    fragment 学习
    Android常用的颜色列表 color.xml
    android的padding和margin的区别
    android shape的使用
  • 原文地址:https://www.cnblogs.com/peter-web/p/15020856.html
Copyright © 2020-2023  润新知