[ 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

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

 

 

 

 



相關文章

如何自訂義動畫 Animate On Scroll   上一篇有教大家基本的 AOS Animations 使用方式,這一篇要給有需要自訂義動畫的夥伴們所使用。   基本使用方式 連結支援: 滾動到此時執行動...
網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
滾動到此時執行動畫 Animate On Scroll   今天要介紹 AOS Animate On Scroll Library,他是一款蠻好手上的滾動式動畫的資料庫,對於有需求要自訂義動畫的人也相當方便。我覺得比較值得一提的是當滾輪滾回...
Loading 製作載入中畫面 (8/9更新:Safari 載入問題)...   此篇文章要教大家如何製作 Loading 畫面,在瀏覽網站的時候有時候會看到有些網站有 "過場畫面" ,當整個網頁載好時才會讓使用者看到完整的畫面,這樣有什麼好處呢?可以讓網頁更有...