Sass

1. 介绍

成熟、稳定、强大的专业级CSS扩展语言，可以为我们写css代码提供巨大的方便

---

2. 安装和使用

Sass安装和快速入门

---

3. 一些基本操作

3.1 嵌套写法

#wrap {
  div.nav {
    width: 200px;
    p {
      width: 200px;
    }
  }
}

// 编译后
#wrap div.nav { width: 200px; }
#wrap div.nav p { width: 200px; }

3.2 定义变量

$pink: 1px solid pink;

#wrap {
  $w: 200px;
  width: $w;
  border: $pink;
}

// 编译后
#wrap { width: 200px; border: 1px solid pink; }

3.3 父选择器标识 &

#nav {
  width: 100px;
  &:hover {
    width: 200px;
  }
  #wrap & {
    color: pink;
  }
}

// 编译后
#nav { width: 100px; }
#nav:hover { width: 200px; }
#wrap #nav { color: pink; }

// 伪类为原始这种必须结合 & 来写sass，而 + - > 这种关联选择的不需要

3.4 群组选择器嵌套

#wrap {
  a {
    color: red;
  }
}

// 编译后
#nav a { color: red; }
#wrap a { color: red; }

3.4.1 属性嵌套

#nav {
  background: {
    image: url('1.png');
    repeat: no-repeat;
    position: center;
  }
}

// 编译后
#nav {
  background-image: url('1.png');
  background-repeat: no-repeat;
  background-position: center;
}

3.5 注释

#nav {
  width: 100px; /* 这种注释在sass中是允许的，并且 会 出现在编译后的css文件中 */
  color:red; // 这个单行注释在sass中是允许的，并且 不会 出现在编译后的css文件中
}

// 在一条属性声明还没结束时使用注释，是不会出现在编译后的css文件中的

3.6 混合器

// 类似于多行属性定义变量
@mixin opa($val) {
  opacity: $val;
  filter: alpha(opacity=$val*100);
}
#nav {
  @include opa(0.5);
}

// 编译后
#nav{ opacity:0.5;filter: alpha(opacity=50); }

3.7 自定义函数

// 屏幕适配
@function pxToVw($px, $vw: 1920) {
  @return ($px / $vw * 100 + vw);
}

@media screen and (min-width: 1440px) and (max-width: 1600px) {
  li {
    width: pxToVw(300) !important;
    padding: pxToVw(10, 1600)
  }
}