- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在变量中保存一个动态属性,然后我想将该变量与 calc()
我有一个动态高度的类
.cuerpo-detalle {
height: x;
}
我想用 .cuerpodetalle
类的高度属性分配一个变量
:root{
cuerpoDetalle: .cuerpo-detalle.height;
}
然后我想将该变量用作动态度量并将其乘以 2 得到 footerxpand
.footerxpand{
height: calc(var(--cuerpoDetalle)*2);
}
最佳答案
你可以用 js 做这样的事情......
This question about calculating height with javascript也可能有帮助。
var elem = document.getElementById('cuerpo-detalle'),
height = elem.offsetHeight;
document.documentElement.style.setProperty('--cuerpoDetalle', height + 'px');
:root {
--cuerpoDetalle: auto;
}
footer {
height: calc(var(--cuerpoDetalle) * 2);
background: black;
}
div {
width: 66ch;
margin: 0 auto;
}
<div id="cuerpo-detalle">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, facere officiis amet cumque voluptas repudiandae, iure accusamus consequatur dolor eligendi autem architecto ea libero eum perspiciatis voluptate molestias laboriosam. Ad.</p>
</div>
<footer></footer>
关于javascript - 如何使用 PostCSS 将类属性保存在变量中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49289056/
我正在尝试安装 Tailwind 来练习一些基本知识,以了解该框架的工作原理。我遵循了框架的创建者 Adam Wathan 提供的每一步,在运行时我遇到命令行错误:您必须传递一个有效的文件列表来解析。
来自 PostCSS 插件的未知错误。您当前的 PostCSS 版本是 8.3.0,但 postcss-preset-env 使用的是 7.0.36。 有谁知道为什么会发生这个错误? 最佳答案 您可能
每当我运行 npm start 时,我都会收到此错误。 我尝试了几个修复程序,但没有一个对我有用。我试图将 autoprefixer 的版本更改为 9.8.6 但它没有用。 请帮我解决这个问题 这是我
我正在尝试使用 PostCSS Sass Color Function .我收到此错误: Unknown error from PostCSS plugin. Your current Pos
我正在按照这个示例快速介绍 postcss: https://www.sitepoint.com/an-introduction-to-postcss/ 安装后postcss和 autoprefixe
我正在尝试将 tailwind 与 hexo 结合使用。看起来来自 https://tailwindcss.com/docs/installation/#using-tailwind-with-pos
目的是什么: PostCSS Autoreset PostCSS Initial 两者的文档都非常稀疏,并没有真正解释为什么应该使用它们以及它们的目的是什么。 我试过自动重置。它似乎将 all: in
我安装了新的 tailwindcss 2.0 版,但出现以下错误。我试图卸载 postcss 和 tailwindcss 但它不起作用。需要帮忙。 Module build failed (from
我有这个源文件为 src/mike.js import '@ckeditor/ckeditor5-ui/theme/globals/globals.css' export default functi
如何在本地安装 postcss 模块,并通过全局安装的 postcss-cli 使用它们? 例如: postcss -u autoprefixer -o style.css index.css 如果我
如何在本地安装 postcss 模块,并通过全局安装的 postcss-cli 使用它们? 例如: postcss -u autoprefixer -o style.css index.css 如果我
我用cssnext写我的css :root{ --ellipsis: { overflow: hidden; text-overflow: ellipsis;
我最近开始实现 CSS 自定义属性,但需要支持 IE11 - 因此需要 postcss-preset-env。到目前为止,我发现 Angular 的 webpack 配置不是很可定制,但我已经安装了自
我在 gruntfile.js 中使用 grunt-postcss,除了 postcss-bem-linter 之外,一切正常,如果不遵循 BEM 规则,它应该在控制台中记录警告。这是 gruntfi
这是我的 Webpack scss/css 的配置文件。 ... { test: /\.s?css$/, use: [ 'style-loader', { lo
我正在学习如何使用postcss-bem生成bem风格的css文件,但我想知道是否有一些像 CSS-Modules 或 Postcss-JS 这样的包,我可以用它们来做如下的事情: const Rea
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我正在尝试使用 Webpack 5、Tailwind CSS 和 Typescript 从头开始创建一个全新的 React 应用程序。结合几个教程后,我不知道如何让 postcss-loader
所以今天我一直在尝试将 postcss-loader 从版本 3.0.0 迁移到 4.0.2 我注意到自版本 4.0.0 以来,他们添加了 postCSS 作为对等依赖项,因此我添加了 postcss
当我 npm start 时出现此错误我的 react 项目。谁能解决这个问题? ./src/index.scss (./node_modules/css-loader/dist/cjs.js??re
我是一名优秀的程序员,十分优秀!