10分钟上手Sass

1.解决传统CSS变量问题

• Sass代码

// 变量定义$开始，分号结束
// map用()定义，用map-get()方法取

$color1: red;
$font:(
  s: 10px,
  m: 12px,
  l: 14px
);

.m1 { font-size: map-get($font,s); }
.m2 { font-size: map-get($font,m); }
.m3 { font-size: map-get($font,l); }

div{ color:$color1; }
.cl{ color:$color1; }
#li{ color:$color1; }

• 编译后CSS代码

.m1 { font-size: 10px; }
.m2 { font-size: 12px; }
.m3 { font-size: 14px; }
div { color: red; }
.cl { color: red; }
#li { color: red; }

2.解决标签嵌套问题

• Sass代码

div {
  background: yellow;
  div p {
     color: red;
  } 
  // 一级子节点
  > div {
    color: green;
  }
  // 会有空格(bug)
  :hover {
    color: green;
  }
  // &表示本身
  &:hover{
    color: red;
  }
}

• 编译后CSS代码

div {
  background: yellow;
}
div div p {
  color: red;
}
div > div {
  color: green;
}
// 有空格bug
div :hover {
  color: green;
}
div:hover {
  color: red;
}

3.提取公共部分 mixin

• Sass代码

@mixin n($c) {
  color: $c;
  border: 1px;
}

.n1 {
  @include n(red);
  font-size: 10px;
}

.n2 {
  @include n(yellow);
  font-size: 14px;
}

• CSS编译代码

.n1 {
  color: red;
  border: 1px;
  font-size: 10px;
}

.n2 {
  color: yellow;
  border: 1px;
  font-size: 14px;
}

4.项目中使用

npm init -y
npm i -g sass
// 通过编译 引入css
sass index.scss index.css