Sass日常使用 1

2021-08-14 22:51:31 字數 1808 閱讀 4477

sass 是對 css的擴充套件，讓 css 語言更強大、具有邏輯並且可以減少**的冗餘。 它允許使用變數、巢狀、函式等眾多功能。

在這裡就不介紹安裝了，但是有乙個命令需要我們注意一下：可以命令 sass 監視檔案或目錄的改動並更新 css

// watch a file


sass --watch file.scss:file.css 


// watch a directory
變數的宣告，所有變數以$開頭：

$color: #ccc;


$border: 5px solid pink;
如果變數需要鑲嵌在字串之中，就必須需要寫在#{}之中：

$side : left;


.rounded : 1px solid #ccc;  


}
變數的引用：

$color: #ccc;


$border: 5px solid pink;


div 


//編譯後


div
當然你也可以在變數中引用變數：

$color: #ccc;


$border: 5px solid $color;


div 


//編譯後


div
注意！變數可以在css規則塊定義之外存在，當變數定義在css規則塊內，那麼該變數只能在此規則塊內使用。css生成時，變數會被它們的值所替代。之後，如果你需要乙個不同的值，只需要改變這個變數的值，則所有引用此變數的地方生成的值都會隨之改變。

在css中，出現這樣的**是一件很讓人惱火的事情

.content header p 


.content header div 


.content footer
但是在sass中你可以只寫一遍，並且可讀性會更高

.content 


div 


}  footer 


}//編譯後


.content header p 


.content header div 


.content footer
在sass中除了選擇器可以巢狀，屬性也能巢狀

div 


}//編譯後


div
注意：屬性後面必須加上冒號。

在巢狀的**塊內，可以使用&引用父元素。比如a:hover偽類，可以寫成

a 


}//編譯後


a:hover
在sass中，如果你想繼承另乙個選擇器，可以使用@extend命令。比如現有乙個class1類，class2類想要繼承class1類的樣式就可以寫成這樣

.class1 


.class2 


//編譯後


.class1 


.class2
mixin是可以重複使用的**塊，首先我們用@mixin定義乙個**塊

@mixin style
如果你需要呼叫style**塊，需要用@include命令

p
mixin除了可以重複使用，它還可以指定引數和預設值，首先我們來定義乙個需要指定引數的mixin

@mixin style ($value)
然後在使用的時候根據需要加上引數就可以了

p

如何使用sass

sass 是一門高於 css 的元語言，它能用來清晰地 結構化地描述檔案樣式，有著比普通 css 更加強大的功能。sass 能夠提供更簡潔 更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。sass 和 scss 其實是同一種東西，我們平時都稱之為 sass，兩者之間不同之處有以下兩點 副檔...

Sass 1 Sass初識 編譯 輸出方式

啟動 startcommand propopt with ruby客戶端 輸入命令 gen install sass 切換源 gen sources add remove 檢視版本 sass v 更新及解除安裝 gen uninstall sass gen update sass mixin ell...

日常練習（1）

在實際應用中有這樣乙個場景 有m臺伺服器，有n個任務，需要把這n個任務按一定策略分配給m臺伺服器來執行，請按以下要求實現該場景 1.使用list列表代表伺服器 列表中每個元素為乙個ip位址 2.使用list列表代表任務 列表中每個元素為任務id 3.分配的過程就是把ip位址與任務id對映上的過程 4...