前端基礎 sass的使用

2021-09-05 18:08:55 字數 2250 閱讀 7950

安裝ruby。

再配置環境變數，如：

c:\ruby23-x64\bin
安裝sass:

gem install sass
scss 是 sass 3 引入新的語法，其語法完全相容 css3，並且繼承了 sass 的強大功能。也就是說，任何標準的 css3 樣式表都是具有相同語義的有效的 scss 檔案。另外，scss 還能識別大部分 css hacks（一些 css 小技巧）和特定於瀏覽器的語法，例如：古老的 ie filter 語法。

less中的變數@key: value;

sass中的變數$key:value;

特殊變數：如果變數巢狀在字串中，則需要寫在 #{} 符號裡面;

多值變數：多值變數分為list型別和map型別，list有點像js物件中的陣列，map型別像js中的物件。

list:

//一維資料


$px: 5px 10px 20px 30px;


//二維資料，相當於js中的二維陣列


$px: 5px 10px, 20px 30px;


$px:


(5px 10px)


(20px 30px)


;
map:

$headings:(


h1: 2em, h2


: 1.5em, h3


: 1.2em)


;
不帶引數：

@mixin boxc


.box
帶引數：

@mixin


********


($direction


: left, $bdwidth


: 10px, $color


: #09f)


-color


: $color;


}.box


.box


.box1


@mixin


square


($w: 50, $h


: 50)


@else if $w > 200


@else }


.box
第一種：

@for $i from 1 to 3


}
編譯出來：

.box-1


.box-2
第二種：

@for $i from 1 through 3


}
編譯出來：

box-1


box-2


box-3
兩種形式的區別在於 through 包括 end 的值，to 不包括 end 值。

$i


: 0;


@while $i < 6


$i: $i + 2;


}
編譯出來：

box-0


box-2


box-4
@each in 列舉

$list


: a, b, c;


@each $i in $list


}
編譯出來：

.box-a


.box-b


.box-c


$boolean


: false;


.box
編譯出來：

.box


$designwidth


: 750px;


@function


pxtovw


($px


: 10px)


.box
編譯結果：

.box


.box
編譯結果：

.box

前端的Sass高階語法

sass3.3.0中新增的功能，用來跳出選擇器巢狀的。預設所有的巢狀，繼承所有上級選擇器，但有了這個就可以跳出所有上級選擇器。parent 2 上面的 經過編譯以後，會生成如下 parent 2 child 說明 預設情況下 ar root是不能跳出 media的巢狀的，如果要跳出這些巢狀，我們需要...

sass基礎語法

變數 width 300px 定義乙個變數 width width 使用定義的變數 str hello.jpeg background image url img str 使用 拼接 background image url img 使用 拼接資料型別 width 300px number div ...

學習 前端 sass學習筆記

字尾 sass有兩種字尾檔案 一種字尾名為sass，不使用大括號和分號 另一種就是我們這裡使用的scss檔案，這種和我們平時寫的css檔案格式差不多，使用大括號和分號。下面舉出 字尾為sass檔案寫法 body background eee font size 12px 匯入sass的匯入 impo...