scss开发常见基本用法总结

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>  ```