[ SCSS/SASS教學 ] 如何開始#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

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

 

 

 

 



相關文章

CSS Animation 如何用CSS來製作動畫的效果? (上集)... 今天要來介紹 如何用 CSS 製作動畫的效果 ,CSS 中有一個 Animation 的屬性,他的概念和 Flash 的動畫影格差不多,可以設定某個影格的樣子也可以設定持續時間和淡入淡出等效果,只...
免費圖片與背景圖 (Free Background)   好久沒有新增文章了,最近稍微偷懶了一陣子,真是不好意思呢。 相信在做網頁設計的時候常常需要一些素材來製作整個網站的風格,而今天介紹的網站素材是可以用於個人行為或是商業化(有經...
滾動到此時執行動畫 Animate On Scroll   今天要介紹 AOS Animate On Scroll Library,他是一款蠻好手上的滾動式動畫的資料庫,對於有需求要自訂義動畫的人也相當方便。我覺得比較值得一提的是當滾輪滾回...
lang 網頁的語系宣告   什麼是lang? lang 主要用來宣告網頁的語系,主要是給瀏覽器看的,所以如果要做好SEO(搜尋引擎最佳化,英语:search engine optimization)需要...