Eden 2017.09.08
$primaryColor: #FFD366
.footer
background: $primaryColor
=size($w, $h)
width: $w
height: $h
.result
a
display: inline-block
+size(120px, 120px)
.message
border: 1px solid #ccc
padding: 100px
color: #333
text-align: center
.success
@extend .message
border-color: green
.error
@extend .message
border-color: red
$debug: true
*
@if debug
border: 1 solid #000
li
@for $i from 1 through 4
&:nth-child(#{$i * 2})
margin-left: 20px
@each $evaluation in $evaluations
.result-#{$evaluation}
+result-evaluation(nth($evaluationsColor, $evaluations-idx), nth($chiEvaluations, $evaluations-idx))
$evaluations-idx: $evaluations-idx + 1
$idx: 2
@while $idx < 5
&:nth-child(#{$idx * 2 - 1})
font-size: 16px
$idx: $idx + 1
@import "base/mixin"
.result
a
display: inline-block
+size(120px, 120px)
input[type=number]
background: $auxiliaryColor + 30
border: 2px solid $primaryColor
a
display: inline-block
+size(120px, 120px)
background: $primaryColor
color: $auxiliaryColor
&:hover
box-shadow: 0 1px 6px 3px opacify($primaryColor - 30, 0.64)
http://sass-lang.com/documentation/Sass/Script/Functions.html
img
position: absolute
bottom: 7%
left: 45%
display: inline-block
border-radius: 50%
+size(20px, 20px)
border: 2px solid $auxiliaryColor
cursor: pointer
@media screen and (max-width: 992px)
left: 40%
@media screen and (max-width: 767px)
left: 46%
主要是針對CSS3，import後利用mixin來寫一些針對CSS3的語法，可解決一些跨瀏覽器語法的問題。也可以做Layout，or 一些基本設定。
範例：border-radius的CSS3使用
@import compass
.button
+border-radius(10px)
+opacity(0.7)
不過 Compass 已經確定不再維護，取而代之的是 PostCSS。
PostCSS 本身就是 .css ，只是透過工具去優化目前的 CSS。