# sass 簡明語法
標籤（空格分隔）： 未分類
---## @規則與指令
`@import` 用於匯入 css 檔案 或 scss 檔案，被匯入檔案中的 `mixins` 在將當前檔案中可用。
除當前路徑外，可通過配置 `:load_paths` 或 `--load-path` 設定搜尋路徑。
匯入檔案時，當檔案
- 擴充套件名為 .css
- 以 http:// 開頭
- 名稱為 url()
- 含有**查詢
時，將以純 css 檔案的形式匯入，否則以 scss 檔案的形式匯入。
```@import "foo.css"；
@import "foo" screen;
@import "";
@import url(foo);
@import "rounded-corners", "text-shadow"; // 匯入多個檔案
```匯入支援巢狀，且可匯入區域性檔案(僅匯入當前檔案，被匯入檔案不單獨生成 css)。此外，還可以在 url 的形式中使用變數。
```$family: unquote("droid+sans");
@import url("");
@import "colors"; // 被匯入檔案為 _colors.scss 且不能同時存在 colors.scss
````@media` 除了支援巢狀外，基本類同其在 css 中的用法。css 規則內部的 `@media` 指令會被冒泡到頂級樣式中，此外，它還支援變數解析。
```.sidebar
}// 編譯至
.sidebar
@media screen and (orientation landscape)
}$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media # and ($feature: $value)
}```
`@extend` todo
`@at-root` 使其所指規則脫離巢狀進入根文件
```.parent
@at-root
.child2
}.step-child
}// 編譯至
.parent
.child
.child1
.child2
.parent .step-child
```還可使用 `@at-root (without: ...)` 與 `@at-root (with: ...)` 使對應規則脫離指定的條件
```@media print }}
// 編譯至
@media print
}.page
````@debug` 用於在標準輸出流中列印表示式的值
```@debug 10em + 12em;
// 輸出
line 1 debug: 22em
````@warn` 與 `@debug` 類同，但
- 可通過 `:quiet` 或 `--quiet` 選項關閉
- 樣式跟蹤中可讓使用者看到哪一處樣式導致了警告
```@mixin adjust-location($x, $y) to be in pixels";
$x: 1px * $x;
}@if unitless($y) to be in pixels";
$y: 1px * $y;
}position: relative; left: $x; top: $y;
}```
`@error` 直接丟擲錯誤，幷包含友好的棧跟蹤資訊，用於驗證引數
```@mixin adjust-location($x, $y) .";
}@if unitless($y) .";
}position: relative; left: $x; top: $y;
}```
## 控制指令與表示式
`if` 通過條件判斷返回兩個值中的乙個
```if (true, 1px, 2px) => 1px
if (false, 1px, 2px) => 2px
````@if` 判斷表示式並應用相應塊中的樣式
```p @else if $type == main @else
}```
`@for` 迴圈中，`from to ` 不包含末尾的 ``
```@for $i from 1 through 3
}```
`@each` 中可使用 `list` 或 `map` 進行遍歷
```@each $animal in puma, sea-slug, egret, salamander -icon .png');}}
# 或@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) -icon .png');
border: 2px solid $color;
cursor: $cursor;}}
# 或@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em)
}```
`@while` 可實現更複雜的迴圈
```$i: 6
@whilte $i > 0
$i: $i - 2;
}```
## mixin 指令
mixin 用於復用樣式，其可包含所有css規則，並支援傳遞引數(可選)，此外名稱中的下劃線和連字元是可互換的。
```@mixin large-text
color: #ff0000;
}.page-title
// 支援引數
@mixin ***y-border($color, $width: 1in) }p
h1 ```
mixin 定義中可以包含其他的 mixin
```@mixin compound
```mixin 支援可變引數，不論是在宣告時還是在呼叫時
```// 在宣告時使用
@mixin box-shadow($shadows...)
.shadows
// 在呼叫時使用
@mixin colors($text, $background, $border)
$values: #ff0000, #00ff00, #0000ff;
.primary
$value-map: (text: #00ff00, background: #0000ff, border: #ff0000;
.secondary
```可以在 `@include` 中同時使用引數列表(`list`)或者對映 (`map`)，前提是 `list` 要放在 `map` 前面。
```colors($values..., $map...)```
此外，在 mixin 的定義中，可以直接將可變引數傳遞給內部的 mixin 呼叫
```font-weight: bold;
@include stylish-mixin($args...);
}.stylish
```使用 `@content` 可向 mixin 中直接傳遞一段外部內容
```* html
}#logo
}// 生成
* html #logo
```此外，在塊級內容中，變數的作用域為內容定義的地方，而不是 mixin 中
```$color: white;
@mixin colors($color: blue)
.colors
}// 生成
.colors
```## 函式
通過 `@function` 定義函式，函式中只能訪問外部全域性變數以及傳入函式的引數，並且，函式都應當 `@return` 輸出結果
```$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n)
#sidebar
```注意：函式名中 `-` 與 `_` 可互換使用（歷史原因），另外，為避免與內部函式混淆，可以通過新增命名空間字首進行區分。
## 樣式輸出風格
可通過 `:style` 選項或 `--style` 命令列引數來定製輸出風格
- :nested
即預設規則，以層級的方式排布，方便檢視樣式的層級結構
```#main
#main p
.huge
```- :expanded
展開式，適於閱讀
```main
#main p
.huge
```- :compact
緊湊式，每條規則都只占用一行，巢狀規則之間無空行，不同組則通過新行隔開
```#main
#main p
.huge
```- :compressed
壓縮式，無需多言
```#main#main p.huge
```
Sass 語法格式
整理自慕課筆記 這裡說的 sass 語法是 sass 的最初語法格式，他是通過 tab 鍵控制縮排的一種語法規則，而且這種縮排要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 sass 老版本，其檔名以 sass 為副檔名。來看乙個 sass 語法格式的簡單示例。假設我們有一段這樣的...
sass基礎語法
變數 width 300px 定義乙個變數 width width 使用定義的變數 str hello.jpeg background image url img str 使用 拼接 background image url img 使用 拼接資料型別 width 300px number div ...
php 簡明語法
1 塊 php以 或標記 2 php變數以 開頭 3 字串處理 3.1 字串連線符 為.號 3.2 字串長度 strlen string 3.3 子字串位置 strpos str1,str2 未查到時返回false 4 陣列 arryname array items,items or arrynam...