SCSS常用的几个特性

<template>
  <div class="main">
   main
  
    <span class="hello">xxx</span>
    <div class="as"></div>
     <div class="d"></div>
      <div class="dd"></div>
        <div class="ddd"></div>
         <div class="dddd"></div>
            <div class="ddddd">ddddd</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>


<style scoped lang="scss">
@import "@/scss/index.scss";
$base-color:red;  //定义变量
$base-color:blue !default;
$side:bottom;
$sides:top;
.main{
  width: 1920px;
   justify-content: space-around;
  display:flex;
 color: $base-color;
 border-#{$side}:2px solid blue;  //定义字符
 border-#{$sides}:2px solid blue;
 .hello{
   font-size: 40px;
   &:hover{
     color: blue;
   }
 }
}
.as{
  width: 100px;
  height: 100px;
  background-color: red;
}
@mixin myCSS{   //定义公共的
  color: orange;
  background-color: palevioletred;
}
.d{

  @extend .as;
  @include myCSS;
}

@mixin myScssa($myColor){  //传参
  color: $myColor;
  background-color: $myColor;
}

.dd{
  width: 100px;
  height: 100px;
  @include myScssa(yellow);  //使用传参
}

@mixin myScssa($myColor:red){
  color: $myColor;
  background-color: $myColor;
}
.ddd{
  width: 100px;
  height: 100px;
  @include myScssa(green);
}

@mixin myScssd($myColor:blue,$myBackgroundColor:yellow){
  color: $myColor;
  background-color: $myBackgroundColor;
}

.dddd{
  width: 100px;
  height: 100px;
  @include myScssd(yellow,blue )
}
@function double($n){  //定义函数方法
  @return $n*2;
}

.ddddd{
  width: 100px;
  height: 100px;
  font-size: double(20px);
 background-color: gray;
 @if 1==2{     //if判断
   color: blue;
 }@else if 3>5{
   color: red;
 }@else {
   color: yellow;
 }
}








</style>