Question

.site-header
    .basket
        position: relative
        &-container
            width: 100%
            padding: 0 18px
        $basket: &
        &.opened
            #{$basket}-link
                border: 1px solid #e5e5e5
                border-bottom: 1px solid white
            #{$basket}-wrapper
                visibility: visible
                opacity: 1

我想加入开篮状态。

我需要输出.site-header .basket.opened .basket-wrapper

但输出.site-header .basket.opened .site-header .basket-wrapper

＆安培;包含.site-header。我如何从中正确删除？所以$ basket将有当前的等级

http://sass.js.org/

我只是想不经常写篮子

.site-header
    .basket
        position: relative
        .basket-container
            width: 100%
            padding: 0 18px
        .basket.opened
            .basket-link
                border: 1px solid #e5e5e5
                border-bottom: 1px solid white
            .basket-wrapper
                visibility: visible
                opacity: 1

Answer 1

考虑这个变种：

.basket
    $basket: &
    .site-header &
        position: relative
        &-container
            width: 100%
            padding: 0 18px
        &.opened
            #{$basket}-link
                border: 1px solid #e5e5e5
                border-bottom: 1px solid white
            #{$basket}-wrapper
                visibility: visible
                opacity: 1

Answer 2

问题的答案是get-cur-class（）

@function str-split($string, $separator)
    $split-arr: ()
    $index : str-index($string, $separator)
    @while $index != null
        $item: str-slice($string, 1, $index - 1)
        $split-arr: append($split-arr, $item)
        $string: str-slice($string, $index + 1)
        $index : str-index($string, $separator)

    $split-arr: append($split-arr, $string)

    @return $split-arr

@function last($list) 
    @return nth($list, length($list))

@function get-cur-class()
    $path-arr: str-split('"' + & + '"',' ')
    @return last($path-arr)

.site-header
    .basket
        position: relative
        &-container
            width: 100%
            padding: 0 18px
        $t: get-cur-class()
        &.opened
            #{$t}-link
                border: 1px solid #e5e5e5
                border-bottom: 1px solid white
            #{$t}-wrapper
                visibility: visible
                opacity: 1

Sass获得没有父母的当前课程

2 个答案: