VIP20/10_sass/1_style.scss

@import './reset.scss';

//$定义变量 都放在顶部
$bgColor: #000;
$keyName: 'color';
$whiteColor: #eee;
/* 
  div 元素
  多行注释 编译后 .css文件中会保留
*/
/*! 
  强制显示 编译后 .min.css文件中 会保留
*/
div{
  background: $bgColor;
  //#{变量}  差值语句 属性名如果是变量 可以使用
  //一般不建议这样操作
  #{$keyName}: #eee;
  width: 100px;
}

//选择器嵌套
#list{
  width: 100px;
  height: 20px;
  li{
    font-size: 12px;
    p{
      // padding-top: 30px;
      // padding-left: 10px;\
      //属性嵌套 : 和 { 之间要有一个空格
      padding: {
        top: 30px;
        left: 10px;
      }
    }
  }
  //引用父元素选择器
  &-inner{
    color: $bgColor;
  }
}

.link{
  color: $bgColor;
  &:hover {
    color: #eee;
  }
}


// .login-btn{
//   width: 100px;
//   height: 40px;
//   line-height: 40px;
//   text-align: center;
//   border-radius: 5px;
//   color: $whiteColor;
//   background: $bgColor;
// }
// .submit-btn{
//   width: 50px;
//   height: 50px;
//   line-height: 50px;
//   text-align: center;
//   border-radius: 5px;
//   color: $whiteColor;
//   background: $bgColor;
// }

//定义一个混合宏
//定义的时候可以带参数 参数可以设定默认值
@mixin logo-btn($width:20px,$height:20px,$lineHeight:20px){
  width: $width;
  height: $height;
  line-height: $lineHeight;
  text-align: center;
  border-radius: 5px;
  color: $whiteColor;
  background: $bgColor;
}
//通过@include 去调用设置的混合宏
.login-btn{
  @include logo-btn(100px,40px ,40px )
}
.submit-btn{
  @include logo-btn(50px,50px ,50px )
}
.del-btn{
  @include logo-btn()
}
//调用 混合宏 传参 可以指定参数的名字和数值
.aa-btn{
  @include logo-btn($width: 300px)
}

.wrapper{
  width: 100px;
  height: 100px;
  font-size: 10px;
  .inner{
    //@extend 继承某一个选择器的样式
    //编译的时候 会将相同的样式 转化成分组选择器
    //如果继承的选择器 有子选择器  会继承过来
    @extend .wrapper;
    padding: 20px;
  }
}

#main{
  @extend .wrapper;
  margin: 10px;
}
/* 
  绝对值： abs(-10px)
  四舍五入：round(5.5)
  向上取整：ceil(5.5)
  向下取整：floor(5.5)
  百分比：percentage(30px / 100px)
  最小值： min(1,2,3)
  最大值：max(1,2,3)
*/
$width: 6;
.content{
  width: percentage(30px / 100px);
}
//定义函数
@function changeWidth($width){
  @return $width * 2
}

div{
  width: changeWidth(30px);
}

$list: 1px solid #000;
$colorList: blue,red,yellow;
p{
  border: $list;
  //nth($list,index)获取列表第几项
  background: nth($colorList,3);
}

//@if 指令 与js相同
$length: 0;
li{
  @if $length < 1{
    font-size: 12px;
  } @else if $length > 1 and $length < 4{
    font-size: 10px;
  } @else {
    font-size: 2px;
  }
}
//@for 类似于js中的for循环
//through 包括
@for $i from 1 through 3{
  .list-#{$i}{
    width: $i * 100px;
  }
}
//to 不包括
@for $i from 1 to 3{
  .none-#{$i}{
    width: $i * 50px;
  }
}