是否可以使用 sass 函数在媒体查询中从父宽度动态获取子高度? [复制]
Posted
技术标签:
【中文标题】是否可以使用 sass 函数在媒体查询中从父宽度动态获取子高度? [复制]【英文标题】:Is it possible to get child height from parent width dynamically on media query using by sass function? [duplicate] 【发布时间】:2016-04-28 21:53:29 【问题描述】:我想使用 sass 函数动态设置各种屏幕尺寸的子项高度,而不是手动编写。我知道我们可以使用 css position: absolute;
属性或简单地使用 jQuery 代码来获取结果,但我想使用 sass 函数来实现子项值。
**我们可以将宽度作为百分比值,但是在给出百分比值时,如果不给出position: absolute;
,则无法得出高度。
检查我的笔:http://codepen.io/nikhil8krishnan/pen/adqbeR?editors=1000
检查下面的代码,这里我在每个屏幕尺寸上手动写入项目值。
输出
.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;
如何使用 sass 函数编写这些代码?有没有可能请分享想法。
【问题讨论】:
实际上你不需要总是为每个断点更改 .child 。一旦你将它们设置为 width: 25% 就足够了。只需更改容器(您甚至可以使用 width: 80% after 768px) 那我怎样才能得到子项的高度呢? Sass 没有获取任何元素的高度或宽度的功能,因为 Sass 只编译为 CSS。你所要求的必须是 CSS 的一个特性。 不,Sass 不是“强大的专业级 CSS 扩展”,它是一个将 SASS/SCSS 编译为 CSS 的 CSS 预处理器。这就是一切。既然它从不发送到浏览器,那么您究竟希望 Sass 如何知道您页面上任何元素的宽度? @cimmanon 在这里查看sass-lang.com 你知道我为什么使用“强大的专业级 CSS 扩展”,谁告诉你 sass 发送到浏览器,我只希望编译后的 css 结果有效使用 sass,每个人都在使用 sass,这意味着他们不会在浏览器中运行 sass/发送到浏览器,它将他们的代码编译为 css,这就是他们称为 CSS 预处理器的原因。 【参考方案1】:要自动导出媒体查询,您可以使用以下函数
$viewports: ( 100%, 600px, 800px, 1000px);
@each $viewport in $viewports
@media (min-width: #$viewport)
.container
width: $viewport;
.child
height: $viewport/4;
width: $viewport/4;
一个例子:http://www.sassmeister.com/gist/e87c4121d584776355cd
【讨论】:
很好,但这个答案只适用于视口大小和容器宽度的相同值。但是这里两者都不一样,那它是怎么做到的呢?以上是关于是否可以使用 sass 函数在媒体查询中从父宽度动态获取子高度? [复制]的主要内容,如果未能解决你的问题,请参考以下文章
scss 简单的媒体查询Sass mixin可以让你考虑像素宽度,但输出是在ems中。