Less, Mixins & @media

For ref:
    http://www.asp.net/mvc/overview/performance/bundling-and-minification

    http://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/

    http://www.sitepoint.com/5-useful-sass-mixins-bootstrap/

    http://stackoverflow.com/questions/15369254/bootstrap-make-a-css-rule-apply-only-on-desktop-version
    
    The background color 

    @my-var-color: #ffd800;
    .itaiTest
    {
        background-color: @my-var-color
    }


    Note the following places in my code, 
    and read here: http://www.asp.net/mvc/overview/performance/bundling-and-minification 


http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
Image rounded (see corners)
lessStep1

Image circle (see corners)
lessStep2

Image thumbnail (see corners)
lessStep3

Getting back CSS from the less (as a response)
lessStep4

Resize window to chnage width more and less then 400px to see changes

    /*For small resolution screens bg color is yellow - and font color red*/
    @media (max-width: 400px) {
    color: red;
    background-color: yellow;
    }


    /*For large resolution screens bg color is green - and font color red*/
    @media (min-width: 200px) {
    color: red;
    background-color: green;
    }