sass (英文全稱:syntactically awesome stylesheets) 是乙個最初由 hampton catlin 設計並由 natalie weizenbaum 開發的層疊樣式表語言。
變數用於儲存一些資訊,它可以重複使用。
sass 變數可以儲存以下資訊:
字串數字
顏色值布林值
列表null 值
sass 變數使用 $ 符號:
$variablename: value;
以下例項設定了四個變數:myfont, mycolor, myfontsize, 和 mywidth。
變數宣告後我們就可以在**中使用它:
sass **:
$myfont: helvetica, sans-serif;
$mycolor: red;
$myfontsize: 18px;
$mywidth: 680px;
body {
font-family: $myfont;
font-size: $myfontsize;
color: $mycolor;
#container {
width: $mywidth;
將以上**轉換為 css **,如下所示:
css **:
body {
font-family: helvetica, sans-serif;
font-size: 18px;
color: red;
#container {
width: 680px;
sass 作用域
sass 變數的作用域只能在當前的層級上有效果,如下所示 h1 的樣式為它內部定義的 green,p 標籤則是為 red。
sass **:
$mycolor: red;
h1 {
$mycolor: green; // 只在 h1 裡頭有用,區域性作用域
color: $mycolor;
p {color: $mycolor;
將以上**轉換為 css **,如下所示:
css **:
h1 {
color: green;
p {color: red;
!global
sass **
$mycolor: red;
h1 {
$mycolor: green !global; // 全域性作用域
color: $mycolor;
p {color: $mycolor;
現在 p 標籤的樣式就會變成 green。
將以上**轉換為 css **,如下所示:
css **
h1 {
color: green;
p {color: green;
sass用法總結
一 sass安裝 1 移除原有的ruby源位址 gem sources remove 2 新增可用的ruby源位址 gem sources a 3 安裝sass gem install sass 4 sublime支援scss檔案高亮顯示 借助package control安裝sass外掛程式,之後...
sass高階篇總結一
if 指令是乙個 sassscript,它可以根據條件來處理樣式塊,如果條件為 true 返回乙個樣式塊,反之 false 返回另乙個樣式塊。在 sass 中除了 if 之,還可以配合 else if 和 else 一起使用。mixin blockorhidden boolean true disp...
sass用法總結(持續更新中)
官網 1,巢狀規則 1.1普通巢狀 sass 允許將一套 css 樣式巢狀進另一套樣式中,內層的樣式將它外層的選擇器作為父選擇器 1.2父選擇器 hover 在巢狀 css 規則時,有時也需要直接使用巢狀外層的父選擇器,例如,當給某個元素設定hover樣式時,或者當body元素有某個 classna...