sass-实现响应式

http://www.w3cplus.com/preprocessor/the-solution-to-media-queries-in-sass.html

banner.scss

.banner { 
    text-align: center; 
    font-size: 14px; 
} 
// 引入media-queries.scss 
@mixin banner--sm() { 
    .banner { 
        font-size: 20px; 
    } 
}
 @mixin banner--md() { 
    .banner { 
        text-align: left;
        font-size: 25px; 
    } 
}        

media-queries.scss

// small screen size (sm) 
@media (min-width: 801px) { 
    @include banner--sm(); 
} 

// medium screen size (md) 
@media (min-width: 992px) { 
    @include banner--md() 
}