<!--
Sass/SCSS範例網頁(HTML)
By 萌芽系列網站 ‧ Mnya Series Website ‧ Mnya.tw
-->
<div id="box">
<div class="box1">
<div class="title">標題一</div>
內文1:正體中文測試。
</div>
<div class="box2">
<div class="title">標題二</div>
內文2:HELLO WORLD!
</div>
<div class="box3">
<div class="title">標題三</div>
內文3:萌芽網頁 MNYA.TW
</div>
</div>
/*
Sass/SCSS範例網頁(SCSS)
By 萌芽系列網站 ‧ Mnya Series Website ‧ Mnya.tw
*/
/* $ 變數 */
$box1-bgcolor: #8200c3;
$box2-bgcolor: #7d6400;
$box3-bgcolor: #00a56e;
$switch-bgcolor: true;
/* 變色開關:true=開啟, false=關閉 */
$box-color: #fff;
$padding: 2px;
/* @mixin 函數 */
@mixin transition($property, $period) {
-webkit-transition: $property #{$period}s ease;
-moz-transition: $property #{$period}s ease;
-ms-transition: $property #{$period}s ease;
-o-transition: $property #{$period}s ease;
transition: $property #{$period}s ease;
}
@mixin border-radius($radius) {
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
}
/* 開始 */
#box {
display: flex;
margin: 5px;
color: $box-color;
}
.box {
width: 200px;
height: 250px;
margin: 5px 8px;
padding: $padding * 5;
background: #181818;
font: Arial, "Microsoft JhengHei", sans-serif;
font-size: 16px;
line-height: 22px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
@include border-radius(10px);
@include transition(all, 0.5);
.title {
margin: 3px;
padding-left: $padding * 4;
font-size: 20px;
line-height: 28px;
border-left: 8px $box-color solid;
color: $box-color;
@include transition(all, 0.3);
}
&:hover {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
.title {
border-left: 12px $box-color solid;
}
}
}
$list: 1 2 3;
@each $box-num in $list {
.box#{$box-num} {
@extend .box;
}
}
@if $switch-bgcolor==true {
.box1 {
background: $box1-bgcolor;
}
.box2 {
background: $box2-bgcolor;
}
.box3 {
background: $box3-bgcolor;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.