# Functions

Gridle offer a bunch of usefull SASS functions that you can use.


## g-states-count

Return the number of states registered

```fn
g-states-count();
```

```scss
$count : g-states-count();
```


## g-current-state

Return the current state map depending in witch g-state you are

```fn
g-current-state();
```

```scss
$state : g-current-state(); // will return the default state

@include g-state(mobile) {
	$state : g-current-state(); // will return the mobile state
}
```


## g-current-state-name

Return the current state name depending in witch g-state you are

```fn
g-current-state-name();
```

```scss
$name : g-current-state-name(); // will return default

.my-cool-element {
	@include g-state(mobile tablet) {
		$name : g-current-state-name(); // will return once mobile and once tablet
		content : #{$name};
	}
}
```


## g-state

Return the state map

```fn
g-state();
g-state( {state} );
```

```scss
$currentState : g-state();
$mobileState : g-state(mobile);

#mobileState {
	content: inspect(g-state(mobile));
}
```

## g-states

Return the states map

```fn
g-states();
```

```scss
@each $stateName, $state in g-states() {
	// ...
}
```


## g-has-state

Return if a state with the passed name exist

```fn
g-has-state( {state} );
```

```scss
@if g-has-state(mobile) {
	// do something...
}
```


## g-state-var

Return a state var value. If no state is provided, will return the var of the current state

```fn
g-state-var( {varName} );
g-state-var( {varName} , {state} );
```

```scss
$current-state-min-width : g-state-var(min-width);
$mobile-state-columns : g-state-var(columns, mobile);

.my-cool-item {
	@include g-state(mobile) {
		content : #{g-state-var(name)}; // will output mobile
	}
}
```

Here's a list of all the variables you can get :

```scss
- name
- min-width
- max-width
- query
- columns
- column-width
- width
- container-width
- container-max-width
```

## g-states-names

Return a list of all the states names registered

```fn
g-states-names();
```

```scss
$statesNames : g-states-names();
@each $name in $statesNames {
	// do something here...
}
```


## g-media-query

Return the media query of the specified state or the current one

```fn
g-media-query();
g-media-query( {state} );
```

```scss
.my-cool-element {
	content : #{g-media-query()};

	@include g-state(mobile) {
		content : #{g-media-query()};
	}
}
```

## g-gutters

Return the value that represent n gutter unit

```fn
g-gutters( {n} )
```

```scss
.my-cool-element {
	padding: g-gutters(2);
}
```

## g-culumns

Return the value that represent n column unit

```fn
g-columns( {n} )
```

```scss
.my-cool-element {
	height: g-columns(4);
}
```

## g-culumns-gutters

Return the value that represent n column + gutter unit

```fn
g-columns-gutters( {n} )
```

```scss
.my-cool-element {
	width: g-columns-gutters(4);
}
```