sass的再学习

• scss是sass的超集,升级版本；支持嵌套语法，不要使用空格语法；

/* 定义变量与值 */
$bgcolor: lightblue;
$textcolor: rgb(223, 223, 252);
$fontsize: 18px;

/* 使用变量 */
div {
  width: 100px;
  // height: 100px;
  background-color: $bgcolor;
  >.div1{
    width: 50px;
    height: 50px;
    background-color: red;
    &_con1{
      height: 25px;
      background-color: yellowgreen;
    }
    .con1{
      background-color: pink;
    }
  }
  >.div2{
    width: 50px;
    height: 50px;
    background-color: green;
  }
  /* & 用在伪类和伪元素比较合适 */
  &:hover{
    background-color: yellow;
  }
  // 兄弟元素
  +span{
    color: skyblue;
  }
  .sp1+&{
    border: 1px solid pink;
  }
}
-----------------------------------编译后
@charset "UTF-8";
/* 定义变量与值 */
/* 使用变量 */
div {
  width: 100px;
  background-color: lightblue;
  /* & 用在伪类和伪元素比较合适 */
}
div > .div1 {
  width: 50px;
  height: 50px;
  background-color: red;
}
div > .div1_con1 {
  height: 25px;
  background-color: yellowgreen;
}
div > .div1 .con1 {
  background-color: pink;
}
div > .div2 {
  width: 50px;
  height: 50px;
  background-color: green;
}
div:hover {
  background-color: yellow;
}
div + span {
  color: skyblue;
}
.sp1 + div {
  border: 1px solid pink;
}

/*# sourceMappingURL=index.css.map */

• &连接符 会独立出来一个类名 适合用于伪类选择器

div {
    width: 100px;
    height: 100px;
    background-color: aqua;
    // 一种属性写法 sass也可以解析
    background:{
        repeat:'norepeat';
        position:{
            x:100px;
            y:100px;
        }
    }
}
---------------------------
div {
  width: 100px;
  height: 100px;
  background-color: aqua;
  background-repeat: "norepeat";
  background-position-x: 100px;
  background-position-y: 100px;
}

/*# sourceMappingURL=a.css.map */
很少使用

• sass使用 导入 继承 循环 条件判断等等

.div{
    // 这个可能没什么用
    // @import url(./a.scss);
    @import './a.scss';
}

// scss 混合器 一种css代码块 =》 类似于函数
@mixin setbox {
    width: 100px;
    height: 100px;
    background-color: red;
}
// 可以写函数 代码进行复用
@mixin  setbox1($a,$b,$c) {
    // 一种条件语句
    @if $a > 40 {
        $a:100;
    }@else if $a == 40 {
        $a:200
    }
    width: $a+px;
    height: $b+px;
    background-color: $c
}
div{
    // 函数执行
    // @include setbox();
    @include setbox1(40,50,pink);
} 
.div1{
    // 继承别的类名的样式   
    @extend div;
    height: 190px;
}
// 使用循环来创建类名
@for $i from 1 through 9 {
    // #用于连接字符串和变量
    .div#{$i}{
        @include setbox1($i*10,50 ,green )
    }
}

// 另外一种循环
@each $w,$h,$c in 
    (50,100,red),
    (50,100,pink),
    (50,100,blue),
    (50,100,orange),
    (50,100,yellow),

{
    .div-#{$c}{
        @include setbox1($w,$h,$c);
    }
}
-----------------------------------------
.div div, .div .div1 {
  width: 100px;
  height: 100px;
  background-color: aqua;
  background-repeat: "norepeat";
  background-position-x: 100px;
  background-position-y: 100px;
}

div, .div1 {
  width: 200px;
  height: 50px;
  background-color: pink;
}

.div1 {
  height: 190px;
}

.div1 {
  width: 10px;
  height: 50px;
  background-color: green;
}

.div2 {
  width: 20px;
  height: 50px;
  background-color: green;
}

.div3 {
  width: 30px;
  height: 50px;
  background-color: green;
}

.div4 {
  width: 200px;
  height: 50px;
  background-color: green;
}

.div5 {
  width: 100px;
  height: 50px;
  background-color: green;
}

.div6 {
  width: 100px;
  height: 50px;
  background-color: green;
}

.div7 {
  width: 100px;
  height: 50px;
  background-color: green;
}

.div8 {
  width: 100px;
  height: 50px;
  background-color: green;
}

.div9 {
  width: 100px;
  height: 50px;
  background-color: green;
}

.div-red {
  width: 100px;
  height: 100px;
  background-color: red;
}

.div-pink {
  width: 100px;
  height: 100px;
  background-color: pink;
}

.div-blue {
  width: 100px;
  height: 100px;
  background-color: blue;
}

.div-orange {
  width: 100px;
  height: 100px;
  background-color: orange;
}

.div-yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

/*# sourceMappingURL=b.css.map */