search
HomeWeb Front-endHTML TutorialSass函数列表函数_html/css_WEB-ITnose

列表函数简介

列表函数主要包括一些对列表参数的函数使用,主要包括以下几种:

  •       length($list):返回一个列表的长度值;
  •       nth($list, $n):返回一个列表中指定的某个标签值
  •       join($list1, $list2, [$separator]):将两个列给连接在一起,变成一个列表;
  •       append($list1, $val, [$separator]):将某个值放在列表的最后;
  •       zip($lists…):将几个列表结合成一个多维的列表;
  •       index($list, $value):返回一个值在列表中的位置值。
  • 列表函数中的每个函数都有其独特的作用与功能

     

     

    length()函数
    length()函数主要用来返回一个列表中有几个值,简单点说就是返回列表清单中有多少个值

    1 >> length(10px)2 13 >> length(10px 20px (border 1px solid) 2em)4 45 >> length(border 1px solid)6 3

    length() 函数中的列表参数之间使用空格隔开,不能使用逗号,否则函数将会出错:

    1 >> length(10px,20px,(border 1px solid),2em)2 SyntaxError: wrong number of arguments (4 for 1) for `length'3 >> length(1,2px)4 SyntaxError: wrong number of arguments (2 for 1) for `length'

     

     

     

    nth()函数
    语法:

    nth($list,$n)

    nth()函数用来指定列表中某个位置的值。在Sass中,nth()函数和其他语言不同,1是指列表中的第一个标签值,2是指列表中的第二个标签值,依此类推。如:

    1 >> nth(10px 20px 30px,1)2 10px3 >> nth((Helvetica,Arial,sans-serif),2)4 "Arial"5 >> nth((1px solid red) border-top green,1)6 (1px "solid" #ff0000)

    注:在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数:

    1 >> nth((1px solid red) border-top green 1 ,0)2 SyntaxError: List index 0 must be a non-zero integer for `nth'

     

     

     

    join()函数
    join()函数是将两个列表连接合并成一个列表。

    1 >> join(10px 20px, 30px 40px)2 10px 20px 30px 40px3 >> join((blue,red),(#abc,#def))4 #0000ff, #ff0000, #aabbcc, #ddeeff5 >> join((blue,red),(#abc #def))6 #0000ff, #ff0000, #aabbcc, #ddeeff

    不过join()只能将两个列表连城一个列表,如果直接连接两个以上的列表将会报错。
    但很多时候不只碰到两个列表连接成一个列表,这个时候就需要将多个 join() 函数合并在一起使用:

    1 >> join((blue red), join((#abc #def),(#dee #eff)))2 #0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff

    但当第一个列表中只有一个列表项,那么 join() 函数合并的列表项目中每个列表项目之间使用的分隔符号会根据第二个列表项中使用的,如果第二列表项中使用是,分隔,则使用逗号分隔;如果第二列项之间使用的空格符,则使用空格分隔:

    1 >> join(blue,(green, orange))2 #0000ff, #008000, #ffa5003 >> join(blue,(green orange))4 #0000ff #008000 #ffa500

    如果当两个列表中的列表项小于1时,将会以空格分隔:

    1 >> join(blue,red)2 #0000ff #ff0000

    什么时候会是用逗号分隔合并的列表项,什么时候是使用空格分隔合并的列表项,建议使用 join() 函数合并列表项的时候就明确指定 $separator 参数,用来指定合并的列表中使用什么方式来分隔列表项:

     1 >> join(blue,red,comma) 2 #0000ff, #ff0000 3 >> join(blue,red,space) 4 #0000ff #ff0000 5 >> join((blue green),(red,orange),comma) 6 #0000ff, #008000, #ff0000, #ffa500 7 >> join((blue green),(red,orange),space) 8 #0000ff #008000 #ff0000 #ffa500 9 >> join((blue, green),(red,orange),comma)10 #0000ff, #008000, #ff0000, #ffa50011 >> join((blue, green),(red,orange),space)12 #0000ff #008000 #ff0000 #ffa50013 >> join(blue,(red,orange),comma)14 #0000ff, #ff0000, #ffa50015 >> join(blue,(red,orange),space)16 #0000ff #ff0000 #ffa50017 >> join(blue,(red orange),comma)18 #0000ff, #ff0000, #ffa50019 >> join(blue,(red orange),space)20 #0000ff #ff0000 #ffa500

     

     

     

    append()函数
    append()函数是用来将某个值插入到列表中,并且处于最末位。

    1 >> append(10px 20px ,30px)2 10px 20px 30px3 >> append((10px,20px),30px)4 (10px, 20px, 30px)5 >> append(green,red)6 #008000 #ff00007 >> append(red,(green,blue))8 #ff0000 #008000, #0000ff

    如果没有明确的指定 $separator 参数值,其默认值是 auto。
    如果列表只有一个列表项时,那么插入进来的值将和原来的值会以空格的方式分隔。
    如果列表中列表项是以空格分隔列表项,那么插入进来的列表项也将以空格分隔;
    如果列表中列表项是以逗号分隔列表项,那么插入进来的列表项也将以逗号分隔。
    在 append() 函数中,可以显示的设置 $separator 参数,
    如果取值为 comma 将会以逗号分隔列表项
    如果取值为 space 将会以空格分隔列表项

     1 >> append((blue green),red,comma) 2 #0000ff, #008000, #ff0000 3 >> append((blue green),red,space) 4 #0000ff #008000 #ff0000 5 >> append((blue, green),red,comma) 6 #0000ff, #008000, #ff0000 7 >> append((blue, green),red,space) 8 #0000ff #008000 #ff0000 9 >> append(blue,red,comma)10 #0000ff, #ff000011 >> append(blue,red,space)12 #0000ff #ff0000

     

     

     

     

    zip()函数
    zip()函数将多个列表值转成一个多维的列表:

    1 >> zip(1px 2px 3px,solid dashed dotted,green blue red)2 1px "solid" #008000, 2px "dashed" #0000ff, 3px "dotted" #ff0000

    在使用zip()函数时,每个单一的列表个数值必须是相同的:
    |--- List ---|--- nth(1) ---|--- nth(2) ---|--- nth(3) ---|
    |------------|--------------|--------------|--------------|
    | List1 | 1px | 2px | 3px |
    |------------|--------------|--------------|--------------|
    | List2 | solid | dashed | dotted |
    |------------|--------------|--------------|--------------|
    | List3 | green | blue | red |
    |------------|--------------|--------------|--------------|
    zip()函数组合出来就成了:

    1px solid green, 2px dashed blue, 3px dotted red

     

     

     

    index()函数
    index() 函数类似于索引一样,主要让你找到某个值在列表中所处的位置。在 Sass 中,第一个值就是1,第二个值就是 2,依此类推:

    1 >> index(1px solid red, 1px)2 13 >> index(1px solid red, solid)4 25 >> index(1px solid red, red)6 3

    index() 函数中,如果指定的值不在列表中(没有找到相应的值),那么返回的值将是 false,相反就会返回对应的值在列表中所处的位置。

    1 >> index(1px solid red,dotted) //列表中没有找到 dotted2 false3 >> index(1px solid red,solid) //列表中找到 solid 值,并且返回他的位置值 24 2

     

     

     

    Introspection函数

    Introspection函数包括了几个判断型函数:

  • type-of($value):返回一个值的类型
  • unit($number):返回一个值的单位;
  • unitless($number):判断一个值是否带有带位
  • comparable($number-1, $number-2):判断两个值是否可以做加、减和合并
  •  

     

     

    Introspection 函数 -type-of()
    type-of()函数主要用来判断一个值是属于什么类型:

    返回值:

  • number 为数值型。
  • string 为字符串型。
  • bool 为布尔型。
  • color 为颜色型。
  •  1 >> type-of(100) 2 "number" 3 >> type-of(100px) 4 "number" 5 >> type-of("asdf") 6 "string" 7 >> type-of(asdf) 8 "string" 9 >> type-of(true)10 "bool"11 >> type-of(false)12 "bool"13 >> type-of(#fff)14 "color"15 >> type-of(blue)16 "color"17 >> type-of(1 / 2 = 1)18 "string"

     

     

     

    unit()函数
    unit() 函数主要是用来获取一个值所使用的单位,碰到复杂的计算时,其能根据运算得到一个“多单位组合”的值,不过只充许乘、除运算:

     1 >> unit(100) 2 "" 3 >> unit(100px) 4 "px" 5 >> unit(20%) 6 "%" 7 >> unit(1em) 8 "em" 9 >> unit(10px * 3em)10 "em*px"11 >> unit(10px / 3em)12 "px/em"13 >> unit(10px * 2em / 3cm / 1rem)14 "em/rem"

    但加、减碰到不同单位时,unit() 函数将会报错,除 px 与 cm、mm 运算之外:

     1 >> unit(1px + 1cm) 2 "px" 3 >> unit(1px - 1cm) 4 "px" 5 >> unit(1px + 1mm) 6 "px" 7 >> unit(10px * 2em - 3cm / 1rem) 8 SyntaxError: Incompatible units: 'cm' and 'px*em'. 9 >> unit(10px * 2em - 1px / 1rem)10 SyntaxError: Incompatible units: '' and 'em'.11 >> unit(1px - 1em)12 SyntaxError: Incompatible units: 'em' and 'px'.13 >> unit(1px - 1rem)14 SyntaxError: Incompatible units: 'rem' and 'px'.15 >> unit(1px - 1%)16 SyntaxError: Incompatible units: '%' and 'px'.17 >> unit(1cm + 1em)18 SyntaxError: Incompatible units: 'em' and 'cm'.

    unit() 函数对于单位运算相对来说也没有规律,而且有些单位也无法整合成一个单位,对于我们在 CSS 中运用中并不适合,比如:

    1 >> unit(10px * 3em)2 "em*px"3 >> unit(10px / 3em)4 "px/em"5 >> unit(10px * 2em / 3cm / 1rem)6 "em/rem"

    上面运算出来的单位,对于在 CSS 中使用将是没有任何意义的。

     

     

     

    unitless()函数
    unitless() 函数相对来说简单明了些,只是用来判断一个值是否带有单位,如果不带单位返回的值为 true,带单位返回的值为 false

     1 >> unitless(100) 2 true 3 >> unitless(100px) 4 false 5 >> unitless(100em) 6 false 7 >> unitless(100%) 8 false 9 >> unitless(1 /2 )10 true11 >> unitless(1 /2 + 2 )12 true13 >> unitless(1px /2 + 2 )14 false

    代码实现:用户在调用混合宏时,如果用户没有给参数值加上单位,程序会自动加入单位。

     1 @mixin adjust-location($x, $y) { 2  @if unitless($x) {  3  $x: 1px * $x; 4     } 5  @if unitless($y) {  6  $y: 1px * $y; 7     } 8  position: relative;  9  left: $x; 10  top: $y;11 }12 .botton{13  @include adjust-location(20px, 30);14 }

    编译过来的CSS:

    1 .botton {2  position: relative;3  left: 20px;4  top: 30px; 5 }

     

     

     

    comparable()函数
    comparable()函数主要是用来判断连个数是否可以进行“加,减”以及“合并”。如果可以返回的值为true,如果不可以返回的值是false:

     1 >> comparable(2px,1px) 2 true 3 >> comparable(2px,1%) 4 false 5 >> comparable(2px,1em) 6 false 7 >> comparable(2rem,1em) 8 false 9 >> comparable(2px,1cm)10 true11 >> comparable(2px,1mm)12 true13 >> comparable(2px,1rem)14 false15 >> comparable(2cm,1mm)16 true

     

     

     

    Miscellaneous函数
    在这里吧Miscellaneous函数称为三元条件函数,主要因为他和JavaScript中的三元判断非常的相似。他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值:

    if($condition,$if-true,$if-false)

    上面表达式的意思是当$condition条件成立时,返回的值为 $if-true,否则返回的是 $if-false 值。

    1 >> if(true,1px,2px)2 1px3 >> if(false,1px,2px)4 2px

     

    Statement
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    How to implement multi-project carousel in Bootstrap 4?How to implement multi-project carousel in Bootstrap 4?Apr 30, 2025 pm 03:24 PM

    Solution to implement multi-project carousel in Bootstrap4 Implementing multi-project carousel in Bootstrap4 is not an easy task. Although Bootstrap...

    How does deepseek official website achieve the effect of penetrating mouse scroll event?How does deepseek official website achieve the effect of penetrating mouse scroll event?Apr 30, 2025 pm 03:21 PM

    How to achieve the effect of mouse scrolling event penetration? When we browse the web, we often encounter some special interaction designs. For example, on deepseek official website, �...

    How to modify the playback control style of HTML videoHow to modify the playback control style of HTML videoApr 30, 2025 pm 03:18 PM

    The default playback control style of HTML video cannot be modified directly through CSS. 1. Create custom controls using JavaScript. 2. Beautify these controls through CSS. 3. Consider compatibility, user experience and performance, using libraries such as Video.js or Plyr can simplify the process.

    What problems will be caused by using native select on your phone?What problems will be caused by using native select on your phone?Apr 30, 2025 pm 03:15 PM

    Potential problems with using native select on mobile phones When developing mobile applications, we often encounter the need for selecting boxes. Normally, developers...

    What are the disadvantages of using native select on your phone?What are the disadvantages of using native select on your phone?Apr 30, 2025 pm 03:12 PM

    What are the disadvantages of using native select on your phone? When developing applications on mobile devices, it is very important to choose the right UI components. Many developers...

    How to optimize collision handling of third-person roaming in a room using Three.js and Octree?How to optimize collision handling of third-person roaming in a room using Three.js and Octree?Apr 30, 2025 pm 03:09 PM

    Use Three.js and Octree to optimize collision handling of third-person roaming in the room. Use Octree in Three.js to implement third-person roaming in the room and add collisions...

    What problems will you encounter when using native select on your phone?What problems will you encounter when using native select on your phone?Apr 30, 2025 pm 03:06 PM

    Issues with native select on mobile phones When developing applications on mobile devices, we often encounter scenarios where users need to make choices. Although native sel...

    Why can some websites achieve mouse scrolling and penetration effect, while others cannot?Why can some websites achieve mouse scrolling and penetration effect, while others cannot?Apr 30, 2025 pm 03:03 PM

    Exploring the implementation principle of mouse scrolling events When browsing some websites, you may notice that some page elements still allow scrolling the entire page when the mouse is hovering...

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    ZendStudio 13.5.1 Mac

    ZendStudio 13.5.1 Mac

    Powerful PHP integrated development environment

    MantisBT

    MantisBT

    Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

    SecLists

    SecLists

    SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software