Blog A Paranoid Guy

sass入门笔记---嵌套

2016-05-08
CSS

选择器嵌套

    li {
        height: 10px;

        a{
            height: 5px;
        }
    }

    //css style 
    li{
        height: 10px;
    }
    li a {
        height: 5px;
    }

选择器嵌套中,用&表示父元素选择器。

属性嵌套

    div {
        border: {
            left: {
                width: 2px;
                color: #fff;
            }
            right: {
                width: 2px;
                color: #ccc;
            }
        }
    }

    //css style 
    div {
        border-left-width: 2px;
        border-left-color: #fff;
        border-right-width: 2px;
        border-right-color: #ccc;
    }

@at-root跳出

@at-root(without: ...)语法关键词有四个:all(表示所有),rule(常规,默认可不写), media(表示media),support(表示support)

    @media print {
        .parent1 {
            color: #fff;
            @at-root .child1 {
                color: #ccc;
            }
        }
    }

    @media print {
        .parent2 {
            color: #fff;
            @at-root(without:media) {
                .child2 {
                    color: #ccc;
                }
            }
        }
    }

    @media print {
        .parent3 {
            color: #fff;
            @at-root(without:all) {
                .child3 {
                    color: #ccc;
                }
            }
        }
    }

    // css style 
    @media print {
        .parent1 {
            color: #fff;
        }
        .child1 {
            color: #ccc;
        }
    }

    @media print {
        .parent2 {
            color: #fff;
        }
    }
    .parent2 .child2 {
        color: #ccc;
    }

    @media print {
        .parent3 {
            color: #fff;
        }
    }
    .child3 {
        color: #ccc;
    }

参考资料

理解sass的嵌套


Comments