rootstrap-library/mixins/screens.less

Rootstrap library mixins for less.js

// initalize screen mixin

	.screen(@_, ...){}

// 	mixin: get-screens();
// 	outputs styles added throughout project in the defined media queries.
// 	this mixin assumes existence of three list vars in your stream
// 	@screen-list, @screen-list-min, and @screen-list-max.
// 	if not using gulp utility to add vars to stream,
// 	they must be added manually.

	.get-screens()
	{
	    @screen-list-length: length(@screen-list);

	    // output default styles with no media query
	    .screen('default');

	    // 'and up' loop
	    .and-up-loop(@screen-list-length);
	    .and-up-loop(@n, @i: 1) when (@i =< @n)
	    {
	        @screen: extract(@screen-list, @i);
	        @screen-min: extract(@screen-list-min, @i);
			@screen-max: extract(@screen-list-max, @i);
	        @query: ~"screen and (min-width: @{screen-min})";

	        .output();
	        .output() when not (@screen-min = '')
	        {
	        	@media @query {
	                .screen('@{screen}-and-up');
	        	}
	        }
			// create psuedo 'only' action for screens with no max
			.output() when (@screen-max = '') and not (@screen-min = '')
			{
				@media @query {
	                .screen('@{screen}');
	        	}
			}

	      // next screen
	      .and-up-loop(@n, (@i + 1));
	    }

	    // 'and under' loop
	    .and-under-loop(@screen-list-length);
	    .and-under-loop(@n, @i: 1) when (@i =< @n)
	    {
	        @screen: extract(@screen-list, @i);
			@screen-min: extract(@screen-list-min, @i);
	        @screen-max: extract(@screen-list-max, @i);
	        @query: ~"screen and (max-width: @{screen-max})";

	        .output();
	        .output() when not (@screen-max = '')
	        {
	        	@media @query {
	                .screen('@{screen}-and-under');
	        	}
	        }
			// create psuedo 'only' action for screens with no min
			.output() when (@screen-min = '') and not (@screen-max = '')
			{
				@media @query {
	                .screen('@{screen}');
	        	}
			}

	      // next screen
	      .and-under-loop(@n, (@i + 1));
	    }

	    // loop through each screen, disregarding the first and last (mobile and desktop)
	    .only-loop(@screen-list-length);
	    .only-loop(@only-loop, @i: 2) when (@i < @only-loop)
	    {
	        // create all possible segments for each screen
	        .inner-loop(@only-loop);
	        .inner-loop(@inner-loop, @j: @i) when (@j < @inner-loop)
	        {
	            @screen-min-name: extract(@screen-list, @i);
	            @screen-min: extract(@screen-list-min, @i);
	            @screen-max-name: extract(@screen-list, @j);
	            @screen-max: extract(@screen-list-max, @j);
	            @query: ~"screen and (min-width: @{screen-min}) and (max-width: @{screen-max})";

	            @media @query {

	                .output();
	                .output() when (@screen-min-name = @screen-max-name)
	                {
	                    .screen('@{screen-min-name}');
	                }
	                .output() when not (@screen-min-name = @screen-max-name)
	                {
	                    .screen('@{screen-min-name}-@{screen-max-name}');
	                }
	            }

	            // next segment
	            .inner-loop(@inner-loop, (@j + 1));
	        }

	      // next screen
	      .only-loop(@only-loop, (@i + 1));
	    }

	} // end get-screens