初見SCSS 一天開竅起手式

變數宣告

宣告一個變數，要使用$起頭，用:接，用;結束。

$variable : value ;

要使用這些變數，直接在CSS當中輸入即可，例如:




div{
    color : $variable ;
}

變數的使用，可以在許多地方使用上可以不用一直怕打錯，也不怕每個地方都不一樣，或是顏色有差無法統一變動。








$font : 'monospace' ;
$bigsize : 30px ;
$main-color : #AAAAAA ;

p{
    font-size : $bigsize ;
}

目前可以用的變數形式有

  1. 空值，就是null
  2. 字串，括號可用可不用，例如安安、"安安"、或是'安安'
  3. 數值，小數是可以的，例如3.14159
    另外，數值是可以直接在CSS當中進行計算的，例如






$num : 20px ;

h1{
    font-size : $num * 2 ;
    //那這邊字型大小會是40px
}
  1. 布林值，也就只有true和false
  2. 顏色值，可以用色票#123456，或是RGBrgb(100,100,100,0.5)，還有預設單字們
  3. 設定值可以直接串連，常見像是字型就會是
$font-list: "Microsoft JhengHei", Arial, sans-serif ;

變數預設值

變數若要讓他成為預設值，可以直接在後面輸入!default，例如








$num : null ;

h1{
    $num : 20px !default ;
    font-size : $num * 2 ;
    //那這邊字型大小會是40px
}

編寫方式

Sass和SCSS最有趣的地方，就是巢狀式的階層定義。
例如我們本來可能要召喚一個區塊的東西可能長這樣

他的CSS原來應該會是













div{
  width: 200px;
  height: 200px;
  padding: 10px;
  border: 1px solid #AAA; 
}
div h1{
  font-size : 40px;
}
div p{
  font-size : 20px;
}

在SCSS當中，我們可以直接將其中的h1和p直接包建去div程式區塊當中，就會變成













div{
  width: 200px;
  height: 200px;
  padding: 10px;
  border:1px solid #AAA;
  h1{
    font-size:40px;
  }
  p{
    font-size:20px;
  }  
}

偽元素的寫法

當你遇到偽元素的時候也能直接寫進去，利用&去接偽元素，再進行宣告。
偽元素則是一樣放在指定的元素下，例如:








a{
    color:red;
    &:hover{
        color:blue;
    }
    &.class{}
}

Mixin 混合

通常統一style，或是常見於在不同的瀏覽器設定，都可以利用mixin這種類似function的宣告方式來使用變數。
拿個border-radiusd來試試，例如:








@mixin border-radius($radius){
  -webkit-border-radius: $radius;  // For Chrome/Safari/opera(new)
     -moz-border-radius: $radius;  // For firefox
      -ms-border-radius: $radius;  // For ie/edge
       -o-border-radius: $radius;  // For opera(old)
          border-radius: $radius; 
}

那我們該怎麼使用呢? 利用@include的方法，在我們要用的地方來宣告，例如








.box{
  width:100px;
  height:100px;
  border:2px solid #AAA;

  @include border-radius(10px);
}

另外你也能直接宣告預設值進去，那就會變成

@mixin border-radius($radius : 3px){...}

假如你是想要宣告整組style進去，也是沒有問題的，例如我這邊設定背景尺寸，就可以簡單宣告成:
















@mixin bg-setting($bg-size:cover){
    background-size: $bg-size; 
    background-repeat: no-repeat;
    background-position: center;
}

.banner {
    @include bg-setting(cover);    //$bg-size:cover
}
.otehr1 {
    @include bg-setting(20px);     //$bg-size:20px
}
.otehr2 {
    @include bg-setting(contain);  //$bg-size:contain
}

對了，裡面若有設定預設值，是可以變動他的。

吐槽一下，在Sass當中， @include 只要用 + 就可以了，像下面這樣












@mixin bg-setting($bg-size:cover)
    background-size: $bg-size
    background-repeat: no-repeat
    background-position: center

.banner
  +bg-setting(cover)    //$bg-size:cover
.otehr1
  +bg-setting(20px)     //$bg-size:20px
.otehr2
  +bg-setting(contain)  //$bg-size:contain

Extend 繼承/擴充

Extend的意思是，當我要沿用style設定時，你可以利用@extend的方式，可以省去重複輸入的困擾，而在其他style上只要輸入擴充、變動的部分即可。

看看案例，例如本來CSS是這樣寫的:

.simple{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.check {
  border: 1px solid green;
  padding: 10px;
  color: #333;
}

.no_check {
  border: 1px solid red;
  padding: 10px;
  color: #333;
}

這邊可以看到前面設定幾乎相同，那我可以整理一下變成

.simple, .check, .no_check{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.check {
  border-color:green;
}

.no_check {
  border-color:red;
}

若使用繼承方式，就可以不用把全部class召喚在同一個地方，使用的方法是@extend styleName，那會變成
















.simple{
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.check {
  @extend .simple;
  border-color:green;
}

.no_check {
  @extend .simple;
  border-color:red;
}

Function 函式

沒錯，你沒有看錯。在SCSS當中也是可以使用函式做簡單處理。
這邊給個簡單例子 讓函式內自己跑計算的話:











@function calc($num){
  return 100vw / $num ;
}

.test1{
  width: calc(2);
}
.test2{
  width: calc(3);
}

另外SCSS當中也內建不少輔助用的工具函式，有:

  1. saturation ( $color ) : 抓取顏色飽和度
  2. lightness ( $color ) : 抓取顏色亮度
  3. adjust-hue ( $color , $degrees) : 更換顏色色調
  4. lighten ( $color , $amount ) : 顏色調亮
  5. darken ( $color , $amount ) : 顏色調暗

還有更多的內建函式可以直接上去官網說明看看。
那要怎麼用呢?，這邊直接利用顏色調暗寫一波:










$color: #2196f3;

a {
  background-color: $color;
  padding: 10px 15px;
  &:hover {
    background-color: darken($color,10%);
  }
}

這邊試一下結果大概是這樣子。

Import 匯入

我們可以先準備一個通用的SCSS檔案，再利用匯入的方法來使用他們。
首先我們要匯入使用的檔名，需要在前面給一個底線_，而在使用他們的時候，記住不要增加底線即可。




// _default.scss
$px:32px;
$devBG:url('https://imgs.niusnews.com/upload/imgs/default/intern/0705Scarlett/03.jpg');













// index.scss
@import 'default';

div{
    background: $devBG ;
}
h1{
    font-size: $px ;
}
p{
    font-size: $px / 2 ;
}

另外，import也能直接召喚CSS檔案，後面則直接增加路徑即可。



// index.scss
@import 'css/reset.css';
Select a repo