当前位置: 首页 > 软件库 > Web应用开发 > CSS框架 >

postcss-each

postcss 迭代数值插件
授权协议 MIT
开发语言 HTML/CSS
所属分类 Web应用开发、 CSS框架
软件类型 开源软件
地区 不详
投 递 者 晏华奥
操作系统 未知
开源组织
适用人群 未知
 软件概览

postcss-each 是一个 postcss 的插件,用来迭代数值。

迭代数值:

@each $icon in foo, bar, baz {
  .icon-$(icon) {    background: url('icons/$(icon).png');
  }
}
.icon-foo {  background: url('icons/foo.png');
}.icon-bar {  background: url('icons/bar.png');
}.icon-baz {  background: url('icons/baz.png');
}

通过索引值迭代数值:

@each $val, $i in foo, bar {
  .icon-$(val) {    background: url("$(val)_$(i).png");
  }
}
.icon-foo {  background: url("foo_0.png");
}.icon-bar {  background: url("bar_1.png");
}

迭代多重数值:

@each $animal, $color in (puma, black), (sea-slug, blue) {
  .$(animal)-icon {    background-image: url('/images/$(animal).png');    border: 2px solid $color;
  }
}
.puma-icon {  background-image: url('/images/puma.png');  border: 2px solid black;  
}.sea-slug-icon {  background-image: url('/images/sea-slug.png');  border: 2px solid blue;
}

 

  • 问题: Nuxt 搭建的移动 web 项目,本地开发时 postcss-px-to-viewport 单位转换功能正常,发布到测试环境服务器时失效。 环境: 本地: node:14.7.0 npm:6.14.7 cnpm:6.1.1 postcss:自动安装 postcss-px-to-viewport:1.1.1(自动安装最新版) 服务器: node:14.15.5 npm:6.14.13 cn

  • PostCSS是一个用 JavaScript 工具和插件转换 CSS 代码的工具 PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构(Abstract Syntax Tree,AST),再交由插件来进行处理。插件基于 CSS 代码的 AST 所能进行的操作是多种多样的,比如可以支持变量和混入(mix

  • 错误 npm run build > webpack_test@1.0.0 build /home/q/www/webpack_test > webpack Hash: e5a0c99f86239b7fee98 Version: webpack 4.39.3 Time: 345ms Built at: 08/30/2019 7:13:18 PM 1 asset Entrypoint app

  • postcss-cssnext features 翻译整理的时间:2018 年 3 月 4 日 postcss-cssnext 官网 automatic vendor prefixes 自动添加供应商前缀 Vendor prefixes are automatically added (and removed if deprecated/useless depending on your brow

  • PostCss是什么鬼 有人说是css预处理器巴拉扒拉,简略的说,PostCss是一个工具,提供了一坨插件用来转化样式。 PostCss是一个Node.js的module,将css解析成一个 AST(abstract syntax tree抽象语法树),通过任意插件解析AST并转换成string输出到一个文件中。插件可能改变AST,也可能能不改变AST。其中的变化通过生成sourcemaps去追踪

  • vue使用postcss 在最后两个 教程中,我们研究了在完成的样式表上使用PreCSS来增强其跨浏览器兼容性和优化的方法,基本上是作为后处理器。 在本教程中,您将学习使用PostCSS作为预处理器,就像使用Stylus,Sass或LESS一样。 使用PostCSS进行预处理的主要方法有两种。 一种是选择您自己的所有插件以添加所需的预处理器功能,另一种是安装一包预选的插件,以便您可以立即进行操作。

  • 當我使用postcss-loader和postcss-cssnext插件,的CSS-類可以是在第二窩的前效果,在第三巢意願不起作用多級嵌套在postcss不起作用 style.css .root { background-color: #ccc; & .header { height: 60px; background-color: #dcdcdc; } & .content { border:

  • postcss Most developers who spend their time working with CSS are familiar with preprocessors such Less, Sass, and Stylus. These tools have become a vital part of the web development ecosystem. Writin

  • 前言 两年前自己就开始学习 PostCSS ,但在开发中使用却不到一年。 没有使用的原因是觉得 PostCSS 插件太多,学习成本很高。 但在开发中实际使用后,觉得 PostCSS 还是有很大的便捷性,诸如自动补全浏览器前缀这一功能就节省了很多时间,把繁琐的工作交给了程序,心思都集中在代码逻辑上,会让开发的过程轻松不少。 PostCSS 是什么 PostCSS 是一个用 JavaScript 工具

  • 一、验证autoprefixer插件 1、新建项目 新建文件夹postcss; 在postcss目录中,新建package.json文件,新建css文件夹; 在css文件夹新建outfile.css,infile.css文件; 在outfile.css文件中写css3语法。 2、安装插件 A、安装postcss-cli插件 cnpm i -D postcss-cli B、安装autoprefix

  • 详细问题描述 css样式中设置了背景色的话在H5发行编译时会报错,不过在浏览器运行编译时未发生错误。 错误日志: [HBuilder] 15:14:32.364 Module build failed (from ./node_modules/postcss-loader/src/index.js): [HBuilder] 15:14:32.365 TypeError: Cannot read p

  • The term “code quality” is not new to programmers. After all, every developer knows that it’s not enough for the code to just work. It should also possess other qualities: it should be readable, well

 相关资料
  • 可在 nuxt.config.js 文件增加以下配置来添加 postcss 插件: export default { build: { postcss: { // 添加插件名称作为键,参数作为值 // 使用npm或yarn安装它们 plugins: { // 通过传递 false 来禁用插件 'postcss-url'

  • 给定以下对象: 是否可以使用ng repeat一次迭代所有值? 我的动机是:1。我在<代码>中使用ng-repeat 有什么想法吗? 谢谢!

  • 问题内容: 假设我有以下几种类型: 我想迭代节点的属性以更改它们。 我本来希望能够做到: 但是由于不是指针,所以这行不通,我必须这样做: 有没有更简单或更快速的方法?是否可以直接从中获取指针? 显然,我不想仅仅为了迭代而更改结构,更冗长的解决方案不是解决方案。 问题答案: 不,您想要的缩写是不可能的。 原因是从您要遍历的切片中复制值。关于范围的规范说: value (if 2nd variable

  • 问题内容: 我有一个’ ‘ 形式的数组,它代表一个小网格的坐标。每个坐标已分配了自己的值。例如…… 我有两个问题。首先,我如何遍历所有存储的值。其次,我希望能够输入一个值并返回其在网格中的特定坐标。解决这个问题的最佳方法是什么? 感谢您的任何帮助! 问题答案: 您可以使用for循环或增强的for循环进行迭代: 要么 第一个版本将是“查找坐标”问题的最简单解决方案-只需检查内部循环中的值是否正确即可

  • 标题有点混乱,很抱歉,所以我有一个太多的数组,其中一个数组比第二个数组包含更多 所以我想做的是例如 这只会注销第一个一次,但我想要的是日志y和x长度一样多,希望这是足够清楚的

  • 由vue-loader 处理的 CSS 输出,都是通过 PostCSS 进行作用域重写,你还可以为 PostCSS 添加自定义插件,例如 autoprefixer 或者 CSSNext。 使用配置文件 vue-loader 支持通过 postcss-loader 自动加载同一个配置文件: postcss.config.js .postcssrc package.json 中的 postcss 使用

  • vue-loader处理的任何CSS输出都通过PostCSS进行管道传输以进行作用域CSS重写。您还可以向过程添加自定义PostCSS插件,例如autoprefixer 或 CSSNext。 使用配置文件 从11.0开始vue-loader支持自动加载postcss-loader支持的相同PostCss配置文件: postcss.config.js .postcssrc postcss field

  • PostCSS 是使用 JS 插件来转换 CSS 的工具,支持变量,混入,未来 CSS 语法,内联图像等等。 PostCSS 已经被许多大公司使用:谷歌,推特,阿里巴巴和 Shopify。 Autoprefixer PostCSS 插件是最流行的 CSS 处理器插件之一。 PostCSS 可以作为预处理器使用,类似:Sass, Less 和 Stylus。但是 PostCSS 是模块化的工具,比之