首頁 web前端 html教學 Sass函数列表函数_html/css_WEB-ITnose

Sass函数列表函数_html/css_WEB-ITnose

Jun 24, 2016 am 11:33 AM

列表函数简介

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

  •       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
    登入後複製

     

    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

    HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

    HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

    HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

    了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

    HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

    AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

    Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

    GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

    如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

    實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

    網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

    網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

    HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

    HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

    See all articles