Yak*_*ako 2 sass mixins vertical-alignment css3 compass-sass
好吧,一切都在问题中...我正在使用登录表单,我希望在身体中心垂直对齐.我是sass和指南针的新手,我很难为此使用正确的mixin ...
HTML代码非常简单:
<body>
<div>
A div of unknown height to be vertically centered.
</div>
</body>
这是使其工作的CSS3代码:
<style>
html{
height:100%;
}
body{
height:100%;
display:flex;
align-items:center;
/* I spared all the compatibility properties for the different browsers */
}
</style>
___EDIT:
我想到了这样的事情,但我意识到我误解了使用SASS的父选择器的方法:
div.ieVerticalCentered {
body.verticalCentering & {
height:100%;
display:-ms-flexbox;
display:-moz-box;
display:-webkit-box;
display:-webkit-flex;
display:flex;
-ms-align-items:center;
-moz-align-items:center;
-webkit-align-items:center;
align-items:center;
html.verticalCentering & {
height:100%;
}
}
}
因此,核心问题是:当子元素具有特定类时,是否可以将特定样式应用于父元素.
据我所知,静态CSS不可能,但可以用JS完成.刚刚发现Sass,我想知道是否可以考虑好事......
Dan*_*rne 14
我使用这个mixin来集中内容.它使用转换,因此不支持所有版本的IE.
MIXIN:
@mixin centre($axis: "both"){
position:absolute;
@if $axis == "y"{
top:50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
@if $axis == "x"{
left:50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
@if $axis == "both"{
top:50%;
left:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
用法:
Y axis : @include centre(y);
X axis : @include centre(x);
Both axis : @include centre;
工作示例:小提琴