Scss - Get Container Width as Height

SCSS - Get container width as height

I found it. Sass interpolation does the work. Its possible to use sass interpolation to reference a sibling property.

.container {
  width: 100%;

  img {
    width: 100%;
    height: calc(#{width} * 1.778);
  }
}

SASS:How do I get width & height of a parent in a nested decleration?

.thumb {
    width: 120px;
    height:120px;
    .content {
        width:100%;
        height:100%;
        display:block;
    }
}

You may or may not need display:block in the parent element as well, depending on its type.

How to get the CSS width/height of a container element?

You can use the parentNode property to find the parent of an element. You can then use the offsetWidth and offsetHeight properties to find the width/height of the element.

var parentElem = document.getElementById('test').parentNode;
var parentWidth = parentElem.offsetWidth;
var parentHeight = parentElem.offsetHeight;

how to write the variable of width and height in scss. so i can importe them into the html div

You can't do this. An SCSS file needs to be compiled to a CSS file first, but these variables in the SCSS file also have to be used somewhere in the SCSS file. If you just set some variables in the SCSS file but don't use them, it won't work (i.e., the compiled CSS file will be empty). Do it like this:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <img src="https://images.pexels.com/photos/802112/pexels-photo-802112.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Spider leads">
</body>
</html>

styles.scss

$widthsize: 100px;
$heightsize: 100px;

img {
    width: $widthsize;
    height: $heightsize;
}

styles.css

The CSS file is generated automatically when you compile the SCSS file.

img {
  width: 100px;
  height: 100px;
}

/*# sourceMappingURL=styles.css.map */

SASS use screen height to calculate remaining vh after a set height div

You can't know which percentage of the vh represents a fixed height in css and by extension in sass/scss but you can leave the fixed height in 209.53 (I would recommend to round that value since css will do it anyway) and use css calc. Then your image would have the following height:

height: calc(100vh - 209.53px);

Other solution would be using absolute position and a margin top. Or better, use flex:

.parent {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;

   .fixed-height-element {
        flex: 0 0 209.53px;    
    }

   .image {
        flex: 2;
    }
}

Get the width of an element and use it to set its height

This can be done with pure CSS, it's called intrinsic ratios. It requires doing math, but with SASS and Compass you can just say what you want and get the result! :D

You'll need a wrapper:

<div class=iframe-container>
  <iframe></iframe>
</div>

SASS + Compass:

@import toolkit

.iframe-container
  +intrinsic-ratio(16/9, 90%)

Demo: http://sassbin.com/gist/5983091/

As you can see, the awesome Toolkit Compass extension is used.

Scss - Get Container Width as Height