test.scss文件
*{
margin: 0;
padding: 0;
}
// 变量的声明
$width:500px;
$height:500px;
$bg-color:#000;
// 混合器的使用
@mixin common($w:null,$h:null,$bg:null) {
width: $w;
height: $h;
background-color: $bg;
}
//兼容各个浏览器
@mixin autoprefix($name, $t) {
-webkit-#{$name}: $t;
-moz-#{$name}: $t;
-o-#{$name}: $t;
#{$name}: $t;
}
@mixin common1{
// display: flex;
// justify-content: space-between;
@include autoprefix(display,flex);
@include autoprefix(justify-content,space-between);
}
// 选择器继承来精简CSS
.commonp{
@include common(100px,100px,yellow);
}
//媒体查询
@mixin medias($media,$color){
@media #{$media}{
@include common(null,null,$color);
}
}
.name{
//混入
@include common($width,$height,$bg-color);
@include common1;
@include medias((min-width:0) and(max-width:768px),red);
@include medias((min-width:769px),rgb(229, 255, 0));
&-p{
//继承css
@extend .commonp;
}
&-p1{
//继承css
@extend .commonp;
}
}
.space{
@include autoprefix(display,flex);
@include common(100%,300px,rgb(0, 255, 149));
@include medias((min-width:0) and(max-width:768px),rgb(47, 0, 255));
@include medias((min-width:769px),rgb(187, 255, 0));
&-p{
@include common(80px,80px,rgb(23, 26, 25));
@include autoprefix(align-self,flex-end);
}
&-p1{
@include common(80px,80px,rgb(47, 33, 170));
@include autoprefix(align-self,flex-start);
}
}
test.scss生成对应test.css文件
* {
margin: 0;
padding: 0;
}
.commonp, .name-p, .name-p1 {
width: 100px;
height: 100px;
background-color: yellow;
}
.name {
width: 500px;
height: 500px;
background-color: #000;
-webkit-display: flex;
-moz-display: flex;
-o-display: flex;
display: flex;
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-o-justify-content: space-between;
justify-content: space-between;
}
@media (max-width: 768px) {
.name {
background-color: red;
}
}
@media (min-width: 769px) {
.name {
background-color: #e5ff00;
}
}
.space {
-webkit-display: flex;
-moz-display: flex;
-o-display: flex;
display: flex;
width: 100%;
height: 300px;
background-color: #00ff95;
}
@media (max-width: 768px) {
.space {
background-color: #2f00ff;
}
}
@media (min-width: 769px) {
.space {
background-color: #bbff00;
}
}
.space-p {
width: 80px;
height: 80px;
background-color: #171a19;
-webkit-align-self: flex-end;
-moz-align-self: flex-end;
-o-align-self: flex-end;
align-self: flex-end;
}
.space-p1 {
width: 80px;
height: 80px;
background-color: #2f21aa;
-webkit-align-self: flex-start;
-moz-align-self: flex-start;
-o-align-self: flex-start;
align-self: flex-start;
}
test.html测试
<div class="name">
<p class="name-p"></p>
<p class="name-p1"></p>
</div>
<div class="space">
<p class="space-p"></p>
<p class="space-p1"></p>
</div> ```