sass判斷語(yǔ)句

kumfo 發(fā)布于2019-04-23 13:23 / 1212人閱讀

摘要：判斷可一個(gè)條件多帶帶使用，也可以和結(jié)合多條件使用三目判斷語(yǔ)法為。三個(gè)參數(shù)分別表示條件，條件為真的值，條件為假的值。循環(huán)語(yǔ)法為其中表示變量，而和表示類型數(shù)據(jù)和類型數(shù)據(jù)。

@if判斷

@if可一個(gè)條件多帶帶使用，也可以和@else結(jié)合多條件使用

scss.style

css.style

三目判斷

語(yǔ)法為：if($condition, $if_true, $if_false)?。

三個(gè)參數(shù)分別表示：條件，條件為真的值，條件為假的值。

scss.style

css.style

for循環(huán)有兩種形式，分別為：

1、@for $var from through

2、@for $var from to

$var表示變量，start表示起始值，end表示結(jié)束值，這兩個(gè)的區(qū)別是關(guān)鍵字through表示包括end這個(gè)數(shù)，而to則不包括end這個(gè)數(shù)。

scss.style

css.style

@each循環(huán)

語(yǔ)法為：@each $var in

其中$var表示變量，而list和map表示list類型數(shù)據(jù)和map類型數(shù)據(jù)。

sass 3.3.0新加入了多字段循環(huán)和map數(shù)據(jù)循環(huán)。

關(guān)于循環(huán)判斷詳細(xì)分析請(qǐng)查閱：sass揭秘之@if，@for，@each

①、多個(gè)字段list數(shù)據(jù)循環(huán)

scss.style

css.style

②、單個(gè)字段list數(shù)據(jù)循環(huán)

scss.style

css.style

③、多個(gè)字段map數(shù)據(jù)循環(huán)

scss.style

css.style

云服務(wù)器 GPU云服務(wù)器判斷語(yǔ)句 php ? 判斷語(yǔ)句 asp 判斷語(yǔ)句 php判斷語(yǔ)句或者

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1796.html

相關(guān)文章

sass的基本使用

摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預(yù)處理器，文件后綴名為，可以用中的來(lái)轉(zhuǎn)成樣式。最近在項(xiàng)目中利用到了css預(yù)處理器（sass），而之前沒接觸過(guò)的本博主出于好奇心，就在業(yè)余的時(shí)間里搜了一些資料來(lái)看看，看完后覺得sass挺不錯(cuò)，就想簡(jiǎn)單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內(nèi)容都是本博主覺得比較有...

alighters 2019-08-30 15:53 評(píng)論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的文件不會(huì)被編譯成文件。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式，符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡(jiǎn)單且可維護(hù)。 ? SASS的本...

StonePanda 2019-08-30 14:04 評(píng)論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的文件不會(huì)被編譯成文件。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式，符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡(jiǎn)單且可維護(hù)。 ? SASS的本...

pcChao 2019-08-22 15:01 評(píng)論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的文件不會(huì)被編譯成文件。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式，符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡(jiǎn)單且可維護(hù)。 ? SASS的本...

alexnevsky 2019-08-01 18:40 評(píng)論0 收藏0
前端入門23-CSS預(yù)處理器（Less&Sass）

摘要：聲明聲明本篇內(nèi)容梳理自以下幾個(gè)來(lái)源網(wǎng)站的文檔中文網(wǎng)感謝大佬們的分享。這個(gè)時(shí)候，預(yù)處理器就出現(xiàn)了，其實(shí)應(yīng)該是說(shuō)和這類語(yǔ)言出現(xiàn)了。聲明本篇內(nèi)容梳理自以下幾個(gè)來(lái)源： Github:smyhvae/web Bootstrap網(wǎng)站的 less 文檔 Sass中文網(wǎng) 感謝大佬們的分享。正文-CSS預(yù)處理（less&Sass） CSS預(yù)處理什么是 CSS 預(yù)處理？為什么要有 CSS 預(yù)處理？這...

freecode 2019-04-23 13:07 評(píng)論0 收藏0