Sass語法學習

2021-08-15 17:42:42 字數 2447 閱讀 7472

1、編譯監控

自動監控把sass編譯成css檔案,命令列

sass --watch sass/basic.scss:css/basic.css 

在監控的sass後面,,可以為 sass 生成 css 樣式指定生成的格式,預設是nested型;

--style nested|compact|compressed|expended

通過 --style nested( 巢狀 - 預設 )|compact( 緊促型 )|compressed( 壓縮 )|expended( 擴充套件 ) 命令,可以為 sass 生成 css 樣式指定生成的格式

2、合成檔案

@improt

在sass中,使用@improt可以把多個不同的sass檔案合成乙個css檔案,在合成的sass中有兩種方式,

第一種:@import "demo2","demo3","demo4";

第二種:@import "dem2";@import "demo3";@import "demo4"

第三種:在乙個sass檔案中,引入另乙個sass檔案;

3、變數

sass的變數必須是$開頭,後面緊跟變數名,而變數值和變數名之間就需要使用冒號(:)分隔開(就像css屬性設定一樣),如果值後面加上!default則表示預設值。

3.1預設變數

sass的預設變數僅需要在值後面加上!default即可。

sass的預設變數一般是用來設定預設值,然後根據需求來覆蓋的,覆蓋的方式也很簡單,只需要在預設變數之前重新宣告下變數即可;

特殊變數

一般我們定義的變數都為屬性值,可直接使用,但是如果變數作為屬性或在某些特殊情況下等則必須要以#形式使用。

3.2、多值變數

多值變數分為list型別和map型別,簡單來說list型別有點像js中的陣列,而map型別有點像js中的物件。

3.3、多值變數

多值變數分為list型別和map型別,簡單來說list型別有點像js中的陣列,而map型別有點像js中的物件。

3.3.1、list

定義//一維資料

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

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

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

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

3.3.2、map

map資料以key和value成對出現,其中value又可以是list。格式為:$map: (key1: value1, key2: value2, key3: value3);。可通過map-get($map,$key)取值。關於map資料還有很多其他函式如map-merge($map1,$map2),map-keys($map),map-values($map)等,具體可參考sass functions(搜尋map functions即可)

定義$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

全域性變數

在變數值後面加上!global即為全域性變數。這個目前還用不上,不過將會在sass 3.4後的版本中正式應用。目前的sass變數範圍飽受詬病,所以才有了這個全域性變數(現在已經能用上了)。

目前變數機制

在選擇器中宣告的變數會覆蓋外面全域性宣告的變數。(這也就人們常說的sass沒有區域性變數)(實際測試sass是有區域性變數的);

4、巢狀(nesting)

sass的巢狀包括兩種:一種是選擇器的巢狀;另一種是屬性的巢狀。我們一般說起或用到的都是選擇器的巢狀。

4.1、選擇器巢狀

所謂選擇器巢狀指的是在乙個選擇器中巢狀另乙個選擇器來實現繼承,從而增強了sass檔案的結構性和可讀性。

在選擇器巢狀中,可以使用&表示父元素選擇器

4.2、屬性巢狀

所謂屬性巢狀指的是有些屬性擁有同乙個開始單詞,如border-width,border-color都是以border開頭。

/sass style

.fakeshadow {

border: {

style: solid;

left: {

width: 4px;

color: #888;

right: {

width: 2px;

color: #ccc;

//css style

.fakeshadow {

border-style: solid;

border-left-width: 4px;

border-left-color: #888;

border-right-width: 2px;

border-right-color: #ccc; 

當然這只是個屬性巢狀的例子,如果實際這樣使用,那估計得瘋掉。

4.3、@at-root

sass3.3.0中新增的功能,用來跳出選擇器巢狀的。預設所有的巢狀,繼承所有上級選擇器,但有了這個就可以跳出所有上級選擇器。

普通跳出巢狀

markdown語法學習

markdown是純文字格式的語法,支援轉換為html,可以幫助整理知識 學習筆記 markdown的段落是由若干行文字組成,前後由空行隔開 普通段落不該用空格或製表符縮排 markdown支援兩種標題樣式 setext和atx setext風格的標題用符號 first level 和 second...

schema語法學習

xml schema 學習總結 簡單型別 1 簡單元素 指只能包含文字內容,不能夠包含子元素,也沒有屬性的元素。格式 例子 2 屬性 所有的元素屬性均被宣告為簡單型別。只有複雜型別的元素才可以擁 有屬性。格式 例子 所有的屬性預設都是可選的,我們可以通過使用use 關鍵字明確的指出是可選 或是必需 ...

SQL語法學習

union 操作符用於合併兩個或多個 select 語句的結果集。請注意,union 內部的 select 語句必須擁有相同數量的列。列也必須擁有相似的資料型別。同時,每條 select 語句中的列的順序必須相同。sql union 語法 select column name s from tabl...