SASS使用总结

//sass style
//没有跳出
.parent-1 {
  color:#f00;
  .child {
    width:100px;
  }
}
//单个选择器跳出
.parent-2 {
  color:#f00;
  @at-root .child {
    width:200px;
  }
}
//多个选择器跳出
.parent-3 {
  background:#f00;
  @at-root {
    .child1 {
      width:300px;
    }
    .child2 {
      width:400px;
    }
  }
}
//css style
.parent-1 {
  color: #f00;
} .parent-1 .child {
  width: 100px;
}
.parent-2 {
  color: #f00;
}
.child {
  width: 200px;
}
.parent-3 {
  background: #f00;
}
.child1 {
  width: 300px;
}
.child2 {
  width: 400px;
}

//sass style
//跳出父级元素嵌套
@media print {
    .parent1{
      color:#f00;
      @at-root .child1 {
        width:200px;
      }
    }
}
 
//跳出media嵌套，父级有效
@media print {
  .parent2{
    color:#f00;
 
    @at-root (without: media) {
      .child2 {
        width:200px;
      }
    }
  }
}
 
//跳出media和父级
@media print {
  .parent3{
    color:#f00;
    @at-root (without: all) {
      .child3 {
        width:200px;
      }
    }
  }
}
 
//css style
@media print {
  .parent1 {
    color: #f00;
  }
  .child1 {
    width: 200px;
  }
}
 
@media print {
  .parent2 {
    color: #f00;
  }
}
.parent2 .child2 {
  width: 200px;
}
 
@media print {
  .parent3 {
    color: #f00;
  }
}
.child3 {
  width: 200px;
}
@at-root与&配合使用：
//sass style
.child{
    @at-root .parent &{
        color:#f00;
    }
}
 
//css style
.parent .child {
  color: #f00;
}

//sass style
.demo {
    ...
    animation: motion 3s infinite;
    @at-root {
        @keyframes motion {
          ...
        }
    }
}
 
//css style
.demo {
    ...   
    animation: motion 3s infinite;
}
@keyframes motion {
    ...
}

//sass style
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}
//css style
.demo{
    margin-left:auto;
    margin-right:auto;
}

//sass style
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
//css style
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

//sass style
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding; 
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}
//css style
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

//sass style
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//css style
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

//sass style
@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}
@include max-screen(480px) {
  body { color: red }
}
 
//css style
@media only screen and (max-width: 480px) {
  body { color: red }
}               

//sass style
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}
 
//css style
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

//sass style
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url(‘/images/#{$animal}.png‘);
  }
}
 
//css style
.puma-icon {
  background-image: url(‘/images/puma.png‘);
}
.sea-slug-icon {
  background-image: url(‘/images/sea-slug.png‘);
}
.egret-icon {
  background-image: url(‘/images/egret.png‘);
}
.salamander-icon {
  background-image: url(‘/images/salamander.png‘);
}

//sass style
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url(‘/images/#{$animal}.png‘);
    border: 2px solid $color;
    cursor: $cursor;
  }
}
 
//css style
.puma-icon {
  background-image: url(‘/images/puma.png‘);
  border: 2px solid black;
  cursor: default;
}
.sea-slug-icon {
  background-image: url(‘/images/sea-slug.png‘);
  border: 2px solid blue;
  cursor: pointer;
}
.egret-icon {
  background-image: url(‘/images/egret.png‘);
  border: 2px solid white;
  cursor: move;
}

//sass style
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
 
//css style
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.2em;
}