https://github.com/iocss/crossass-config
A dot-syntax configuration (Map) library for Sass (mixin / function).
https://github.com/iocss/crossass-config
config configuration css function functions library mixin mixins option options sass setting settings
Last synced: 5 months ago
JSON representation
A dot-syntax configuration (Map) library for Sass (mixin / function).
- Host: GitHub
- URL: https://github.com/iocss/crossass-config
- Owner: iocss
- License: mit
- Created: 2014-02-24T21:41:25.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2015-07-01T12:42:32.000Z (almost 11 years ago)
- Last Synced: 2025-03-10T03:56:26.217Z (about 1 year ago)
- Topics: config, configuration, css, function, functions, library, mixin, mixins, option, options, sass, setting, settings
- Language: CSS
- Homepage:
- Size: 203 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Crossass Configuration
A dot-syntax configuration (Map) library for Sass.
```scss
// This is the same as:
// (
// color: (
// fg: black
// )
// )
$include x-config-set('color.fg', black);
body {
color: x-config-get('color.fg'); // black
}
// So you can also get the raw Map by the path.
// x-config-get('color') returns:
// (
// fg: black
// )
```
## Features
* Dot-syntax configuration
* Default configuration support
## Requirement
* [Sass](http://sass-lang.com/) 3.3.0+
## Installation
```sh
bower install crossass-config
```
or just copy ```crossass-config``` folder into your project.
## Usage
### Import
```scss
@import 'bower_components/crossass-config/scss/config';
```
or
```scss
@import 'your-folder/crossass-config/scss/config';
```
### Default configuration setting
```scss
// _your-partial-file.scss
// Default configuration settings
// Passing true to the 3rd parameter,
// the value is assigned to the configuration path as the default
@include x-config-set('color.fg', black, true);
@include x-config-set('color.bg', white, true);
// or assign values to a configuration path by using Map
// @include x-config-set('color', (fg: black, bg: white), true);
```
### Getting configuration setting
```scss
// your-project-file.scss
@import 'bower_components/crossass-config/scss/config';
@import 'your-partial-file';
body {
color: x-config-get('color.fg'); // black
background-color: x-config-get('color.bg'); // white
}
```
### Overriding default configuration
```scss
// your-project-file.scss
@import 'bower_components/crossass-config/scss/config';
@import 'your-partial-file';
// Overriding default configuration
@include x-config-set('color.fg', #666666);
body {
color: x-config-get('color.fg'); // #666666
background-color: x-config-get('color.bg'); // white
}
```
### Compatibility
x-config-get(), x-config-set() can be compatible with Sass variable.
```scss
@import 'bower_components/crossass-config/scss/config';
// Variables
$color-fg: black !default;
$color-bg: white !default;
$color: (
fg: $color-fg,
bg: $color-bg
) !default;
// x-config-set()
@include x-config-set('color', $color, true);
body {
color: x-config-get('color.fg'); // black
background-color: x-config-get('color.bg'); // white
}
```
### Map vs x-config-get(), x-config-set()
```scss
@import 'bower_components/crossass-config/scss/config';
// Map
$config: (
button: (
color: (
fg: white,
bg: blue
)
)
);
// x-config-set()
$include x-config-set('button.color.fg', white);
$include x-config-set('button.color.bg', blue);
// Map
.map {
color: map-get( map-get( map-get( $config, 'button' ), 'color' ), 'fg' );
background-color: map-get( map-get( map-get( $config, 'button' ), 'color' ), 'bg' );
}
// x-config-get()
.x-config {
color: x-config-get('button.color.fg');
background-color: x-config-get('button.color.bg');
}
```