Famo.us 和外部 CSS 样式

Question

我现在正在阅读 famo.us 文档，为我的网站创建两列网格以及页眉和页脚。

我了解到样式在 JavaScript 对象中设置为键值对。我想知道如何仍然保留通过外部样式表设置样式的能力。

例如：

layout.header.add(new Surface({
    size: [undefined, 100],
    content: "Header",
    properties: {
        backgroundColor: 'gray',
        lineHeight: "100px",
        textAlign: "center"
    }
}));

如果我想 link 到样式表并在那里设置样式，我可能会说：

layout.header.add(new Surface({
    classes: ['header']
}));

然后在我的 CSS 中写：

.header {
    background-color: gray;
    line-height: 100px;
    text-align: center;
}

但是在 JS 对象中设置了其他属性，例如 "size"，我想在我的样式表中替换 "height" 和 "width"。另外，我想知道我是否可以使用百分比或 ems 来设计我的应用程序。

任何提示或参考资料都将不胜感激。也许没有支持的方法来执行此操作，因为据我了解 famo.us' 的目标是抽象出 DOM 并在 JS 中完成所有这些工作。在那种情况下，我想知道如何在 famo.us 中处理我的项目，以便工作流程感觉接近我习惯的工作流程。

Answer 1

表面属性中允许的所有内容都可以放入样式 sheet class。 size不能，其实也不想放到CSS。使用 famo.us 的全部意义在于能够通过代码而不是 CSS 样式 sheet 来控制位置、大小和转换等内容。如果您想在代码中动态更改大小，那么有很多方法，例如使用函数而不是固定数组。

例如这段代码

new Surface({   content: content,
                size: [100, 100],
                properties: {
                    backgroundColor: "rgb(183, 232, 183)",
                    color: "rgb(51, 51, 51)",
                    fontSize:'10pt',
                    textAlign: 'center',
                    paddingTop:'2pt',
                    border: '1pt solid rgb(135, 192, 140)'
                }
            });

转换为

 new Surface({   content: content,
                size: [100, 100],
                classes:['select-button']
            });

css 风格 sheet

 .select-button{
                    background-color: rgb(183, 232, 183);
                    color: rgb(51, 51, 51);
                    font-size:10pt;
                    text-align: center;
                    padding-top:2pt;
                    border: 1pt solid rgb(135, 192, 140);
                }

希望这对您有所帮助

Famo.us 和外部 CSS 样式

Famo.us and external CSS styling

javascript

css

famo.us