列表函数简介
列表函数主要包括一些对列表参数的函数使用,主要包括以下几种:
列表函数中的每个函数都有其独特的作用与功能
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函数包括了几个判断型函数:
Introspection 函数 -type-of()
type-of()函数主要用来判断一个值是属于什么类型:
返回值:
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

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa

SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!

DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

EditPlus versi Cina retak
Saiz kecil, penyerlahan sintaks, tidak menyokong fungsi gesaan kod