-5

enter image description here

I want to set child item height in various screen size as dynamically using sass function instead of writing manually. I know we can use css position: absolute; property or simply use jQuery code to get the result, but I want to achieve child item value using with sass function.

**We can give width as percentage value, but height can't result without giving position: absolute; when giving percentage value.

Check my pen : http://codepen.io/nikhil8krishnan/pen/adqbeR?editors=1000

Check below codes , Here I'm writing item value manually on each screen size.

Outputs

.container {
  background-color: red;
  margin: auto;
  text-align: center;
  color: #fff;
  font-size: 0;
}

.child {
  display: inline-block;
  border-right: solid 1px #fff;
  background-color: green;
}

/* container width and child width & height is set by manually on each screen size*/
/*max to 767px*/
.container {
  width: 100%;
}

.child {
  width: 25%;
  height: 25%;
}

@media (min-width: 768px) {
  .container {
    width: 600px;
  }

  .child {
    height: 150px;
    width: 150px;
  }
}
@media (min-width: 980px) {
  .container {
    width: 800px;
  }

  .child {
    height: 200px;
    width: 200px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1000px;
  }

  .child {
    height: 250px;
    width: 250px;
  }
}

How can I write those codes with sass functions? Is it possible please share thoughts.

Krish
  • 1,884
  • 2
  • 16
  • 40
  • actually you don't need to always change .child for every breakpoint. Once you've set them with width: 25% is enough. Just change the container (you can even use width: 80% after 768px) – Fabrizio Calderan Jan 22 '16 at 10:24
  • Then how can i get child item height ? – Krish Jan 22 '16 at 10:26
  • There is no function to get the height or width of any element with Sass because Sass only compiles to CSS. What you're asking for has to be a feature of CSS. – cimmanon Jan 22 '16 at 19:56
  • No, Sass is not a "powerful professional grade CSS extension", it is a CSS **preprocessor** that compiles SASS/SCSS to CSS. That's all it will ever be. Since it is never sent to the browser, how in the world would you expect Sass to know the width of any element on your page? – cimmanon Jan 23 '16 at 13:48
  • @cimmanon check here http://sass-lang.com/ you know why I'm using "powerful professional grade CSS extension", And who told you sass sent to the browser, I just only want the compiled css result that work with sass, Everybody working with sass that mean they dont run sass in browser / sent to browser, Its compiling their codes to css thats why they know as CSS preprocessor. – Krish Jan 23 '16 at 14:25

1 Answers1

-2

To automate the export of media queries you could use the following function

$viewports: ( 100%, 600px, 800px, 1000px);

@each $viewport in $viewports {
  @media (min-width: #{$viewport}) {
    .container {
      width: $viewport;
    }

    .child {
      height: $viewport/4;
      width: $viewport/4;
    }
  }
}

An example: http://www.sassmeister.com/gist/e87c4121d584776355cd

Vangel Tzo
  • 8,885
  • 3
  • 26
  • 32
  • Great, but this answer is possible only for same value both view-port size and container width. But here both are different, so how it done? – Krish Jan 23 '16 at 13:29