Sass用法及常用方法整理

2021-09-11 00:02:59 字數 1672 閱讀 2928

a 


body.firefox & 


}編譯為


a   a:hover 


body.firefox a
&必須作為選擇器的第乙個字元，其後可以跟隨字尾生成復合的選擇器，例如

#main 


}編譯為


#main 


#main-sidebar
.funky 


}編譯為


.funky
sassscript 最普遍的用法就是變數，變數以美元符號開頭，賦值方法與 css 屬性的寫法一樣：

$width: 5em;
直接使用即呼叫變數：

#main
混入(mixin)允許您定義可以在整個樣式表中重複使用的樣式，從而避免了使用無語意的類（class），比如.float-left。混入(mixin)還可以包含所有的css規則，以及任何其他在sass文件中被允許使用的東西。他們甚至可以帶引數，引入變數，只需少量的混入(mixin)**就能輸出多樣化的樣式。

定義的混入@mixin使用@include引用。

簡單的例子：

//定義乙個mixin


@mixin large-text 


color: #ff0000;


}//引用mixin


.page-title 


轉譯後：


.page-title
通過#{}插值語句可以在選擇器或屬性名中使用變數：

$name: foo;


$attr: border;


p.# -color: blue;


}編譯為


p.foo
在設計網頁的時候常常遇到這種情況：乙個元素使用的樣式與另乙個元素完全相同，但又新增了額外的樣式。通常會在 html 中給元素定義兩個 class，乙個通用樣式，乙個特殊樣式。假設現在要設計乙個普通錯誤樣式與乙個嚴重錯誤樣式，一般會這樣寫：

oh no! you've been hacked!


樣式如下


.error 


.seriouserror 


麻煩的是，這樣做必須時刻記住使用 .seriouserror 時需要參考 .error 的樣式，帶來了很多不變：智慧型比如加重維護負擔，導致 bug，或者給 html 新增無語意的樣式。使用 @extend 可以避免上述情況，告訴 sass 將乙個選擇器下的所有樣式繼承給另乙個選擇器。


.error 


.seriouserror 


上面**的意思是將 .error 下的所有樣式繼承給 .seriouserror，border-width: 3px; 是單獨給 .seriouserror 設定特殊樣式，這樣，使用 .seriouserror 的地方可以不再使用 .error。


其他使用到 .error 的樣式也會同樣繼承給 .seriouserror，例如，另乙個樣式 .error.intrusion 使用了 hacked.png 做背景，也同樣會使用 hacked.png 背景。


.error.intrusion

Less和Sass的用法及區別

1 less為css的擴充套件技術，可向下相容css，新增特性也使用css語法。2 less與sass使用均需先宣告，再使用，less格式為.less，sass格式為.sass和.scss 常用 3 分類 1 變數 less 名稱 值 使用 選擇器 sass 名稱 值 使用 選擇器 2 混合固定值 ...

XHR物件常用方法及引數整理

方法使用的http方法，例如get post等。string型別的引數，具體為乙個utf 16字串，預設為當前頁位址 傳送請求的位址。boolean型別的引數，預設設定為true，表示為非同步請求，若為false，則表示同步請求。當async為true時，需規定在響應處於 onreadystatec...

擴充套件方法用法整理

擴充套件方法貌似平時很少用，平時基本都是用靜態方法，其實靜態方法也挺方便的。class program var age p.getage 擴充套件方法呼叫起來更順眼 age extensionclass.getage2 p 靜態方法呼叫 console.readkey public static c...