CSS预处理器Scss认知

---

零、说明

scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。
总结了一些常用的和我认为重要的知识点，欢迎谈论～

一、引入scss文件

@import "./partial.scss";

二、定义变量

$primary-color: #333;
body {
  color:$primary-color
}

三、变量默认值

$content: "默认属性值"!default;

四、嵌套

ul {
  list-style: none;
  li {
    display: inline-block;
  }
}

五、嵌套属性

.funky {
  font:{
    size:30em;
    family:bold;
  }
}
// 解析成css
.funky {
  font-size:30em;
  font-family:bold;
}

六、颜色处理

$font-color:#333;
.p {
  color: rgba($font-color,0.5);
}
// 解析成css
.p {
  color:rgba(#333, 0.5)
}

七、引用父选择器 &符号

a {
  font-size:16px;
  &:hover {
    color: white;
  }
}
// 解析成css
a {font-size: 16px;}
a:hover {color: white;}

// 在&前面加选择器
#content a {
  font-size:16px;
  body.ie &:hover {
    color: white;
  }
}
// 解析成css
#content a {font-size: 16px;}
body.ie #content a:hover {color: white;}

// 可以进行拼接
#main {
  font-size:16px;
  &-sidebar {
    color: white;
  }
}
// 解析成css
#main {font-size: 16px;}
#main-sidebar {color: white;}

八、mixin

@mixin transform($property){
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box {
  @include transform(rotate(30deg))
}
// 解析成css
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

@mixin colors($text,$background,$border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: red,green,blue;
.primary {
  @include colors($values...)
}
// 解析成css
.primary {
  color: red;
  background-color: green;
  border-color: blue;
}

// 第三种 和content使用
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  border-color: $color;
  @content;
}
.colors {
  @include colors {color: $color; }
};
// 解析成css
// content替换传递的值，其他的不影响
.colors{
  background-color: blue;
  border-color: blue;
  color: white;
}

九、extend 继承

%message-shared {
  color: white;
}
.message {
  font-size: 12px;
  @extend %message-shared;
}
.box-message {
  @extend %message-shared;
}
// 解析成css
// 公共属性的类进行合并处理,@extend也可以直接继承一个类
.message .box-message {
  color: white;
}
.message {
  font-size: 12px;
}

十、Operators 操作符

article[role="main"]{
  width: 600px/900px*100%;
}
// 解析成css
article[role="main"]{
  width: 62.5%;
}

十一、if判断

// if判断
p{
  @if 1+1 < 10 { color:blue }
}

十二、循环

@each $animal in cat,dog {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
// 解析成css
.cat-icon {
  background-image: url("/images/cat.png");
}
.dog-icon {
  background-image: url("/images/dog.png");
}

// 第二种循环
$students: (
  (id:"1",name:"小明",gender:"男")，
  (id:"1",name:"小菲",gender:"女")，
);
@each $var in $students {
  .stu-#{map-get($var,"id")}{
    content: map-get($var,"name")+","+map-get($var, "gender");
  }
}
// 解析成css
.stu-1 {
  content: "小明，男"
}
.stu-2 {
  content: "小菲，女"
}

十三、函数指令

$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width
};
#sidebar {
  width: grid-width(5);
}
// 解析成css
#sidebar {
  width: 240px;
}

十四、maps

$my-map:("big":20px,"small":14px);
$my-map:map-merge($my-map, ("normal":18px));
.title {
  font-size: map-get($my-map,"normal");
}
// 解析成css
.title {
  font-size:18px;
}

十五、多重赋值

$my-btn-list:('success','warn');
@each $var in $my-btn-list{
  .btn-#{$var} {
    color: red;
  }
}
// 解析成css
.btn-success {
  color: red;
}
.btn-warn {
  color: red;
}

// 第二种
$my-map:("big":20px,"small":14px);
@each $key,$var in $my-map{
  .div-#{$key} {
    font-size: $var;
  }
}
// 解析成css
.div-big {
  font-size:20px;
  font-size: 14px;
}

十六、at-root指令

// 将样式提到根层级
.parent {
  color: red;
  @at-root .child {
    font-size: 30px;
  }
}
// 解析成css
.parent {
  color: red;
}
.child {
    font-size: 30px;
}

---