[筆記] Sass 實戰全攻略 – 2 – 變數的運用 @地瓜大的飛翔旅程

章節連結

課程對應章節
內容
範例
Sass 實戰全攻略系列文章

變數在 Sass 的運用上，最為方便就是可以事先定義一些常用的基準變數，如顏色、大小、字體……等等，同時在搭配運算子進行加減乘除。如此一來，在「語意化」和「維護度」上都可以擁有顯著的提升。

課程對應章節

Course 10 ～ Course 16 (全部一共有 72 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/ueo7bm2

內容

1.使用 “$” 來進行變數宣告，最後要記得打上 ; ，否則會編譯錯誤
2.可以在變數內使用其他的變數，創造兩者的關聯性
3.可以對變數進行加減乘除
4.撰寫時，請記得是由上到下逐行讀取。若有出現變數的參照失效，除了打錯字、忘記宣告以外，大概就是行數放置錯了
5. darken(<顏色>,<百分比>)：將以某個顏色為基礎，加深%，Scss 內建，無需宣告
6. lighten(<顏色>,<百分比>)：將以某個顏色為基礎，調淡%，Scss 內建，無需宣告

範例

// Practice.scss
$font-size:16px;
$background-color:#000;
$header-background-color:#ff0000;
$base-color:#0000FF;

body{
  font-size:$font-size;
  color:$background-color;
}

.header{
  background-image: url(../header_desktop.png);
  .menu{
    .btn{
      color:$base-color;
    }
    top:0;
  };
  .banner-title{
    max-width: 460px;
    background: $header-background-color;
    color:$base-color;
    font-size:$font-size *1.5;
  }
  .main-menu{
    background: $header-background-color;
    overflow:hidden;
    &:hover{
      background: $header-background-color;
    }
  }
}

.content{
  h2{
    font-size:$font-size*1.5
  }
}

.footer{
  h3{
    font-size:$font-size*1.5
  }
  p{
    color:$base-color
  }
}

// Practice.css
body {
  font-size: 16px;
  color: #000;
}

.header {
  background-image: url(../header_desktop.png);
}

.header .menu {
  top: 0;
}

.header .menu .btn {
  color: #0000FF;
}

.header .banner-title {
  max-width: 460px;
  background: #ff0000;
  color: #0000FF;
  font-size: 24px;
}

.header .main-menu {
  background: #ff0000;
  overflow: hidden;
}

.header .main-menu:hover {
  background: #ff0000;
}

.content h2 {
  font-size: 24px;
}

.footer h3 {
  font-size: 24px;
}

.footer p {
  color: #0000FF;
}