sass mysql 總結Sass 變數

2021-10-19 22:33:39 字數 1481 閱讀 8474

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...