SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Feb 2013
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    question about less variables with media queries.

    In a site i'm developing atm i have been using lots of variables for width/height etc, thought this would make the responsive part easier and cleaner to handle. But I have a problem.

    Lets do an example:

    I have a div:

    Code HTML4Strict:
    <div class="box"></div>

    And the less/css:

    Code CSS:
    @size: 100px;
     
    .box{
    width: @size;
    height: @size;
    }
    Then I thought by just changing the variable in a media querie I could easily resize elements for different screen sizes, was I wrong?

    When I try something like this it doesnt work I get "variable not defined" when I update the site in my browser.

    Code CSS:
    @media only screen and (min-width: 768px) {
        @size: 100px;
    }
     
    @media only screen and (max-width: 767px) {
        @size: 50px;
    }
     
    .box{
    width: @size;
    height: @size;
    }

    Do i have to include the .box{} in every querie?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I don't use less but I know that's its complied before use so you can't have variables affecting anything once the page is complied because then it is plain css only.

    The variables in your media query will only apply to content within that media query. If you don't have matching rules in that media query then that variable is not applied.

    You can test it out easily here.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's not the same but you can do something like this:

    Code:
    @smallscreen: ~"screen and (max-width: 479px)";
    @mediumscreen: ~"screen and (min-width: 480px) and (max-width: 767px)";
    @size:500px;
    
    .box {
    width: @size;
    height: @size;
    @media @smallscreen { width:50px;height: 50px }
    @media @mediumscreen {  width:350px;height: 350px }
    }

    Which will compile to this:

    Code:
    .box {
      width: 500px;
      height: 500px;
    }
    @media screen and (max-width: 479px) {
      .box {
        width: 50px;
        height: 50px;
      }
    }
    @media screen and (min-width: 480px) and (max-width: 767px) {
      .box {
        width: 350px;
        height: 350px;
      }
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •