摘要:申明混合宏不帶參數(shù)混合宏在中,使用來聲明一個混合宏。如其中是用來聲明混合宏的關(guān)鍵詞,有點類似中的一樣。是混合宏的名稱。
什么時候使用混合宏
如果你的整個網(wǎng)站中有幾處小樣式類似,比如顏色,字體等,在 Sass 可以使用變量來統(tǒng)一處理,那么這種選擇還是不錯的。但當(dāng)你的樣式變得越來越復(fù)雜,需要重復(fù)使用大段的樣式時,使用變量就無法達到我們目了。這個時候 Sass 中的混合宏就會變得非常有意義。
申明混合宏 不帶參數(shù)混合宏:在 Sass 中,使用“@mixin”來聲明一個混合宏。如:
@mixin border-radius{ -webkit-border-radius: 5px; border-radius: 5px; }
其中 @mixin 是用來聲明混合宏的關(guān)鍵詞,有點類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號里面是復(fù)用的樣式代碼。
帶參數(shù)混合宏:除了聲明一個不帶參數(shù)的混合宏之外,還可以在定義混合宏時帶有參數(shù),如:
@mixin border-radius($radius:5px){ -webkit-border-radius: $radius; border-radius: $radius; }復(fù)雜的混合宏:
上面是一個簡單的定義混合宏的方法,當(dāng)然, Sass 中的混合宏還提供更為復(fù)雜的,你可以在大括號里面寫上帶有邏輯關(guān)系,幫助更好的做你想做的事情,如:
@mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }
這個 box-shadow 的混合宏,帶有多個參數(shù),這個時候可以使用“ … ”來替代。簡單的解釋一下,當(dāng) $shadow 的參數(shù)數(shù)量值大于或等于“ 1 ”時,表示有多個陰影值,反之調(diào)用默認(rèn)的參數(shù)值“ 0 0 4px rgba(0,0,0,.3) ”。
調(diào)用混合宏在 Sass 中通過 @mixin 關(guān)鍵詞聲明了一個混合宏,那么在實際調(diào)用中,其匹配了一個關(guān)鍵詞“@include”來調(diào)用聲明好的混合宏。例如在你的樣式中定義了一個圓角的混合宏“border-radius”:
@mixin border-radius{ -webkit-border-radius: 3px; border-radius: 3px; }
在一個按鈕中要調(diào)用定義好的混合宏“border-radius”,可以這樣使用:
button { @include border-radius; }
這個時候編譯出來的 CSS:
button { -webkit-border-radius: 3px; border-radius: 3px; }
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112121.html
摘要:輸出的是這樣的可以看到,當(dāng)用繼承的樣式時,和也完全套用了的樣式,而且你會發(fā)現(xiàn),規(guī)則并沒有被重復(fù)輸出,而且這樣的方式更符合我們對于這幾個選擇器的認(rèn)知如果你之前用過面向?qū)ο缶幊痰脑挕? Sass學(xué)習(xí)筆記持續(xù)整理中,開篇不講怎么安裝,sass是什么,這些搜索引擎會告訴你,我們從sass的作用開始講起,知道sass用來干什么,有什么作用,我們才能相信用sass的好處,并且時時刻刻想著sass的設(shè)...
摘要:普遍情況下這仨在實際項目中用得還是比較多的,玩起來吧混合宏如果你的代碼塊中涉及到變量,建議使用混合宏來創(chuàng)建相同的代碼塊。不足如果在樣式文件中調(diào)用同一個混合宏,會產(chǎn)生多個對應(yīng)的樣式代碼,造成代碼的冗余。 學(xué)習(xí)Sass無非就是想高效的、 面向?qū)ο缶帉慍SS,Sass中的@-Rules也是重要的一部分。普遍情況下這仨在實際項目中用得還是比較多的,玩起來吧! 1. 混合宏@mixin 如果你的...
摘要:變量聲明和調(diào)用這是的編程元素基礎(chǔ)之一。如下在最外層聲明的是全局變量,全局范圍內(nèi)可以調(diào)用,在中聲明的是的局部變量,只在內(nèi)部內(nèi)進行調(diào)用。生成的如下上面的內(nèi)容就是的基礎(chǔ)篇,進階篇的話會整理一下函數(shù)和方法規(guī)則相關(guān)的東西。 sass起源和簡介 css 其實不是一門編程語言, css 全稱 Cascading Style Sheets (層疊樣式表)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)...
摘要:下面是頭部的樣式示例這是一個用例我在之前了解過自定義屬性的用法。這里有一個正在進行中的規(guī)則的規(guī)范與之相關(guān)。允許儲存一系列的屬性并且在選擇器引用。 原文鏈接:https://tylergaw.com/articles...譯者:Icarus郵箱:xdlrt0111@163.com 多年來我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件來嘗試處理樣式.我愛死了現(xiàn)...
閱讀 1585·2021-09-30 09:47
閱讀 3581·2021-09-22 15:05
閱讀 2829·2021-08-30 09:44
閱讀 3617·2019-08-30 15:55
閱讀 1365·2019-08-30 13:08
閱讀 1322·2019-08-29 16:40
閱讀 545·2019-08-29 12:45
閱讀 1379·2019-08-29 11:25