sass04 嵌套继承占位符

Posted 2020-09-22 672530440

demo1.scss

body{    //选择器嵌套
    background-color:lightgray;
    header{
        background-color:lightgreen;
    }
    footer{
        background:{ //属性嵌套，仅仅对中划线样式有效
            color:red;
            size:100% 50%;
        }
    }
    a {
        color:red;
        &:hover{   //引用父选择器，& = a
            color:blue;
        }
        & span{
            color:green;
        }
        &.content{
            color:green;
        }
    }
    @at-root .container{  //跳出body
        width:996px;
    }
    @media screen and (max-width:600px){
        color:red;  //屏幕600以下使用这个样式
    }
    
    @media screen and (max-width:600px){
        @at-root (without:media){
            .container{
                color:red;  //屏幕600以下使用这个样式
            }
        }
    }
    
    @at-root .text-info{
        color:red;
        @at-root nav &{
            color:blue;
        }
    }
}
.alert{
    background-color:#FFEEDD;
}
.s{
    font-size:12px;
}
.alert-info{
    @extend .alert,.s;  //继承
    color:red;
}

.one{
    border:1px solid red;
}
.two{
    @extend .one;
    color:red;
}
.three{
    @extend .two;//链式继承
    boder:1px;
}

//交叉继承,会出现错误
a span{
    font-weight:blod;
}
div .content{
    @extend span;
}

%abc{   //占位符，没人继承他不会编译到css，有人继承也不会编译他自己，别人继承的会编译
    color:blue;
}
.ws{
    @extend %abc;
}


/*
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。



虽然能继承的选择器数量很多，但也有很多是不被支持的。如包含选择器（.one .two）或者是相邻兄弟选择器(.one+.two)
如果继承的元素是a，恰巧这个元素a又有hover状态的形式，那么hover状态也会被继承


占位选择器%：优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。
*/

demo1.css

@charset "UTF-8";
body {
  background-color: lightgray;
}
body header {
  background-color: lightgreen;
}
body footer {
  background-color: red;
  background-size: 100% 50%;
}
body a {
  color: red;
}
body a:hover {
  color: blue;
}
body a span, body a div .content, div body a .content {
  color: green;
}
body a.content {
  color: green;
}
.container {
  width: 996px;
}
@media screen and (max-width: 600px) {
  body {
    color: red;
  }
}
body .container {
  color: red;
}

.text-info {
  color: red;
}
nav .text-info {
  color: blue;
}

.alert, .alert-info {
  background-color: #FFEEDD;
}

.s, .alert-info {
  font-size: 12px;
}

.alert-info {
  color: red;
}

.one, .two, .three {
  border: 1px solid red;
}

.two, .three {
  color: red;
}

.three {
  boder: 1px;
}

a span, a div .content, div a .content {
  font-weight: blod;
}

.ws {
  color: blue;
}