# Working With Stylesheets

# mix.css()

mix.css(input: string | string[], output: string)

PostCSS => CSS.

PostCSS options, refer to balm.config.styles.options.

# mix.sass()

interface HookOptions {
  src?: object; // = `gulp.src`
  sass?: object;
}

mix.sass(input: string | string[], output: string, options?: HookOptions)

Sass => CSS.

🌰 For example:

const balm = require('balm');

balm.config = {
  // Your project config
};

balm.go(mix => {
  mix.sass('app/styles/*.scss', 'dist/css', {
    sass: {
      // Sass options: overwrite `balm.config.styles.sassOptions`
    }
  });
});

# mix.less()

interface HookOptions {
  src?: object; // = `gulp.src`
  less?: object;
}

mix.less(input: string | string[], output: string, options?: HookOptions)

Less => CSS.

🌰 For example:

const balm = require('balm');

balm.config = {
  // Your project config
};

balm.go(mix => {
  mix.less('app/styles/*.less', 'dist/css', {
    less: {
      // Less options: overwrite `balm.config.styles.lessOptions`
    }
  });
});

# mix.url()

mix.url(input: string | string[], output: string)

Update images and fonts references path.

🌰 For example:

const balm = require('balm');

balm.config = {
  paths: {
    source: {
      img: 'images',
      font: 'fonts'
    },
    target: {
      img: 'img',
      font: 'font'
    }
  }
  // Other Options...
};

balm.go(mix => {
  mix.sass('app/styles/*.scss', 'dist/css');
  mix.url('dist/css/*.css', 'dist/css');
  // Output:
  // '../images' => '../img'
  // '../fonts' => '../font'
});

# mix.sprite()

interface SpriteOptions {
  extname?: string;
  imageBasePath?: string;
  imageTarget?: string; // NOTE: overwrite `BalmJS.config.paths.target.img`
  spriteRetina?: boolean;
  spriteParams?: object;
}

mix.sprite(input: string[], output: string, spriteOptions?: SpriteOptions)

CSS sprites.

🌰 For example:

const balm = require('balm');

balm.config = {
  // Your project config
};

balm.go(mix => {
  mix.sprite(['icons'], 'dist/img');
});
Last Updated: 10 days ago