VIP24/12_sass/list.scss

// @import 'max.scss';
$bgcolor: #ff0000;
$keyName: 'color';
$whiteColor: #000000;
/* 
sass使用 $ 符号来标识变量
*/
//sass变量可以存储以下信息：字符串、数字
//、颜色值、布尔值、列表null值
/*! sass有作用域 */
/* 
  多行注释 会在css文件里生成 但是不会再min.css文件里生成
  单行注释 不会在css文件里生成
  强制注释 会在css和min.css文件里生成
*/
/* 
  插值语句 
  #{变量} 属性名如果是变量可以使用这种
  一般 不建议这么操作
*/
div{
  width: 100px;
  height: 100px;
  background: $bgcolor;
  #{$keyName}: $bgcolor;
}
div2{
  width: 200px;
  height: 200px;
  background: $bgcolor;
}

//选择器的嵌套

#list{
  width: 100px;
  height: 100px;
  li{
    font-size: 12px;
    p{
      // padding-top: 20px;
      // padding-left: 30px;
      //属性嵌套 : 和 { 中间一定要有一个空格
      padding: {
        top: 20px; 
        left: 40px
      }
    }
  }
  //& 引用父选择器
  &-inner{
    color: $bgcolor;
  }
}
.link{
  color: $bgcolor;
  &:hover{
    color: #ccc;
  }
}

// .login-btn{
//   width: 100px;
//   height: 40px;
//   line-height: 40px;
//   text-align: center;
//   border-radius: 5px;
//   color: $whiteColor;
//   background: $bgcolor;
// }
// .submit-btn{
//   width: 50px;
//   height: 20px;
//   line-height: 20px;
//   text-align: center;
//   border-radius: 5px;
//   color: $whiteColor;
//   background: $bgcolor;
// }
//定义的一个混合宏
//定义的时候可以带有参数  参数 也可以设置默认值
@mixin logo-btn($width: 200px,$height: 100px,$lheight: 100px){
  width: $width;
  height: $height;
  line-height: $lheight;
  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,30px)
}
.del-btn{
  @include logo-btn()
}

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

#main{
  @extend .wrapper;
  margin: 10px
}

$width: 5.9px;

.content{
  // width: ceil($width);
  // height: abs(-10px);
  width: percentage(30 / 100);
}
//@function 定义函数
@function changeWidth($width){
  @return $width * 2
}
.last{
  width: changeWidth(4);
}
$list: 1px solid #000;

div{
  width: changeWidth(40px);
  border-top: $list;
}
section{
  border-bottom: $list;
}
//列表要用逗号分割
$colorList: red,blue,pink,green;

p{
  //nth($list,index)通过索引获取列表当中的第index项
  color: nth($colorList,2)
}

$length: 2;
li{
  //@if 指令 (与js中的if效果相同)
  //sass 中的逻辑判断 and or not
  @if $length > 0 and $length < 3{
    font-size: 12px;
  } @else if $length >= 3{
    font-size: 16px;
  }@else{
    font-size: 20px;
  }
}

//through 包含3
@for $i from 1 through 3 {
  .list-#{$i}{
    width: $i * 100px;
  }
}   
//to 不包含3
@for $i from 1 to 3{
  .none-#{$i}{
    width: $i * 100px;
  }
}
//each in 循环列表
@each $var in $colorList {
  .content-#{$var}{
    color: $var;
  }
};

$a: 3;
@while $a > 0 {
  .none_#{$a} {
    width: 2px * $a;
  }
  $a: $a - 1;
}