Installation and Usage of Sass on Windows

1. Download the Ruby installer from:
   http://rubyinstaller.org/downloads/ — Look for the version with x64 on it. Be sure the Ruby installer is version is 1.9x. SASS doesn't work on 2.x versions.
2. Open the Command Line (CMD) by pressing the Windows Key + R and type: CMD, then press Enter.
   
   
3. Type the following command in the CMD:
   gem install sass
   
   
   It will take a few seconds to install SASS. At the end you will see this in CMD.
   
   That's it! SASS is now installed on your machine.

      Procedure to use SASS

1. Create a Demo folder anywhere on your PC.
   
   
2. Inside that folder create the two sub folders /css and /scss.
   
   
3. Create a .scss file.
   
   Go into the /scss folder and create a file called: demo-styles.scss.
   
   
   
   Notice the file extension .scss. This is your SASS file.
4. Return to the CMD line. In CMD you need to go to the Demo Folder as in the following:

       Return to the CMD line. 

       

       In CMD you need to go to the Demo Folder as in the following:

 

  Make SASS “watch” to your /scss and /css folders.

 
 

   

    6. Edit the .scss file and watch SASS compile it into a .css file.

        

    Make SASS “watch” to your /scss and /css folders.

 
 
   7. Edit the .scss file and watch SASS compile it into a .css file. 

  

Updated CSS File



Included 'reset.scss' File in demo-styles.scss

You have now leveled up by knowing how to use SASS.

Demo Example

Happy Coding Guys!

Media Queries For Mobile, Laptop, Desktop And iPad For Making Responsive Website Design (RWD)

Media Query

Media query is a CSS technique introduced in CSS3.

It uses the @media rule to include a block of CSS properties only if a certain condition is true.

Media queries enable us to create a responsive website design (RWD) where specific styles are applied to small screens, large screens and anywhere in between. The media query syntax allows for the creation of rules that can be applied depending on device characteristics.

General Syntax of Media Query

@media (query) {
   /* CSS Rules used when query matches */
}

While there are several different items we can query on, the ones used most often for responsive web design are min-width, max-width, min-height and max-height.

Let's have a look at device specific queries:

1. Mobile
There are two different resolution for laptops.

1. /* For 480 Resolution */  
2. @media only screen   
3. and (min-device-width : 320px)   
4. and (max-device-width : 480px)  
5. { /* STYLES GO HERE */}  

 

Generally, this dimension is recommended for mobile:

1. /* For 640 Resolution */  
2. @media only screen   
3. and (min-device-width : 360px)   
4. and (max-device-width : 640px)  
5. { /* STYLES GO HERE */}  

2. Laptop
There are two different resolution for laptops.

1. /* For 1024 Resolution */  
2. @media only screen   
3. and (min-device-width : 768px)   
4. and (max-device-width : 1024px)  
5. { /* STYLES GO HERE */}  

1. /* For 1366 Resolution */  
2. @media only screen   
3. and (min-width: 1030px)   
4. and (max-width: 1366px)  
5. { /* STYLES GO HERE */}  

Generally, this dimension is recommended for laptop,
3. Desktop

1. @media only screen   
2. and (min-width: 1370px)  
3. and (max-width: 1605px)  
4. { /* STYLES GO HERE */}  

 

4. iPad

1. /* If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work. */  
2. /* Orientation : Landscape */  
3. @media only screen   
4. and (orientation : landscape)   
5. and (-webkit-min-device-pixel-ratio: 1)  
6. and (min-device-width : 768px)   
7. and (max-device-width : 1024px)   
8. { /* STYLES GO HERE */}  

1. /* Orientation : Portrait */  
2. @media only screen   
3. and (orientation : portrait)   
4. and (-webkit-min-device-pixel-ratio: 1)   
5. and (min-device-width : 768px)   
6. and (max-device-width : 1024px)  
7. { /* STYLES GO HERE */}  

I have attached sample .css file in this article. Guys, keep exploring. If you have any queries, please feel free to contact me.

Sample CSS File