A custom css preprocessor
npm install sparkcssbash
npm install -g sparkcss
`
This will install SparkCSS globally so that you can use it directly from the command line.
Or you can install it in your Local project using npm:
`bash
npm install sparkcss
`
This will make SparkCSS local to your project
Core Features
$3
Variables in SparkCSS are declared using the $ symbol, similar to SCSS. They can store reusable values, like colors or spacing units, which can be used throughout your CSS.
`scss
$primary-color: #3498db;
.my-class {
color: $primary-color;
}
`
$3
Snippets in SparkCSS work like SCSS mixins but are defined using @snippet and applied using @apply. This allows you to create reusable chunks of code with optional arguments.
`scss
@snippet button-style($bg-color) {
background-color: $bg-color;
padding: 10px;
border-radius: 5px;
}
.button {
@apply button-style(#ff6347);
}
`
$3
With SparkCSS, you can create responsive styles using the @responsive directive. This allows for easy, consistent application of responsive rules.
`scss
@responsive {
.my-container {
width: 100%;
@breakpoint(sm) {
width: 50%;
}
}
}
`
$3
SparkCSS provides utility classes that are very flexible. Utility classes can be generated using simple keywords to speed up your development workflow.
`html
This is a utility class example
`
Using SparkCSS in Your Project
1. Compile SparkCSS to CSS: Use the command line to convert your SparkCSS code into standard CSS. To do this, use the sparkup command:
`bash
sparkup
`
if you don't specify an output file and path for css, Spark will create one for you using the same name as the input.spark file and the output file will be in the same directory as the input:
`bash
sparkup
`
This will do the same thing as above.
2. Include Compiled CSS in HTML: Add the generated CSS to your HTML file:
`html
`
CLI Integration
The CLI allows you to interact with SparkCSS directly from the command line.
- Compile Command:
`bash
sparky
`
- Watch Command (for development purposes):
`bash
sparky watch
`
- Check Version
`bash
sparkup --version
sparkup -v
`
- Generate Utility Classes
To generate Utility classes, you use the spark-utils command followed by the Utility flags you'd want to generate. For example, to generate box-model utility classes:
`bash
spark-utils --box-models
`
This will generate a corresponding CSS file with all the generated utility classes.
You can specify the path where the output CSS files can go using the --output where is the path to the specifed output file to be. If no path is specifed, SparkCSS will generate the output file in the same directory this command is called in. For example:
`bash
spark-utils --box-models --output ./output.css
`
output.css can be any name. It doesn't have to be that. It's just generated by default.
To see a more detailed list of the Utility Classes, use the --help command. For example:
`bash
spark-utils --help
`
This command will show all the known SparkCSS utility class commands.
These commands help automate the conversion of .sparkcss files into .css` files for easy integration.