我目前正在构建一个大型的React应用程序.Css,从未成为我的强项.但是现在CSS有了使用React的sass/cssNext/inline样式.我一直在使用BEM和sass,但是随着我的其他应用程序变得越来越大,甚至开始崩溃.特别是当你具有"重新皮肤"或"主题"的能力以外的主要配色方案等页面.
所以 - 有人可以指出一种经过验证的方法来创建具有可以扩展的反应的css,并且允许在人们想要借用我的组件时进行客户主题化.例如,
<MyComponent />
// this component has its styles but lets say Joe Schmoe wants be import
// it? But, Joe wants to overlay his custom styles?
// Is there a new paradigm that allows for an overlay or reskin within the component?
甚至整个应用程序的想法可以在一段时间内换肤.我知道这是一个非常基本的问题,但每当我构建项目时,我的痛点似乎也是CSS - 所以我想知道什么是真正的.
是否可以使用:root带有 ID 或类的选择器？我正在尝试翻转不同页面上的颜色。
:root {
--color-one: red;
--color-two: blue;
}
/* Can something like this happen? */
.posts:root {
--color-one: green;
--color-two: yellow;
}
我想在引入类时覆盖根变量。我知道我可以用 JS 实现，但如果可能的话我想使用纯 CSS。
干杯!
我有http://cssnext.io设置的postcss解析器,我试图找到一种方法来设置一个variables.css文件来包含我所有的主题设置.
到目前为止variable.css看起来有几个vars
:root {
--color-white: #FFF;
--color-black: #000;
}
我将其导入到我想要使用这些变量的其他文件中,所以@import './variables.css'或者类似,然后在该文件中使用它,background-color: var(--color-white)例如,但是我得到了以下警告:
变量' - color-white'未定义并且没有后备使用[postcss-custom-properties]
这是我Webpack的scss/css文件配置。
...
{
test: /\.s?css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 2 } },
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: loader => [
require('postcss-import')({ root: loader.resourcePath }),
require('cssnano')(),
require('postcss-cssnext')(),
]
}
},
'sass-loader',
]
}
...
问题是，当我使用cssnext类似gray(100)的函数时，输出CSS文件在该函数所在的位置有一个空值。我想知道我在这里做错了什么。
即
background-color: gray(100);输出到background-color: ;
我是 postcss 的新手，所以我真的不知道它是如何工作的，也不知道如何正确配置它。
我试图使用变量来使用CSSnext插件指定断点.
目前我的css看起来像这样:
@media (width <= var(--screen-md-min)) {
background-color: var(--brand-purple-dark);
}
但是当我尝试运行它时,我在控制台中收到以下警告:
5: Missing @custom-media definition for '--screen-md-min'. The entire rule has been removed from the output.
如果我用实际像素替换var( - screan-md-min),此代码可以正常工作.我确信这只是语法问题,但CSSnext文档并没有非常清楚地使用变量.