• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • sass:selector

    选择器值

    此模块中的函数检查和操作选择器。每当他们返回一个选择器时,它总是一个逗号分隔的列表(选择器列表),其中包含空格分隔的列表(复杂选择器),其中包含不带引号的字符串(复合选择器)。例如,选择器.main aside:hover,.sidebar p将返回为:

    @debug ((unquote(".main") unquote("aside:hover")),
           (unquote(".sidebar") unquote("p")));
    // .main aside:hover, .sidebar p
    

    这些函数的选择器参数可能具有相同的格式,但它们也可以只是普通字符串(带引号或不带引号)或组合。例如,".main aside:hover,.sidebar p"是一个有效的选择器参数。


    selector.is-superselector()

    selector.is-superselector($super, $sub)
    is-superselector($super, $sub) //=> boolean
    

    返回选择器$super是否匹配选择器$sub匹配的所有元素。即使$super匹配的元素多于$sub,仍然返回true$super$sub选择器可能包含占位符选择器,但不包含父选择器。

    @debug selector.is-superselector("a", "a.disabled"); // true
    @debug selector.is-superselector("a.disabled", "a"); // false
    @debug selector.is-superselector("a", "sidebar a"); // true
    @debug selector.is-superselector("sidebar a", "a"); // false
    @debug selector.is-superselector("a", "a"); // true
    


    selector.append()

    selector.append($selectors...)
    selector-append($selectors...) //=> selector
    

    $selectors没有后代组合器的组合——也就是说,它们之间没有空格。如果其中的任何选择器$selectors是选择器列表,则每个复杂选择器单独组合。$selectors可能包含占位符选择器,但不包含父选择器。

    另请参阅selector.nest()

    @debug selector.append("a", ".disabled"); // a.disabled
    @debug selector.append(".accordion", "__copy"); // .accordion__copy
    @debug selector.append(".accordion", "__copy, __image");
    // .accordion__copy, .accordion__image
    


    selector.extend()

    selector.extend($selector, $extendee, $extender)
    selector-extend($selector, $extendee, $extender) //=> selector 
    

    $selector@extend规则一样扩展。$selector返回使用以下@extend规则修改的副本:

    #{$extender} {
        @extend #{$extendee};
    }
    

    换句话说,将$extendee内的所有实例$selector替换为$extendee,$extender。如果$selector不包含$extendee,则按原样返回。

    $extendee,$extender和选择$selector器可以包含占位符选择器,但不能包含父选择器。

    另请参阅selector.replace()

    @debug selector.extend("a.disabled", "a", ".link"); // a.disabled, .link.disabled
    @debug selector.extend("a.disabled", "h1", "h2"); // a.disabled
    @debug selector.extend(".guide .info", ".info", ".content nav.sidebar");
    // .guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar
    


    selector.nest()

    selector.nest($selectors...)
    selector-nest($selectors...) //=> selector 
    

    组合$selector起来,就好像它们在样式表中相互嵌套一样。$selector可能包含占位符选择器。与其他选择器函数不同,除了第一个选择器之外,它们都可能包含父选择器。

    另请参阅selector.append()

    @debug selector.nest("ul", "li"); // ul li
    @debug selector.nest(".alert, .warning", "p"); // .alert p, .warning p
    @debug selector.nest(".alert", "&:hover"); // .alert:hover
    @debug selector.nest(".accordion", "&__copy"); // .accordion__copy
    


    selector.parse()

    selector.parse($selector)
    selector-parse($selector) //=> selector 
    

    $selector以选择器值格式返回。

    @debug selector.parse(".main aside:hover, .sidebar p");
    // ((unquote(".main") unquote("aside:hover")),
    //  (unquote(".sidebar") unquote("p")))
    


    selector.replace()

    selector.replace($selector, $original, $replacement)
    selector-replace($selector, $original, $replacement) //=> selector 
    

    返回的$selector所有实例$original替换为的副本$replacement

    这利用@extend规则的智能统一,确保$replacement无缝融入$selector。如果$selector不包含$original,则按原样返回。

    、和选择$selector器可以包含占位符选择器,但不能包含父选择器。$original$replacement

    另请参阅selector.extend()

    @debug selector.replace("a.disabled", "a", ".link"); // .link.disabled
    @debug selector.replace("a.disabled", "h1", "h2"); // a.disabled
    @debug selector.replace(".guide .info", ".info", ".content nav.sidebar");
    // .guide .content nav.sidebar, .content .guide nav.sidebar
    


    selector.unify()

    selector.unify($selector1, $selector2)
    selector-unify($selector1, $selector2) //=> selector | null 
    

    返回一个选择器,它只匹配与$selector1和匹配的元素$selector2

    null如果$selector1$selector2匹配任何相同的元素,或者没有选择器可以表达它们的重叠,则返回。

    @extend与规则生成的选择器一样,返回的选择器不能保证匹配两者匹配的所有元素$selector1$selector2如果它们都是复杂选择器。

    @debug selector.unify("a", ".disabled"); // a.disabled
    @debug selector.unify("a.disabled", "a.outgoing"); // a.disabled.outgoing
    @debug selector.unify("a", "h1"); // null
    @debug selector.unify(".warning a", "main a"); // .warning main a, main .warning a
    


    selector.simple-selectors()

    selector.simple-selectors($selector)
    simple-selectors($selector) //=> list 
    

    返回中的简单选择器列表$selector$selector必须是包含复合选择器的单个字符串。这意味着它可能不包含组合符(包括空格)或逗号。返回的列表以逗号分隔,简单的选择器是不带引号的字符串。

    @debug selector.simple-selectors("a.disabled"); // a, .disabled
    @debug selector.simple-selectors("main.blog:after"); // main, .blog, :after
    

    上篇:sass:meta

    下篇:sass:string