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;
}
网友评论