scss使用

scss sass转换

sass -convert main.scss main.sass

---

文件加下划线，局部文件

---

@import"局部文件目录"

导入局部文件

@import所在的文件称为宿主文件

---

reset浏览器默认样式全部清除

Normalize选择性的剔除替换

---

sass不但提供类的嵌套也提供了属性的嵌套

    .main-sec {
        font:{
          family:$main-sec-ff;
          size:16px;
      }
    }

编译后的文件

---

变量操作：

• 1.直接操作变量，即变量表达式。

• 2.通过函数。

跟代码块无关的函数，多是自己内置函数称functions

可重用的代码块，称mixin

通过复制拷贝的方式使用，通过@include方式调用

使用时以组合声明方式存在，以@extend方式调用

---

H:60黄|120绿|180青|240蓝|300洋红|360红

S(saturation)饱和度

L(lightness)亮度

---

@mixin通过@include引入

@mixin col-6{
    width:50%;
    float:left;
}
.webdemo-sec{
    @include col-6();//@mixin通过@include引入
    &:hover{
        background-color:#f5f5f5;//
    }
}

带参数mixin

@mixin col ($width: 50%){//默认是50%
    width:$width
}
.webdemo-sec{
    @include col(50%);//引入时传递参数
    &:hover{
        background-color:#f5f5f5;//
    }
}

继承@extend

.error{
  color:#f00;
}
.serious-error{
  @extend .error;//.serious-error插入到.error里
  border: 1px #f00;
}