sass学习入门篇

Posted 2020-07-13 Je vous

这章我们讲“嵌套”，嵌套包括两种：一，选择器嵌套。二是属性的嵌套。一般用选择器嵌套居多

一，选择器嵌套：指的是在一个选择器中嵌套另一个选择器来实现继承。使用&表示父元素选择器

li{
float :left;
   a{
         color:#fff;
         &:hover{
           color:#ddd;
     }
    }   
 }
    

　　跟css用法一样，没什么说的。

二，属性嵌套，指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头

.fshadow{
  boder:{
  style:solid;
  left:{width:4px;color:#333;}     
}
}

　　这种用法倒是没见过，可以试试。

三，@at-root是sass3.3.0版本的新增功能，用来跳出选择嵌套的

//没有跳出
.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:

//没有跳出
.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;