0
Welcome Guest! Login
0 items Join Now

Learing SCSS:Make a fixed positioined div's width a portion of container

Last Post
Search Topic
    • shenk's Avatar
    • shenk
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 11

    Learing SCSS:Make a fixed positioined div's width a portion of container

    Posted 8 years 8 months ago
    • In template Abrosia, I am trying to make a fixed positioned sidebar 45% width of its container, and being responsive.
      The difficulties are: you can't use width:45% because for fixed position element, the percentage always bases on the root element(<html>), the width of which is changing.
      Pratically, because I know all the breakpoints for this template, I can calculate the width in various case and put them in media queries, like:


      @include breakpoint(large-desktop-range) { // 75rem*16px = 1200, 1200*45% = 540
    .size-45{position:fixed;width:540px}
}

@include breakpoint(desktop-range) {    // 60rem*16px=960, 960*45% = 432
    .size-45{position:fixed;width:432px}
}


      But I don't feel like calculating, I want SCSS to do the calculating for me. So for SCSS learning purpose, I'm just wondering if there is any better way to do this, maybe just in one line like:

      .size-45{position:fixed;width:([i]containerWidth[/i])*45%}

      containerWidth could be an expression calculating the actual container's width, in Ambrosia's case, the container is .g-container.
    • Last Edit: 8 years 8 months ago by shenk.
    #1224744

Time to create page: 0.049 seconds