Skip to content

Commit

Permalink
Merge branch 'release/v1.2.0'
Browse files Browse the repository at this point in the history
  • Loading branch information
Daniel Tonon committed Mar 6, 2017
2 parents 6a81e76 + c6771a8 commit 796ddd4
Show file tree
Hide file tree
Showing 4 changed files with 115 additions and 91 deletions.
110 changes: 46 additions & 64 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ An extremely powerful but easy to use Sass media query mixin

This media query mixin is a powerful tool that lets you easily create far more complex media queries than you would have ever attempted to do with plain css. It also makes your code far easier to maintain through it's ability to take simple media query variables.

If you enjoy using mq-scss, try my new [mq-js](https://www.npmjs.com/package/mq-js) npm module. This allows you to use mq-scss style media queries inside your JavaScript files.

##Contents

* [Installation](#installation)
Expand All @@ -27,6 +29,7 @@ This media query mixin is a powerful tool that lets you easily create far more c
* [em conversion](#em-conversion)
* [Defining breakpoints](#defining-breakpoints)
* [Bonus retina display mixin](#bonus-retina-display-mixin)
* [Change Log](#change-log)

##Installation

Expand Down Expand Up @@ -222,39 +225,8 @@ Also, `orientation` only accepts the strings `'portrait'` and `'landscape'`.

###Changing which value comes first

If your mind works in more of a smallest screen up to largest screen sort of way, then placing the largest value in the first slot is probably a bit counterintuitive for you.

If this is the case, you can change it so that the smallest value is what comes first by altering the `$mq-largest-first` variable. To change it, define the setting before the mq-scss import statement.

````````scss
$mq-largest-first: false; /*defaults to true*/
@import '../node_modules/mq-scss/mq';
````````

Setting `$mq-largest-first` to `false` will mean that all media queries that are made using the mq-scss mixin that have 2 values in them must have the _smaller_ value come first instead of the larger value.

This will not alter the final output, it will only alter how you input the information.

`````````````scss
//Using the "inside" range with the $mq-largest-first variable set to "false"

.element {
background: red;

@include mq(inside, 600px, 1024px){
background: blue;
}
}
`````````````

`````````````css
outputted css:
As of version 1.2.0, you no longer need to worry about which value you use first. Place the breakpoint values in any order and the mixin will figure it out from there. No need to use the `$mq-largest-first` setting any more.

.element { background: red; }
@media screen and (max-width: 1024px) and (min-width: 601px) {
.element { background: blue; }
}
`````````````

##MQ variables

Expand All @@ -270,7 +242,7 @@ What if you decide later on that you actually want the sidebar to go full width

###Enhanced maintainability

You state the media query once at the top of your SASS file and then you can re-use it as many times as you like. If you need to change it later on, you change it once and it updates across the entire style sheet. In combination with the ability to name the variables based on the objective that they are trying to achieve, MQ variables make working with media queries far easier to maintain.
You state the media query once at the top of your Sass file and then you can re-use it as many times as you like. If you need to change it later on, you change it once and it updates across the entire style sheet. In combination with the ability to name the variables based on the objective that they are trying to achieve, MQ variables make working with media queries far easier to maintain.

###How to use an MQ variable

Expand All @@ -279,18 +251,18 @@ You state the media query once at the top of your SASS file and then you can re-
I've come up with a bit of a naming convention for them based on BEM. This is how I write a Media Query variable:

`````````````scss
$MQ-[element]--[is/not]-[objective]: ([range], [larger-width], [smaller-width]);
$MQ-[element]__[property]--[objective]: ([range], [larger-width], [smaller-width]);
`````````````

Here is the breakdown of what each part means
Here is the breakdown of what each part means. I tend to use camelCase for each group to keep the grouping clear.

**$MQ** - MQ at the start tells us it's a media query variable (helps when scanning through the code)

**[element]** - The current element name. So for `.car__door` [element] would be `door`
**[element]** - The current element name. So for `.car__door` [element] would be `door`.

**[is/not]** - A binary true or false declaration. It can be something like "has" or "no" if that makes more sense grammatically. It just has to have an obvious true/false meaning to it. (Most of the time it will be "is")
**[property]** - This one is optional. It represents the main css property that you are catering for in the media query.

**[objective]** - a name for the objective you are trying to achieve. Try to keep it short as possible but still clear. I tend to use camelCase for this to keep the grouping clear.
**[objective]** - a name for the objective you are trying to achieve. Try to keep it as short as possible but still clear.

**([range], [larger-width], [smaller-width])** - the exact same as what you would put between the brackets of the media query mixin if you were doing it inline.

Expand All @@ -301,24 +273,24 @@ Here is an example of how to use it (the "not" examples are a little unnecessary
`````````````scss
SASS:

$MQ-module--is-altColor: (inside, 1024px, 600px);
$MQ-module--not-altColor: (outside, 1024px, 600px);
$MQ-module__color--main: (inside, 1024px, 600px);
$MQ-module__color--alt: (outside, 1024px, 600px);

.module {
@include mq($MQ-module--not-altColor){
@include mq($MQ-module__color--main){
background: red;
}

@include mq($MQ-module--is-altColor){
@include mq($MQ-module__color--alt){
background: blue;
}

&--green {
@include mq($MQ-module--not-altColor){
@include mq($MQ-module__color--main){
background: green;
}

@include mq($MQ-module--is-altColor){
@include mq($MQ-module__color--alt){
background: grey;
}
}
Expand Down Expand Up @@ -355,15 +327,15 @@ Media Query "or" statements are only possible using an MQ variable.
`````````````scss
SASS:

$MQ-element--is-blue:
$MQ-element__color--alt:
(inside, 1024px, 980px),
(max, 600px)
;

.element {
background: red;

@include mq($MQ-element--is-blue){
@include mq($MQ-element__color--alt){
background: blue;
}
}
Expand All @@ -383,24 +355,24 @@ This technique is most useful when you are targeting a module that is inside a c
`````````````scss
SASS:

$MQ-element--is-blue:
$MQ-element__color--main:
(inside, 1024px, 980px),
(max, 600px)
;

$MQ-element--not-blue:
(min, 1024px),/*$MQ-element--is-blue doesn't go any higher than 1024px*/
(inside, 980px, 600px)/*$MQ-element--is-blue doesn't target screen sizes between 980px and 600px.*/
/*$MQ-element--is-blue covers all screen sizes below 600px so no further queries are needed for the counter query*/
$MQ-element__color--alt:
(min, 1024px),//*$MQ-element__color--blue doesn't go any higher than 1024px*/
(inside, 980px, 600px)//*$MQ-element__color--blue doesn't target screen sizes between 980px and 600px.*/
//*$MQ-element__color--blue covers all screen sizes below 600px so no further queries are needed for the counter query*/
;

.element {
@include mq($MQ-element--is-blue){
background: blue;
}
@include mq($MQ-element--not-blue){
@include mq($MQ-element__color--main){
background: red;
}
@include mq($MQ-element__color--alt){
background: blue;
}
}
`````````````

Expand All @@ -420,24 +392,24 @@ outputted css:
So the scenario is that you have some styles you want to apply only when both the side bar is full width and the sub heading is hidden. This is the easiest way to do that:

`````````````scss
$MQ-sideBar--is-fullWidth: (max, 600px);
$MQ-subHeading--is-hidden: (inside, 800px, 400px);
$MQ-sideBar__width--full: (max, 600px);
$MQ-subHeading--hidden: (inside, 800px, 400px);

.module {
&__sideBar {
width: 33.33%;
@include mq($MQ-sideBar--is-fullWidth){
@include mq($MQ-sideBar__width--full){
width: 100%;
}
}
&__subHeading {
@include mq($MQ-subHeading--is-hidden){
@include mq($MQ-subHeading--hidden){
display: none;
}
}
&__mainHeading {
@include mq($MQ-sideBar--is-fullWidth){
@include mq($MQ-subHeading--is-hidden){
@include mq($MQ-sideBar__width--full){
@include mq($MQ-subHeading--hidden){
background: red;
}
}
Expand All @@ -462,9 +434,7 @@ outputted css:

I'm looking into a more streamlined way of incorporating media query "and" statements without having to nest them inside one another like this but currently this is the best available method.

**Warning:**

Any of the range types that contain `outside` in their name do not support this media query nesting technique.
As of version 1.2.0 the `outside` range types also support this feature.

##em conversion

Expand Down Expand Up @@ -535,3 +505,15 @@ It can be used like this:
}
}
````````

## Change log

### v1.2.0

- Removed the need for the `$mq-largest-first` variable. You can now state double value breakpoint values in any order.
- Outside range types can now be safely nested and take advantage of the Sass nested media queries functionality.
- Updated the MQ variable syntax to what I currently use.

### v1.1.0

- Added the ability to state the smaller value first by setting an `$mq-largest-first` variable to `false`.
37 changes: 36 additions & 1 deletion _functions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,4 +24,39 @@
$base: _mq-strip-units($base);
}
@return ($pxval / $base) * 1em;
}
}

//Turn string into a number
//http://hugogiraudel.com/2014/01/15/sass-string-to-number/
@function number($string) {
// Matrices
$strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
$numbers: 0 1 2 3 4 5 6 7 8 9;

// Result
$result: 0;

// Looping through all characters
@for $i from 1 through str-length($string) {
$character: str-slice($string, $i, $i);
$index: index($strings, $character);
@if not $index {
@warn "Unknown character `#{$character}`.";
@return false;
}
$number: nth($numbers, $index);
$result: $result * 10 + $number;
}

@return $result;
}

//For getting the number values in ratio based ranges
@function get-start($string){
$string: unquote($string);
@return number( str-slice($string, 1, 1) );
}
@function get-end($string){
$string: unquote($string);
@return number( str-slice($string, str-length($string), str-length($string)) );
}
57 changes: 32 additions & 25 deletions _mq.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,42 @@ $mediaQuery: ();
$mq-ems: false !default;
$mq-em-base: 16px !default;

$mq-largest-first: true !default;

@import '_functions';

@function calculateMQ ($range, $setting1: null, $setting2: 0){
@function calculateMQ ($range, $setting1: null, $setting2: null){

//swaps the settings around if largest-first is set to false
@if ($setting2 != null and not $mq-largest-first){
$temp: $setting1;
$setting1: $setting2;
$setting2: $temp;
}
$swap-values: false;

$setting2: if($setting2 == null, 0, $setting2);
@if ($setting2 != null){

$mediaString: '';
@if (type-of($setting1) == 'string'){

$setting1_1: get-start($setting1);
$setting1_2: get-end($setting1);

$setting2_1: get-start($setting2);
$setting2_2: get-end($setting2);

$swap-values: $setting1_1 / $setting1_2 < $setting2_1 / $setting2_2;
} @else {
@if ($setting1 < $setting2){
$swap-values: true;
}
}

$first: 'first';
$second: 'second';
//Swaps the settings around
@if ($swap-values){
$temp: $setting1;
$setting1: $setting2;
$setting2: $temp;
}

@if (not $mq-largest-first){
$first: 'second';
$second: 'first';
} @else {
$setting2: 0;
}

$mediaString: '';

@if ($range == 'orientation'){
@if ($setting1 != 'landscape' and $setting1 != 'portrait'){
@error '"orientation" range only accepts the values "landscape" and "portrait". Currently providing the value "#{$setting1}".';
Expand All @@ -53,10 +64,6 @@ $mq-largest-first: true !default;
@error '"#{$range}" range requires the setting "#{$setting1}" to be a pixel value';
}
}
@if (($setting2 != 0) and ($setting1 < $setting2)){
//if setting 2 is higher than setting 1
@error '"#{$range}" range requires the #{$first} width setting (#{$setting1}) to be higher than the #{$second} width setting (#{$setting2})';
}
} @else {
//else if it's a ratio...
@if ((($setting2 != 0) and (type-of($setting2) != string))){
Expand Down Expand Up @@ -96,16 +103,16 @@ $mq-largest-first: true !default;

//*2 values given*/
inside : 'screen and (max-width: #{$setting1}) and (min-width: #{$setting2Plus})',
outside : 'not screen and (max-width: #{$setting1}) and (min-width: #{$setting2Plus})',
outside : 'screen and (max-width: #{$setting2}), screen and (min-width: #{$setting1Plus})',

inside-height : 'screen and (max-height: #{$setting1}) and (min-height: #{$setting2Plus})',
outside-height : 'not screen and (max-height: #{$setting1}) and (min-height: #{$setting2Plus})',
outside-height : 'screen and (max-height: #{$setting2}), screen and (min-height: #{$setting1Plus})',

inside-ratio : 'screen and (max-aspect-ratio: #{$setting1}) and (min-aspect-ratio: #{$setting2})',
outside-ratio : 'not screen and (max-aspect-ratio: #{$setting1}) and (min-aspect-ratio: #{$setting2})',
outside-ratio : 'screen and (max-aspect-ratio: #{$setting2}), screen and (min-aspect-ratio: #{$setting1})',

inside-device-ratio : 'screen and (max-device-aspect-ratio: #{$setting1}) and (min-device-aspect-ratio: #{$setting2})',
outside-device-ratio : 'not screen and (max-device-aspect-ratio: #{$setting1}) and (min-device-aspect-ratio: #{$setting2})',
outside-device-ratio : 'screen and (max-device-aspect-ratio: #{$setting2}), screen and (min-device-aspect-ratio: #{$setting1})',
), $range);

@return $mediaString;
Expand Down Expand Up @@ -173,7 +180,7 @@ $mq-largest-first: true !default;
}

@mixin retina($density: 2) {
@media
@media
only screen and (min-device-pixel-ratio: $density),
only screen and (min-resolution: $density * 96ppi),
only screen and (min-resolution: $density * 1dppx) {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mq-scss",
"version": "1.1.2",
"version": "1.2.0",
"description": "An extreamly powerful but easy to use Sass media query mixin",
"main": "_mq.scss",
"repository": {
Expand Down

0 comments on commit 796ddd4

Please sign in to comment.