sass基礎語法

變數

$width: 300px; // 定義乙個變數

width: $width; // 使用定義的變數
$str: 'hello.jpeg'; 
background-image: url('./img/'+$str); // 使用+拼接
background-image: url('./img/#'); // 使用#{}拼接

$width: 300px;

/*number*/
.div 
$color: #ffe932;
/*color*/
.div 
$str: 'hello.jpeg';
$strclass: 'hello';
/*string*/
.div.# 
$list:(100px, 200px, 300px, 400px);
/*list*/
.div 
$map: (top: 1px, left: 2px, bottom: 3px, right: 4px);
/*map*/
.div

$num1: 100px;

$num2: 200px;
$width: $num1+$num2;
/*加減乘除*/
.div 
$color1: #010203;
$color2: #040506;
$color: #a69e61;
/*顏色運算*/
.p

子元素巢狀

$width: 300px;

$color: #ffe932;
.div1 
}

.div2 

background: 
}}

.div3 

&.hello 
}

Sass 語法格式

整理自慕課筆記 這裡說的 sass 語法是 sass 的最初語法格式，他是通過 tab 鍵控制縮排的一種語法規則，而且這種縮排要求非常嚴格。另外其不帶有任何的分號和大括號。常常把這種格式稱為 sass 老版本，其檔名以 sass 為副檔名。來看乙個 sass 語法格式的簡單示例。假設我們有一段這樣的...

SASS 簡明語法

sass 簡明語法 標籤 空格分隔 未分類 規則與指令 import 用於匯入 css 檔案 或 scss 檔案，被匯入檔案中的 mixins 在將當前檔案中可用。除當前路徑外，可通過配置 load paths 或 load path 設定搜尋路徑。匯入檔案時，當檔案 擴充套件名為 css 以 ht...

sass的操作以及語法程式設計基礎

1 4 sass 程式設計基礎 有了前面的 quick start 部門的簡單了解，基本能描述清楚 sass 的用途了，具體的控制 樣式 css 的定義和其他的程式開發操作，就需要對 sass 中提供的各種基礎性的知識有一 個簡單的認知和應用過程。1 4.1.1 變數 variables sass ...