[ SCSS小教室 ] 如何寫SCSS#1

標籤: , , ,

前言

網路上有許多關於SASS/SCSS的教學,但是我相信應該很多人依然不知道如何起手。今天就要來跟大家分享我是如何起手,如何開始使用SCSS的。因為我本人也是從網路上學習新技術,希望藉由此篇文章能夠幫助到有心想要學習SCSS的人,讓大家更懂得如何使用CSS,了解CSS的神奇之處。

第一步

建立一個專案,用你習慣的編輯器即可。我這邊使用的是 visual studio code 做為我的編輯器。

建立一個 html 檔案。

建立一個 scss 檔案。

※建立 scss 檔案前需要擴充你的 vs code

▼ 完成後的畫面會長這樣。

第二步

下載 prepros

這個是拿來編譯SCSS轉成CSS檔案的編譯器軟體。可以檢查你的語法有沒有錯誤能不能夠正常執行。

目前下載的軟體屬免費試用,所以會一直有提醒(BuyNow)跑出來,如果覺得不錯用的也可以考慮直接購買。

第三步

把你專案的資料夾丟到 prepros。(用拖曳的方式把資料夾拉進去這個軟體就可以了)

我們專案的資料夾是SCSS_TH。

第四步

簡單創立一個CSS來測試功能是否正常運作。

在這之前,學習SCSS必須要對CSS有一些概念,後續的文章會教大家一些關於SCSS的用法,今天就先以示範的方式讓大家了解自己的專案有沒有正常運作。

▼ 我在SCSS檔案新增以下CSS。

@mixin btnSet($btn-bg) {
    width: 100px;
    text-align: center;
    border-radius: 20px;
    padding: 10px 0;
    margin: 10px;
    background: $btn-bg;
}
.btn-basic{
    @include btnSet(blue);
}
.btn-red{
    @include btnSet(red);
}
.btn-yellow{
    @include btnSet(yellow);
}
.btn-green{
    @include btnSet(green);
}

%btnSet2{
    width: 100px;
    text-align: center;
    border-radius: 20px;
    padding: 10px 0;
    margin: 10px;
}
.btn-basic2{
    @extend %btnSet2;
    background: blue;
}
.btn-red2{
    @extend %btnSet2;
    background: red;
}
.btn-yellow2{
    @extend %btnSet2;
    background: yellow;
}
.btn-green2{
    @extend %btnSet2;
    background: green;
}

▼ Html 的語法。

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SCSS教學頁面</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>

    <div class="btn-basic">Basic</div>
    <div class="btn-red">Red</div>
    <div class="btn-yellow">Blue</div>
    <div class="btn-green">Green</div>
    <p>---------------------------</p>
    <div class="btn-basic2">Basic2</div>
    <div class="btn-red2">Red2</div>
    <div class="btn-yellow2">Blue2</div>
    <div class="btn-green2">Green2</div>
</body>
</html>

▼ 運行畫面。

以上是專案測試結果。代表我們的專案是有正確被編譯成功的。

只要將專案的資料夾拖曳至 prepros 當 SCSS 檔案存檔時他就會自動編譯。並產生一個main.css的檔案。

也可以從軟體(Log)查看編譯結果,如果成功的話,畫面就會是綠色的icon。如果編譯失敗了代表SCSS語法有錯誤,這時候會是紅色icon。

▼ 錯誤的畫面示範

以上就是如何起手 SCSS 的教學。

重點提醒

安裝 prepros 並成功編譯的專案就算成功第一步了!

下篇預告

[SCSS教學]SCSS語法#2

Editor Say

如果覺得文章對你有用,幫忙按個廣告,並且加入我的最愛持續追蹤我們,我們將不定期更新文章!

延伸閱讀
SCSS小教室文章列表



相關文章

如何指定分享網址的縮圖?   當你想要分享連結的時候網頁的縮圖讓你覺得很尷尬嗎?還是網頁的縮圖不盡理想,不是很好看呢?這個時候你就可以使用這款工具,這個工具可以幫助你指定你分享網址的縮圖,不只是縮圖喔!影片也可...
如何使用 JQuery #1   廢話不多說直接來了解如何使用吧!   第一步:引用 JQuery
CSS Animation 如何用CSS來製作動畫的效果? (上集)... 今天要來介紹 如何用 CSS 製作動畫的效果 ,CSS 中有一個 Animation 的屬性,他的概念和 Flash 的動畫影格差不多,可以設定某個影格的樣子也可以設定持續時間和淡入淡出等效果,只...
免費圖片與背景圖 (Free Background)   好久沒有新增文章了,最近稍微偷懶了一陣子,真是不好意思呢。 相信在做網頁設計的時候常常需要一些素材來製作整個網站的風格,而今天介紹的網站素材是可以用於個人行為或是商業化(有經...