What's new in SparkCSS V1.5
Support for Arrays
You can define arrays directly in your SparkCSS using the @array directive. Values are dynamic and can be of any type
@array: paddingValues ['10px', '2rem', '4em'];
.my-class {
padding: paddingValues[2] // '4em'
};
@snippet: example() {
padding: paddingValues[0]; // 10px
}
JavaScript Integration
The JavaScript integration allows developers to interact with SparkCSS styles dynamically. You can update variables, switch themes, or even inject new snippets programmatically, enabling real-time styling changes.
// Example: Dynamically update a CSS variable
SparkCSS.update('@variable primary-color', '#ff5733');
// Example: Apply a new theme
SparkCSS.applyTheme({
'primary-color': '#3498db',
'secondary-color': '#2ecc71',
});
New @palette directive
The @palette directive in SparkCSS v1.5 simplifies the process of creating and managing color themes. By defining a palette, you can generate consistent and reusable color schemes across your project, ensuring design uniformity and making theme switching effortless
// Define a palette
@palette: theme {
primary: #3498db;
secondary: #2ecc71;
accent: #e74c3c;
background: #f5f5f5;
};
Stronger Validation
v1.5 introduces enhanced validation for properties inside @snippet, ensuring that only valid CSS properties and values are used. This feature helps catch errors early, maintain consistency, and enforce best practices in your custom snippets.
// Define a snippet with stronger validation
@snippet: button($color, $padding) {
background-color: $color;
padding: $padding;
border: none;
transition: all 0.3s;
};
Optimization
SparkCSS v1.5 includes built-in support for minifying and optimizing your CSS during compilation, eliminating the need for external tools. This feature ensures your stylesheets are lightweight, efficient, and ready for production with minimal effort.
.button{background-color:#3498db;
padding:10px 20px;border:none;border-radius:5px;
transition:all .3s ease}.card
{background-color:#f5f5f5;
padding:20px;box-shadow:0 4px 6px rgba(0,0,0,.1)}
New @scope directive
The @scope directive in v1.5 helps avoid class name conflicts by scoping styles to a specific component or module. It automatically prefixes your styles with a unique namespace, ensuring modularity and better maintainability in large projects.
// Define a scoped style block
@scope: button {
.primary {
background-color: #3498db;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
}The upcoming SparkCSS v1.5 is packed with exciting features to enhance your workflow! This version will introduce support for arrays, stronger validation for properties inside @snippet, and syntax highlighting through a custom VSCode extension. You'll also be able to generate color themes effortlessly using @palette and enjoy built-in support for minifying and optimizing your CSS, reducing file size without external tools. Additionally, v1.5 will bring JavaScript integration, allowing you to dynamically modify styles using SparkCSS syntax. While version 1.4 remains the current stable release, these powerful updates are just around the corner, stay tuned!
The Modern CSS Preprocessor
SparkCSS is a revolutionary CSS preprocessor that brings together the best of both worlds: the power of SCSS-like features and the speed of utility-first CSS frameworks like Tailwind. Designed with modern developers in mind, SparkCSS reimagines the way we write and manage stylesheets by combining custom syntax capabilities with a rich library of utility classes, making it easier to build responsive, scalable, and maintainable websites.
Our mission is simple: to empower developers by providing a seamless development experience that balances the flexibility and power of advanced preprocessor features with the speed and efficiency of utility-first CSS. Whether you're working on a small project or a large-scale application, SparkCSS offers the tools you need to create beautiful, responsive designs quickly and effortlessly.
Utility-First Approach
Combine the power of utility classes with SCSS-like features for rapid development.
Advanced Directives
Create complex styles using custom directives and powerful preprocessor features.
Reusable Components
Build and maintain a library of reusable CSS components and patterns.
Smart Optimization
Automatic CSS optimization and minification for production-ready code.
Custom Functions
Create your own CSS functions for complex calculations and transformations.
Developer Tools
Built-in debugging tools and source maps for easier development.
Our Philosophy
Simplicity Meets Power
We believe in making CSS development both efficient and enjoyable. SparkCSS combines the simplicity of utility classes with the power of advanced preprocessor features, giving you the best of both worlds.
Developer Experience First
Every feature in SparkCSS is designed with developer experience in mind. From intelligent autocomplete to comprehensive documentation, we ensure that using SparkCSS is a smooth and productive experience.