0
Welcome Guest! Login
0 items Join Now

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

    • shenk's Avatar
    • shenk
    • Hero Rocketeer
    • Posts: 424
    • Thanks: 11

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

    Posted 7 years 1 week 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: 7 years 1 week ago by shenk.

Time to create page: 0.081 seconds