我在一个 Web 应用程序中发现了下面的代码,它正在生成如下所述的 css 无法理解这个包含的工作方式,据我所知,包含是一种函数调用,但我可以看到 { } 里面有一些代码。
sass 代码
.sendfile-header-title {
@include viewport(small) {
text-align: center;
display: block;
border-bottom: solid 1px $secondary-gray;
background: red;
}
}
css 生成代码
@media only screen and (max-width: 735px) and (max-device-width:768px) {
.sendfile-header-title {
text-align:center;
display: block;
border-bottom: solid 1px #e0e0e0;
background: red;
}
}
最佳答案
您使用@include 来调用混入。
让我用一个代码示例来解释这个过程:
//This way you define a mixin
@mixin viewport($breakpoint) {
@if $breakpoint == small {
@media only screen and (max-width: 735px) and (max-device-width:768px) {
@content;
}
}
@else ...
}
//This way you use a mixin
.sendfile-header-title {
@include viewport(small) {
//code ritten here will replace the @content inside the mixin
//so the output in the css file will be a @media query applied to this element with the following code inside
text-align: center;
display: block;
border-bottom: solid 1px $secondary-gray;
background: red;
}
}
//The css output will be:
//the @media query
@media only screen and (max-width: 735px) and (max-device-width:768px) {
//the element
.sendfile-header-title {
//the code
text-align:center;
display: block;
border-bottom: solid 1px #e0e0e0;
background: red;
}
}
关于css - sass @include 以不同的方式工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38342834/