入門介紹
前言
SCSS(Sassy CSS，時髦的 CSS)是 SASS 中的一種新式語法，SASS 則是一種將css程式化的程式語言，藉由提供程式語言的特性，例如變數($)、巢狀結構、混合(mixin)、函式(function)與繼承(extend)等等，可以預先對 CSS 進行結構化的工作，最後再編譯為網頁上可使用的 CSS 語法。
內容
Scss的寫法跟css很相似，有css的基礎，學scss會比較好入門
首先寫Scss之前我們需要使用的工具有:
vscode:https://code.visualstudio.com/
vscode extension:
vscode live Sass Compiler Setting:
"liveSassCompile.settings.formats":
[
{
"format": "expanded", //格式為不變
"extensionName": ".css", //副檔名為.css
"savePath": "/style", //存檔位置/(根目錄)style下
},
{
"format": "compressed", //格式為壓縮
"extensionName": ".min.css", //副檔名為.min.css
"savePath": "/dist/style", //存檔位置/(根目錄)dist/style下
}
]
建立一個scss 資料夾
scss轉css 編譯按鈕
vscode live Sass Compiler Setting introduction:
https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md
準備好了我們就開始介紹scss
基本架構巢狀(nesting)
scss跟css架構很像差別在於scss可使用巢狀的寫法如下圖
SCSS
CSS
變數/計算
使用$開頭+名稱 如下圖
SCSS
CSS
繼承(extend)
繼承用法 如下圖
SCSS
CSS
如果要省略來源的資源可在來源前面加上% 如下圖
SCSS
CSS
function(方法)
跟其他程式語言一樣都可以帶參數進去 如下用法
SCSS
$basefontsize:2;
$baselineheight:1.2;
@function fontsize($sizemultiple:1)
{
@if $sizemultiple<0
{
$sizemultiple:1;
}
@return 14px+round($sizemultiple*$basefontsize);
}
@function lineheight($lineheightmultiple:1)
{
@return $lineheightmultiple*$baselineheight;
}
header
{
font-size: fontsize(2);
line-height: lineheight(fontsize(2));
>h1{
font-size: fontsize(3);
line-height: lineheight(fontsize(3));
}
>h2{
font-size: fontsize(4);
line-height:lineheight(fontsize(4));
}
}
CSS
header {
font-size: 18px;
line-height: 21.6px;
}
header > h1 {
font-size: 20px;
line-height: 24px;
}
header > h2 {
font-size: 22px;
line-height: 26.4px;
}
mixin(混合)
可使用function和exthend兩種功能 如下
SCSS
$basefontsize:2;
$baselineheight:1.2;
@function fontsize($sizemultiple:1)
{
@if $sizemultiple<0
{
$sizemultiple:1;
}
@return 14px+round($sizemultiple*$basefontsize);
}
@function lineheight($lineheightmultiple:1)
{
@return $lineheightmultiple*$baselineheight;
}
@mixin font($fontsize:1,$lineheight:auto)
{
$size:fontsize($fontsize);
$line_height:lineheight($size);
@if$lineheight==auto or $line_height>$lineheight
{
$lineheight:$line_height;
}
font-size: $size;
line-height: $lineheight;
}
header
{
@include font(2);
>h1{
@include font(3);
}
>h2{
@include font(4);
}
}
CSS
header {
font-size: 18px;
line-height: 21.6px;
}
header > h1 {
font-size: 20px;
line-height: 24px;
}
header > h2 {
font-size: 22px;
line-height: 26.4px;
}
import(匯入)
註解(Comment)
分為兩種
一種是 // 只能在scss裡面看到compiler後 css檔案中不會顯示
第二種是 /* */ 能在scss和compiler的css中顯示(小心註解)
結語
scss提供我們可以使用程式化的方式來寫css的樣式，透過程式化語言讓我們可以寫成自己的module，提高自己的工作效率。