SCSS 變數
使用 $ 開頭,後方再放入所要設定的參數值就可以了。
$變數名稱: 值;
$color: red;
$size: 20px;
變數可以使用運算
font-size: $size*2
margin: $size*0.5 $size
SCSS 巢狀結構(Nesting)
透過巢狀結構可以清楚的知道元素上下層的關係。
.container{
max-width: 1280px;
margin: 0 auto;
.post{
border: solid 1px #333;
}
}
SCSS 函式 Mixins
將重複性的工作使用@mixin蒐集好後,利用@include帶入。
SCSS 的函示 還可以帶入參數。
//建立
@mixin + 名稱({語法內容};
//插入
@include + 名稱;
建立 @mixin 語法庫
//建立 ul 語法庫,套用在 ul 上
@mixin ul-flex{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
使用 @include 引入
ul{
@include ul-flex;
}
@mixin + 變數
@mixin 名稱後面,加上小括弧並含變數,裡面的css值套用變數名稱
@mixin size($w,$h,$bgc){
width: $w;
height: $h;
background-color: $bgc;
}
.box{
@include size(50px,100px,#555)
}
@mixin + @media 響應式網頁
在修改時不需要修改很多地放,這種方法可以幫助我們簡化流程。
不同的是:
@mixin在大括號式寫組合語法。
@media大括弧中內容不能向寫組合語法一樣同個模板,會依地方不同而不一樣。
所以可以再@media內加上@content。
先定義好每個視窗時的大小,裡面的內容可以等到引入時寫。
//eg:
@mixin pad{
media(max-width: 768px){
@content
}
}
.header{
font-size: 25px;
@include pad{
font-size: 40px;
}
}
.footer{
font-size: 25px;
@include pad{
font-size: 50px;
}
}
SCSS @import
@import(匯入)方便我們管理多個SCSS檔案,當css東西愈來越多,我們可以先將檔案依功能(eg:@media)或頁面分成一個一個小檔案。在使用@import統整式all.scss。
//分成小檔案的檔名注意,前面要加上底線
_media.scss
_variables.scss
_reset.scss
_mixin.scss
//導入 all.scss
@import "media"
@import " variable"
@import "reset"
@import "mixin"