postcss10bet

来源:http://www.chinese-glasses.com 作者:Web前端 人气:171 发布时间:2020-03-14
摘要:时间: 2019-11-20阅读: 101标签: 高亮 (PostCSS) https://github.com/postcss/postcss PostCSS 是一个允许使用 JS 插件转换样式的工具。 这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins, 编译尚

时间: 2019-11-20阅读: 101标签: 高亮

(PostCSS)https://github.com/postcss/postcss

PostCSS 是一个允许使用 JS 插件转换样式的工具。
这些插件可以检查(lint)你的 CSS,支持 CSS Variables 和 Mixins,
编译尚未被浏览器广泛支持的先进的 CSS 语法,内联图片,以及其它很多优秀的功能。

PostCSS 在工业界被广泛地应用,其中不乏很多有名的行业领导者,如:维基百科,Twitter,阿里巴巴,
JetBrains。PostCSS 的 [Autoprefixer] 插件是最流行的 CSS 处理工具之一。

有时候给页面内容添加一个关键词搜索功能,如果搜索结果能够像浏览器搜索一样高亮显示,那找起来就会很明显体验会好很多。本文就介绍一下关键词搜索高亮的实现方案。

插件

截止到目前,PostCSS 有 200 多个插件。你可以在 插件列表搜索目录 找到它们。
下方的列表是我们最喜欢的插件 - 它们很好地演示了我们可以用 PostCSS 做些什么。

如果你有任何新的想法,开发 PostCSS 插件 非常简单易上手。

实现效果大概如下:

解决全局 CSS 的问题

  • postcss-use 允许你在 CSS 里明确地设置 PostCSS 插件,并且只在当前文件执行它们。
  • postcss-modulesreact-css-modules 可以自动以组件为单位隔绝 CSS 选择器。
  • postcss-autoreset 是全局样式重置的又一个选择,它更适用于分离的组件。
  • postcss-initial 添加了 all: initial 的支持,重置了所有继承的样式。
  • cq-prolyfill 添加了容器查询的支持,允许添加响应于父元素宽度的样式.

可在线预览:#/search-highlight。

提前使用先进的 CSS 特性

一、实现原理

更佳的 CSS 可读性

  • precss 囊括了许多插件来支持类似 Sass 的特性,比如 CSS 变量,套嵌,mixins 等。
  • postcss-sorting 给规则的内容以及@规则排序。
  • postcss-utilities 囊括了最常用的简写方式和书写帮助。
  • short 添加并拓展了大量的缩写属性。

实现原理很简单:使用正则匹配出文本内容中的所有关键词,在关键词外包一层内联标签,比如span或者font,通过innerHtml渲染文本。使用CSS控制插入的内联元素样式,并且记录下当前搜索到的结果是第几个,使用不同的样式来展示。

图片和字体

比如文本内容是“实现江畔何人初见月?江月何年初照人?”,而关键词是“月”,那替换后的字符串可能变为:

提示器(Linters)

  • stylelint 是一个模块化的样式提示器。
  • stylefmt 是一个能根据 stylelint 规则自动优化 CSS 格式的工具。
  • doiuse 提示 CSS 的浏览器支持性,使用的数据来自于 Can I Use。
  • colorguard 帮助你保持一个始终如一的调色板。
江畔何人初见font 月/font?江font 月/font何年初照人?

其它

  • postcss-rtl 在单个 CSS 文件里组合了两个方向(左到右,右到左)的样式。
  • cssnano 是一个模块化的 CSS 压缩器。
  • lost 是一个功能强大的 calc() 栅格系统。
  • rtlcss 镜像翻转 CSS 样式,适用于 right-to-left 的应用场景。

其中匹配的“月”被替换成了font月/font,并且设置font标签的背景色,使得搜索到的第一个“月”(当前关键词)背景变为橘黄色,而第二个“月”背景变为黄色。

语法

PostCSS 可以转化样式到任意语法,不仅仅是 CSS。
如果还没有支持你最喜欢的语法,你可以编写一个解释器以及(或者)一个 stringifier 来拓展 PostCSS。

  • sugarss 是一个以缩进为基础的语法,类似于 Sass 和 Stylus。
  • postcss-html 允许你在 HTML / Markdown / Vue component 里编写样式。
  • postcss-scss 允许你使用 SCSS (但并没有将 SCSS 编译到 CSS)
  • postcss-sass 允许你使用 Sass (但并没有将 Sass 编译到 CSS)
  • postcss-less 允许你使用 Less (但并没有将 LESS 编译到 CSS)
  • postcss-less-engine 允许你使用 Less (并且使用真正的 Less.js 把 LESS 编译到 CSS)
  • postcss-js 允许你在 JS 里编写样式,或者转换成 React 的内联样式/Radium/JSS。
  • postcss-safe-parser 查找并修复 CSS 语法错误。
  • midas 将 CSS 字符串转化成高亮的 HTML。

本文基于Vue实现了一个组件,并且将组件发布到了npm上,如果你不想自己写组件,可以直接安装使用:vue-search-highlight。接下来会介绍一下组件vue-search-highlight的使用,然后给出Vue中的搜索高亮的代码实现。

文章

你可以在 awesome-postcss 列表里找到更多优秀的文章和视频。

二、vue-search-highlight组件使用

书籍

组件需要传入文本content以及关键词keyword,组件会渲染出一个包含content并且关键词被font元素替换的div元素。组件功能如下:

使用方法

你可以通过简单的两步便开始使用 PostCSS:

  1. 在你的构建工具中查找并添加 PostCSS 拓展。
  2. 选择插件并将它们添加到你的 PostCSS 处理队列中。

关键词高亮关键词匹配总数以及当前关键词的索引(即是第几个搜索结果)查找上一个、下一个功能,调用相应函数即可跳到上一个或者下一个

Webpack

webpack.config.js 里使用 postcss-loader :

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'style-loader',
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                        }
                    },
                    {
                        loader: 'postcss-loader'
                    }
                ]
            }
        ]
    }
}

然后创建 postcss.config.js:

module.exports = {
    plugins: [
        require('precss'),
        require('autoprefixer')
    ]
}

本文由10bet发布于Web前端,转载请注明出处:postcss10bet

关键词:

上一篇:没有了

下一篇:【10bet】robots.txt用法

最火资讯