The following bash script will create a main sass stylesheet style.scss and then create additional sass stylesheets for all devices (mobile.scss, ipad.scss, desktop.scss, wide.scss, iphone.scss) in a folder called media-queries.
In the end, we will combine stylesheets for all devices into one by importing them into our main style.scss.
I have divided the code for different devices in their own stylesheets becuase it keeps it is neat and organized and i prefer it that way. Sass does its magic and takes all the code from different files using @import and gives me one neat stylesheet. In the HTML, i only need to link to one stylesheet, the one that Sass generated for me.
1#!/bin/bash
2# Create Media Queries
3mkdir media-queries
4
5touch media-queries/mobile.scss
6echo -e "
7/* Smartphones (portrait and landscape) ----------- */
8@media only screen
9and (min-device-width : 320px)
10and (max-device-width : 480px) {
11/* Styles */
12}
13
14/* Smartphones (landscape) ----------- */
15@media only screen
16and (min-width : 321px) {
17/* Styles */
18}
19
20/* Smartphones (portrait) ----------- */
21@media only screen
22and (max-width : 320px) {
23/* Styles */
24}
25" >> media-queries/mobile.scss
26
27touch media-queries/ipad.scss
28echo -e "
29/* iPads (portrait and landscape) ----------- */
30@media only screen
31and (min-device-width : 768px)
32and (max-device-width : 1024px) {
33/* Styles */
34}
35
36/* iPads (landscape) ----------- */
37@media only screen
38and (min-device-width : 768px)
39and (max-device-width : 1024px)
40and (orientation : landscape) {
41/* Styles */
42}
43
44/* iPads (portrait) ----------- */
45@media only screen
46and (min-device-width : 768px)
47and (max-device-width : 1024px)
48and (orientation : portrait) {
49/* Styles */
50}
51" >> media-queries/ipad.scss
52
53touch media-queries/desktop.scss
54echo -e "
55/* Desktops and laptops ----------- */
56@media only screen
57and (min-width : 1224px) {
58/* Styles */
59}
60" >> media-queries/desktop.scss
61
62touch media-queries/wide.scss
63echo -e "
64/* Large screens ----------- */
65@media only screen
66and (min-width : 1824px) {
67/* Styles */
68}
69" >> media-queries/wide.scss
70
71touch media-queries/iphone4.scss
72echo -e "
73/* iPhone 4 ----------- */
74@media
75only screen and (-webkit-min-device-pixel-ratio : 1.5),
76only screen and (min-device-pixel-ratio : 1.5) {
77/* Styles */
78}
79" >> media-queries/iphone4.scss
80
81touch style.scss
82echo -e "
83// Mobile
84@import 'media-queries/mobile';
85
86//iPads
87@import 'media-queries/ipad';
88
89//Desktops and Laptops
90@import 'media-queries/desktop';
91
92// Wide (Large) screen
93@import 'media-queries/wide';
94
95//iPhone
96@import 'media-queries/iphone4'
97" >> style.scss
Let’s save our code in a file called media-queries.sh
To run the script, run the follwing command in terminal, in the same folder your script is in.
bash media-queries.sh
Here are all the files created:
.
├── media-queries
│ ├── desktop.scss
│ ├── ipad.scss
│ ├── iphone4.scss
│ ├── mobile.scss
│ └── wide.scss
└── style.scss
1 directory, 6 files
Now that you have these stylesheets created, you can add the styles for the intended device in their own stylesheet. The files have the queries added and commented so you will know what are the breakpoints and if it is going to be portrait or landscape.
You will also need to convert the .scss file to .css. Look up Sass. If you write CSS code, you should be doing it in Sass. If you don’t want to use Sass for the variables, or mixins, or nesting.. do it for the simple fact that you can combine multiple stylesheets into one.
1sass style.scss:style.css
The first file you give is the input file (the Sass file you want to convert) separated by a : and then the name of the output file (the CSS file to save as).
Additionally, you can add the --watch flag so that it keeps automatically generating the .css file as you save changes.
1sass --watch style.scss:style.css