Sass 基礎教學 - 高雄前端社群(CSS 讀書會)

$ ruby -v
$ gem install sass
$ sass input.scss output.css #
$ sass --watch app/sass:public/stylesheets 
#

$  
$card-size: 300px;
$card-padding: 30px;
$box-shadow-1: 0 3px 3px rgba(black, 0.16);
.card {
width: $card-size;
box-shadow: $box-shadow-2;
padding: $card-padding;
}

$card-size: 300px;
$card-padding: 30px;
$box-shadow-1: 0 3px 3px rgba(black, 0.16);
.card {
width: $card-size;
box-shadow: $box-shadow-2;
padding: $card-padding;
}

{}
.btn-primary {
background-color: $primary-color;
border-color: $primary-color;
color: white;
&:hover {
background-color: darken($primary-color, 15%);
}
}

&:
.btn-primary {
background-color: $primary-color;
border-color: $primary-color;
color: white;
&:hover {
background-color: darken($primary-color, 15%);
}
}

@import "button";
.btn {
color: #777;
display: inline-block;
…
}

Sass 基礎教學 - 高雄前端社群(CSS 讀書會)

More Related Content

What's hot (6)

Similar to Sass 基礎教學 - 高雄前端社群(CSS 讀書會) (20)

More from Chih-cheng Wang (12)

Recently uploaded (20)

Sass 基礎教學 - 高雄前端社群(CSS 讀書會)