Preprocessing預處理
CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again.
Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your web?site.
The most direct way to make this happen is in your terminal. Once Sass is installed, you can runsass input.scss output.cssfrom your terminal. You can watch either individual files or entire directories. In addition, you can watch folders or directories with the--watchflag. An example of running Sass while watching an entire directory is the following:
????sass --watch app/sass:public/stylesheets
SASS致力于解決CSS越來越復雜，越來越大，難以維護的痛點
特性：variables, nesting, mixins,partials, inheritance
1.Variables抽象變量
$font-stack: Helvetica,sans-serif;
$primary-color: #333;
body{
????font:100% $font-stack;
????color: $primary-color;
}
2.Nesting嵌套
nav{
????ul{
????????margin:0;
????????padding:0;
????????list-style:none;
????}
????li{
????????display:inline-block;
????}
????a{
????????display:block;
????????padding:6px12px;
????????text-decoration:none;
????}
}
3. Partials/ Import 局部化與整體化
// _reset.scss
html,
body,
ul,
ol{
????margin:0;
????padding:0;
}?
// base.scss
@import'reset';
body{
????font:100% Helvetica, sans-serif;
????background-color:#efefef;
}
4.Mixins 宏/模板
@mixin border-radius($radius){
????-webkit-border-radius:$radius;
????-moz-border-radius:$radius;
????-ms-border-radius:$radius;
????border-radius:$radius;
}
.box{ @include border-radius(10px); }
5.Extend/Inheritance 擴展/繼承（直接把一個內容當模板復用）
.message{
????border:1px solid #ccc;
????padding:10px;
????color:#333;
}
.success{
????@extend .message;
????border-color:green;
? ?}
.error{
????@extend .message;
????border-color:red;
}
.warning{
????@extend.message;
????border-color:yellow;
}
