cirrus-ui/main.example.scss

A lightweight UI framework written in SCSS

// Example main file used to configure Cirrus.
// You can either use this for your Sass project or configure it to generate the classes you want instead (view step 2).

// 1. Import Cirrus with config.
// For example, here I want to exclude all absolute positioning classes from being generated.
// Import any dependencies you need and then initialize the config with the overrided file
@use "node_modules/cirrus-ui/src/cirrus-ext" as * with (
    $config: (
        excludes: (
            'ABSOLUTES',
        ),
        opacity: null, // Disable default opacity classes
        extend: (
            // Add your own
            opacity: (
                25: .25,
                50: .5,
                75: .75,
            )
        )
    ),
);

// Custom plugin example
@include utility(
    $base-class-name: 'bg',
    $class-value-pairs: (
        papayawhip: (
            background-color: papayawhip,
        ),
        peachpuff: (
            background-color: peachpuff,
        ),
        salmon: (
            background-color: salmon,
        ),
        tomato: (
            background-color: tomato,
        ),
    ),
    $variants: (
        'hover',
    ),
    $override: '!important'
);

// 2. (Optional) Add a new build to the Gulp file.
// If you want to generate class files using Gulp, you can specify a new task like this with `main.scss` as a source.

// gulp.task('test', () => {
//     return gulp
//         .src(['src/main.scss'])
//         .pipe(sass.sync().on('error', function (err) {
//             sass.logError.call(this, err);
//         }))
//         .pipe($.concat('cirrus.css'))
//         .pipe($.header(head))
//         .pipe($.size())
//         .pipe(gulp.dest('./dist/'))
//         .on('error', (err) => {
//             console.error(err);
//             process.exit(1);
//         });
// });