├── LICENSE
├── README.md
├── ReSass.gif
├── ReSass.jpg
└── resass.scss
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Ahmad Awais
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | ReSass
5 | Sass SCSS Responsive Media Queries Mixin for Eight Different Screen Sizes! 💻📱🖥
6 | |
7 |
8 |
9 | |
10 | A FOSS (Free & Open Source Software) project. Maintained by @AhmadAwais.
11 | |
12 |
13 |
14 | 
15 |
16 | |
17 |
18 |
19 |
20 | ## ⚡️ `ReSass`
21 |
22 | 
23 |
24 |
25 | ReSass (`Re`sponsive`Sass`) creates responsive media queries for seven different screen sizes. These are based on min-width which means if x (x could be `240`, `320`, `480`, `768`, `1024`, `1140`, `1280`, or `1500`) is the size then your CSS will affect any device with screen width x and above.
26 |
27 | #### USAGE:
28 | 
29 | CSS content goes inside {} brackets. These mixins should be used inside a class definition.
30 |
31 | ```css
32 | @include r(240) { }
33 | @include r(320) { }
34 | @include r(480) { }
35 | @include r(768) { }
36 | @include r(1024) { }
37 | @include r(1140) { }
38 | @include r(1280) { }
39 | @include r(1500) { }
40 | ```
41 |
42 | **For example:**
43 | The following CSS will hide the .header on screen width 320px and above.
44 | ```css
45 |
46 | .header {
47 | @include r(320) { display: none; }
48 | }
49 | ```
50 |
51 | ## ⚡️ Getting Started
52 |
53 | Getting started is very easy.
54 |
55 | 1. Download the raw [`resass.scss`](https://git.io/resass)
56 | 2. Import the [`resass.scss`](/resass.scss) in your main .SCSS file → `@import "path/to/resass";`
57 | 3. Now use any or all of the mixins inside a class' CSS.
58 | 4. Here's a fun [implementation at CodePen →](https://codepen.io/ahmadawais/full/eEzpgo/)
59 |
60 | ## ⚡️ License
61 |
62 | MIT licensed. Content is copyright of AhmadAwais.com
63 |
64 |
65 |
66 | ---
67 | 
68 |
69 | ### 🙌 [THEDEVCOUPLE PARTNERS](https://TheDevCouple.com/partners)
70 |
71 | This open source project is maintained by the help of awesome businesses listed below. What? [Read more about it →](https://TheDevCouple.com/partners)
72 |
73 |
74 |
75 |  |
76 |  |
77 |
78 |
79 |  |
80 |  |
81 |
82 |
83 |
84 |
85 |
86 |
87 | For anything else, tweet at @MrAhmadAwais
88 |
89 |
90 |
98 |
99 |
--------------------------------------------------------------------------------
/ReSass.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahmadawais/ReSass/0a56d57304343a5775c93798149889c78ee448b0/ReSass.gif
--------------------------------------------------------------------------------
/ReSass.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ahmadawais/ReSass/0a56d57304343a5775c93798149889c78ee448b0/ReSass.jpg
--------------------------------------------------------------------------------
/resass.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * ReSass.
3 | *
4 | * MIXIN: Responsive Media Queries.
5 | *
6 | * Creates responsive media queries for seven different screen sizes.
7 | * These are based on min-width which means if x is the size then your
8 | * CSS will affect any device with screen width x and above.
9 | *
10 | * USAGE:
11 | * @include r(240) { }
12 | * @include r(320) { }
13 | * @include r(480) { }
14 | * @include r(768) { }
15 | * @include r(1024) { }
16 | * @include r(1140) { }
17 | * @include r(1280) { }
18 | * @include r(1500) { }
19 | *
20 | * CSS content goes inside {} brackets. These mixins should be used inside
21 | * a class definition. For example:
22 | *
23 | * The following CSS will hide the .header on screen width 320px and above.
24 | * .header {
25 | * @include r(320) { display: none; }
26 | * }
27 | *
28 | * @author Ahmad Awais (https://github.com/ahmadawais)
29 | * @link https://github.com/ahmadawais/ReSass.git
30 | * @version 1.0.0
31 | */
32 | @mixin r( $point ) {
33 | @if $point==240 {
34 | @media ( min-width: 240px ) {
35 | @content;
36 | }
37 | }
38 | @if $point==320 {
39 | @media ( min-width: 320px ) {
40 | @content;
41 | }
42 | }
43 | @if $point==480 {
44 | @media ( min-width: 480px ) {
45 | @content;
46 | }
47 | }
48 | @if $point==600 {
49 | @media ( min-width: 600px ) {
50 | @content;
51 | }
52 | }
53 | @if $point==768 {
54 | @media ( min-width: 768px ) {
55 | @content;
56 | }
57 | }
58 | @if $point==1024 {
59 | @media ( min-width: 1024px ) {
60 | @content;
61 | }
62 | }
63 | @if $point==1140 {
64 | @media ( min-width: 1140px ) {
65 | @content;
66 | }
67 | }
68 | @if $point==1280 {
69 | @media ( min-width: 1280px ) {
70 | @content;
71 | }
72 | }
73 | @if $point==1500 {
74 | @media ( min-width: 1500px ) {
75 | @content;
76 | }
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
