Prius
A hybrid CSS preprocessor/runtime
Install / Use
/learn @prototypal-io/PriusREADME
Prius
Prius enables you to write next generation CSS in your apps today. It operates via a hybrid runtime and preprocessor. Prius is currently intended for usage inside Ember CLI applications, however it was built to be used with any JS framework.
Demo
<img src="http://g.recordit.co/5TGVaKLbLv.gif">Installation
ember install prius
Add {{prius-meta}} to the <head> of your app/index.html & tests/index.html
TODO: instructions for general usage.
Features
CSS custom properties and var
Example usage
.button {
font-size: var(--font-size, 1em);
}
.button-large {
--font-size: 2em;
}
Planned features
Custom functions
Example usage
:root {
--primary-color: red;
}
.button {
color: darken(var(--primary-color)); /* `darken` is a custom function */
}
Experimental features we're investigating
Mixins
As proposed by the Polymer team: https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
Example usage
:root {
--my-mixin: {
padding: 0.5em;
--color: red;
}
}
.button {
@apply(--my-mixin);
background-color: var(--color);
}
Related Skills
node-connect
349.0kDiagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps
frontend-design
109.4kCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
openai-whisper-api
349.0kTranscribe audio via OpenAI Audio Transcriptions API (Whisper).
qqbot-media
349.0kQQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。
