Sass 嵌套

套規則

Sass 允許我們將以與html相同的方式嵌套css選擇器，將一套 CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器，比如：

// .scss語法#main { width: 97%; p, div { font-size: 2em; a { font-weight: bold; } } pre { font-size: 3em; }}// 編譯為.css#main { width: 97%; }#main p, #main div { font-size: 2em; }#main p a, #main div a { font-weight: bold; }#main pre { font-size: 3em; }

嵌套功能避免了重復輸入父選擇器，而且也使得復雜的 CSS 結構更加便于管理。

注意：在Sass中，ul、li和a選擇器嵌套是在nav選擇器中的，在css中，規則時逐個定義的（不是嵌套的）。

父選擇器 &

在嵌套 CSS 規則時，有時候我們需要直接使用到嵌套外層的父選擇器，比如，當給某一個元素設定 hover 樣式時或者是當 body 元素有個 classname 時，可以用 & 代表嵌套規則外層的父選擇器。

嵌套屬性

許多CSS屬性具有相同的前綴，比如 font-family，font-size，font-weight ，text-align，text-transform，text-overflow前三者和后三者分別是以 font 和 text 作為屬性的命名空間，為了便于管理這樣的屬性，同時也為了避免重復輸入，Sass 允許將屬性嵌套在命名空間中。

// .scss 語法
font: {
 family: Helvetica, sans-serif;
 size: 24px;
 weight: bold;
}
text: {
 align: center;
 transform: lowercase;
 overflow: hidden;
}

// 編譯后的普通css
font-family: Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;

占位符選擇器 %foo

Sass 額外提供了一種特殊類型的選擇器：占位符選擇器 (placeholder selector)，它與常用的 id 與 class 選擇器寫法相似，只是 # 或 . 替換成了 %，必須通過 @extend 指令調用。

.什么是HTML

HTML 是用來描述網頁的一種語言。HTML 指的是超文本標記語言: HyperText Markup LanguageHTML 不是一種編程語言，而是一種標記語言標記語言是一套標記標簽 (markup tag)HTML 使用標記標簽來描述網頁HTML 文檔包含了HTML 標簽及文本內容HTML文檔也叫做 web 頁面

二.HTML基本語法

(1)HTML標簽

整個網頁是從<html>這里開始的，然后到</html>結束。

(2)head標簽

head標簽代表頁面的“頭”，定義一些特殊內容，這些內容往往都是“不可見內容”（在瀏覽器不可見）。

（3）body標簽

body標簽代表頁面的“身”，定義網頁展示內容，這些內容往往都是可見內容（在瀏覽器可見）。后續課程講解的標簽都是在body標簽內部的各種標簽。

三.HTML語法規范

HTML中不區分大小寫，但是我們一般都使用小寫

HTML中的注釋不能嵌套、

HTML標簽必須結構完整，要么成對出現，要么自結束標簽

HTML標簽可以嵌套，但是不能交叉嵌套

HTML標簽中的屬性必須有值，且值必須加引號(雙引號單引號都可以)

四.HTML標簽使用方法

（1）HTML無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

（2）有序列表

同樣，有序列表也是一列項目，列表項目使用數字進行標記。列表項使用數字來標記。

（3）段落與文字標簽

（4）文本格式化標簽

五.HTML表單和輸入

表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。表單使用表單標簽來設置。

（1）文本域（Text Fields）

輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

（2）密碼字段

密碼字段通過標簽來定義:

（3）單選按鈕

標簽定義了表單單選框選項

（4）復選框

定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。

（5）提交按鈕

定義了提交按鈕。當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理

今天我們就先分享到這里，有不懂的可以私信我

（私信我有免費的IT課程可以領取喲）

在線咨詢

上一篇：一個自定義文件上傳控件樣式的技巧
下一篇：JavaScript-編程風格

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Sass 嵌套

套規則

父選擇器 &

嵌套屬性

占位符選擇器 %foo

您的項目需求