## Functions

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


### gridle_states_count

Return the number of states registered

```fn
gridle_states_count();
```

```scss
$count : gridle_states_count();
```


### gridle_current_state

Return the current state map depending in witch gridle_state you are

```fn
gridle_current_state();
```

```scss
$state : gridle_current_state(); // will return the default state

@include gridle_state( mobile ) {
	$state : gridle_current_state(); // will return the mobile state
}
```


### gridle_current_state_name

Return the current state name depending in witch gridle_state you are

```fn
gridle_current_state_name();
```

```scss
$name : gridle_current_state_name(); // will return default

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


### gridle_column_width

Return the width in percentage of one/more column(s)

```fn
gridle_column_width();
gridle_column_width( {columns} );
gridle_column_width( {columns} , {state} );
```

```scss
$width-of-1-column : gridle_column_width();
$width-of-3-columns : gridle_column_width( 3 );
$width-of-1-column-in-mobile : gridle_column_width( 1, mobile );
```


### gridle_get_state

Return the state map

```fn
gridle_get_state();
gridle_get_state( {state} );
```

```scss
$defaultState : gridle_get_state();
$mobileState : gridle_get_state( mobile );

#mobileState {
	content: inspect(gridle_get_state( mobile ));
}
```


### gridle_has_state

Return if a state with the passed name exist

```fn
gridle_has_state( {state} );
```

```scss
@if gridle_has_state( mobile ) {
	// do something...
}
```


### gridle_get_state_var

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

```fn
gridle_get_state_var( {varName} );
gridle_get_state_var( {varName} , {state} );
```

```scss
$default-state-context : gridle_get_state_var( context );
$mobile-state-gutter-width : gridle_get_state_var( gutter-width , mobile );

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

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

```scss
- name
- min-width
- max-width
- query
- classes // true or false if the classes need to be generated for this state
- context
- gutter-width
- gutter-height
- gutter-top
- gutter-right
- gutter-bottom
- gutter-left
- direction
- name-multiplicator
- states-classes // true or false if need to generate the states-classes
```


### gridle_get_states_names

Return a list of all the states names registered

```fn
gridle_get_states_names();
```

```scss
$statesNames : gridle_get_states_names();
@each $name in $statesNames {
	// do something here...
}
```


### gridle_get_driver

Return the current driver used like default or flex...

```fn
gridle_get_driver();
```

```scss
$driver : gridle_get_driver();
@if $driver == flex {
	// do something...
}
```


### gridle_is_driver

Return true of false depending if the specified driver is the current one

```fn
gridle_is_driver( {drivers} );
```

```scss
@if gridle_is_driver( flex coco ) {
	// do something when the used driver is flex or coco
}
```


### gridle_get_media_query

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

```fn
gridle_get_media_query();
gridle_get_media_query( {state} );
```

```scss
.my-cool-element {
	content : #{gridle_get_media_query()};

	@include gridle_state(mobile) {
		content : #{gridle_get_media_query()};
	}
}
```