sass學習筆記--混合宏

Wildcard 發布于2019-08-29 12:45 / 552人閱讀

摘要：申明混合宏不帶參數混合宏在中，使用來聲明一個混合宏。如其中是用來聲明混合宏的關鍵詞，有點類似中的一樣。是混合宏的名稱。

什么時候使用混合宏

如果你的整個網站中有幾處小樣式類似，比如顏色，字體等，在 Sass 可以使用變量來統一處理，那么這種選擇還是不錯的。但當你的樣式變得越來越復雜，需要重復使用大段的樣式時，使用變量就無法達到我們目了。這個時候 Sass 中的混合宏就會變得非常有意義。

申明混合宏 不帶參數混合宏：

在 Sass 中，使用“@mixin”來聲明一個混合宏。如：

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

其中 @mixin 是用來聲明混合宏的關鍵詞，有點類似 CSS 中的 @media、@font-face 一樣。border-radius 是混合宏的名稱。大括號里面是復用的樣式代碼。

帶參數混合宏：

除了聲明一個不帶參數的混合宏之外，還可以在定義混合宏時帶有參數，如：

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

復雜的混合宏：

上面是一個簡單的定義混合宏的方法，當然， Sass 中的混合宏還提供更為復雜的，你可以在大括號里面寫上帶有邏輯關系，幫助更好的做你想做的事情,如：

@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 的混合宏，帶有多個參數，這個時候可以使用“ … ”來替代。簡單的解釋一下，當 $shadow 的參數數量值大于或等于“ 1 ”時，表示有多個陰影值，反之調用默認的參數值“ 0 0 4px rgba(0,0,0,.3) ”。

調用混合宏

在 Sass 中通過 @mixin 關鍵詞聲明了一個混合宏，那么在實際調用中，其匹配了一個關鍵詞“@include”來調用聲明好的混合宏。例如在你的樣式中定義了一個圓角的混合宏“border-radius”:

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

在一個按鈕中要調用定義好的混合宏“border-radius”，可以這樣使用：

button {
    @include border-radius;
}

這個時候編譯出來的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

GPU云服務器云服務器 sass 混合云部署學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/112121.html

sass筆記-1|Sass是如何幫你又快又好地搞定CSS的

摘要：輸出的是這樣的可以看到，當用繼承的樣式時，和也完全套用了的樣式，而且你會發現，規則并沒有被重復輸出，而且這樣的方式更符合我們對于這幾個選擇器的認知如果你之前用過面向對象編程的話。 Sass學習筆記持續整理中，開篇不講怎么安裝，sass是什么，這些搜索引擎會告訴你，我們從sass的作用開始講起，知道sass用來干什么，有什么作用，我們才能相信用sass的好處，并且時時刻刻想著sass的設...

xiaolinbang 2019-08-30 13:10 評論0 收藏0
CSS外掛：Sass 之混合宏(@mixin)、繼承(@extend)、占位符(%placehold

摘要：普遍情況下這仨在實際項目中用得還是比較多的，玩起來吧混合宏如果你的代碼塊中涉及到變量，建議使用混合宏來創建相同的代碼塊。不足如果在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗余。學習Sass無非就是想高效的、面向對象編寫CSS，Sass中的@-Rules也是重要的一部分。普遍情況下這仨在實際項目中用得還是比較多的，玩起來吧！ 1. 混合宏@mixin 如果你的...

or0fun 2019-08-30 12:54 評論0 收藏0
css預編譯--sass基礎篇

摘要：變量聲明和調用這是的編程元素基礎之一。如下在最外層聲明的是全局變量，全局范圍內可以調用，在中聲明的是的局部變量，只在內部內進行調用。生成的如下上面的內容就是的基礎篇，進階篇的話會整理一下函數和方法規則相關的東西。 sass起源和簡介 css 其實不是一門編程語言， css 全稱 Cascading Style Sheets (層疊樣式表)是一種用來表現HTML（標準通用標記語言的一個應...

keithyau 2019-08-29 15:23 評論0 收藏0
vue入門文章

摘要：本來想自己寫一篇關于入門的文章。后面可能在這篇文章基礎上，有所內容的增加。預處理器定義了一種新的專門的編程語言，編譯后成正常的文件。本來想自己寫一篇關于vue入門的文章。但是看到鏈接的文章后，覺得寫得太詳細了，實在有保存下來的必要。后面可能在這篇文章基礎上，有所內容的增加。 CSS預處理器定義了一種新的專門的編程語言，編譯后成正常的CSS文件。為CSS增加一些編程的特性，無需考慮瀏...

seanHai 2019-08-29 17:06 評論0 收藏0
從sass到PostCSS

摘要：下面是頭部的樣式示例這是一個用例我在之前了解過自定義屬性的用法。這里有一個正在進行中的規則的規范與之相關。允許儲存一系列的屬性并且在選擇器引用。原文鏈接：https://tylergaw.com/articles...譯者：Icarus郵箱：xdlrt0111@163.com 多年來我一直使用Sass.但是最近我想要使用PostCSS和它的cssnext插件來嘗試處理樣式.我愛死了現...

Backache 2019-08-30 15:52 評論0 收藏0