SASS元件開發

body

body>*:first-child

body>*:last-child

p, blockquote, ul, ol, dl, table, pre

h1, h2, h3, h4, h5, h6

h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code

h1 h2

h3 h4

h5 h6

body>h2:first-child, body>h1:first-child, body>h1:first-child+h2, body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child

a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6

h1+p, h2+p, h3+p, h4+p, h5+p, h6+p

a a:hover

ul, ol

ul li>:first-child, ol li>:first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type

ul ul, ul ol, ol ol, ol ul

dl dl dt

dl dt:first-child

dl dt>:first-child

dl dt>:last-child

dl dd

dl dd>:first-child

dl dd>:last-child

pre, code, tt

code, tt

pre>code

pre

pre code, pre tt

kbd

blockquote

blockquote>:first-child

blockquote>:last-child

hr table th

table th, table td

table tr

table tr:nth-child(2n)

img sass預處理器，增加了css所沒有的程式設計能力，帶來了前端開發的效率提高，以及擴充套件了css的編寫技巧。

設計乙個表單提示層（包括成功success，警告warning，錯誤等狀態error）元件，css需要定義基本樣式字型（font-）、外內邊距（padding，margin）、顯示方式（display）、邊框（border）以及其他相關的內容，再為單獨的狀態定義需要的樣式。

先定義基本樣式，再對每乙個狀態定義一套樣式

.tips //成功狀態 .tips-success //警告狀態 .tips-warning //錯誤狀態

.tips-error

每一種狀態文字和邊框顏色需要單獨設定，稍顯繁瑣。後期擴充套件其它狀態，如資訊info、危險dange等，就是工作成本的提高。幸好sass提供了程式設計能力，為我們解決這種擔憂，提高了工作效率。

元件是對資料和方法的簡單封裝。

變數預設值!default

先來看一段js的變數宣告**

var a = 1;
console.log(a);//1

再看一段sass**，是不是很簡單。

$color:blue;
$color:red; !default;//變數申明帶有!default，表示當前值為預設值
p

宣告!default，在這裡輸出blue，很有趣吧。簡單說下它的作用：假設變數申明帶有!default，表示此變數為預設值，可被全域性的普通宣告覆蓋。這點還不能體現它的偉大作用。

@mixin應用

呼叫功能模組，當前的元件可擴充套件出多個元件樣式。

//成功狀態 .tips-success //警告狀態 .tips-warning //錯誤狀態 .tips-error //資訊狀態（再擴充套件乙個）

.tips-info

@include在需要的地方隨意呼叫，不夠規範，後期難以維護。

元件例項

接下來我們要在所需要的檔案，呼叫這個檔案，這個元件就開發完了

//匯入_tpis.scss
@import '_tips';

問題？

重新覆寫

重新覆寫，會產生相同的**，這不是我們想要的元件

//匯入_tips.scss
@import '_tips';
.tips-success
/*編譯後樣式
---------------------------------*/
.tips-success
.tips-success

修改引數

改變@include的引數，同樣會產生相同的**，也不是我們想要的元件

//匯入_tips.scss
@import '_tips';
.tips-success
/*編譯後樣式
---------------------------------*/
.tips-success
.tips-success

正確解決方法

這裡就需要使用 !default;特性

//申明$tpisstylepadding為5px
$tpisstylepadding:  5px;
//匯入_tips.scss
@import '_tips';
/*編譯後樣式
---------------------------------*/
.tips-success

變數設計原則

SASS元件開發

ionic開發之使用sass

ionic開發介紹之SASS介紹

css sass 使用Sass改進CSS開發

SASS元件開發

ionic開發之使用sass

ionic開發介紹之SASS介紹

css sass 使用Sass改進CSS開發

相關推薦