1、sass环境搭载：
安装ruby
安装sass
安装compass
配置webstorm
如果只是使用sass的话，就配置sass命名监听就好了
如图：
sass目录如下：
如果配置了compass要监听compass命令，如图：
compass目录如下：
2、基本语法：
代码语言：javascript复制@import "compass/css3";
@import "compass/layout";
@import "compass/typography";
@import "compass/utilities";
@import "compass";
.round{
@include border-radius(15px);
@include opacity(0.6);
@include inline-block;
@include sticky-footer(54px);
@include stretch;
}
a{
@include link-colors(#00c,#0cc,#c0c,#ccc,#cc0);
}
.clearfix{
@include clearfix;
}
table{
@include table-scaffolding;
}
.icon{
background:inline_image("grid.png");
}
#main {
width: 97%;
p, div {
font-size: 2em;
a { font-weight: bold; }
}
p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000; }
}
pre { font-size: 3em; }
}
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
color:#123456;
}
}
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
.notice {
@extend %extreme;
}编译之后：
代码语言：javascript复制/* line 6, ../sass/test.scss */
.round {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
opacity: 0.6;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
*zoom: 1;
*display: inline;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* line 10, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.round html, .round body {
height: 100%;
}
/* line 12, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.round #root {
clear: both;
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -54px;
}
/* line 18, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.round #root #root_footer {
height: 54px;
}
/* line 20, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/layout/_sticky-footer.scss */
.round #footer {
clear: both;
position: relative;
height: 54px;
}
/* line 13, ../sass/test.scss */
a {
color: #00c;
}
/* line 18, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss */
a:visited {
color: #ccc;
}
/* line 21, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss */
a:focus {
color: #cc0;
}
/* line 24, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss */
a:hover {
color: #0cc;
}
/* line 27, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/typography/links/_link-colors.scss */
a:active {
color: #c0c;
}
/* line 16, ../sass/test.scss */
.clearfix {
overflow: hidden;
*zoom: 1;
}
/* line 2, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/tables/_scaffolding.scss */
table th {
text-align: center;
font-weight: bold;
}
/* line 5, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/tables/_scaffolding.scss */
table td,
table th {
padding: 2px;
}
/* line 8, C:/Ruby23-x64/lib/ruby/gems/2.3.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/tables/_scaffolding.scss */
table td.numeric,
table th.numeric {
text-align: right;
}
/* line 22, ../sass/test.scss */
.icon {
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAASCAYAAAApH5ymAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAABISURBVEiJY3zx/vd/hgEA4gIsRKljorE7KAajDqQUjDqQUjDqQErBqAMpBaMOpBSMOpBSMOpASsGgdyAL4693A2Lxq1fEqQMATrMH3/OsPu4AAAAASUVORK5CYII=');
}
/* line 25, ../sass/test.scss */
#main {
width: 97%;
}
/* line 28, ../sass/test.scss */
#main p, #main div {
font-size: 2em;
}
/* line 30, ../sass/test.scss */
#main p a, #main div a {
font-weight: bold;
}
/* line 32, ../sass/test.scss */
#main p {
color: #00ff00;
width: 97%;
}
/* line 35, ../sass/test.scss */
#main p .redbox {
background-color: #ff0000;
color: #000000;
}
/* line 39, ../sass/test.scss */
#main pre {
font-size: 3em;
}
/* line 41, ../sass/test.scss */
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
font-color: #123456;
}
/* line 49, ../sass/test.scss */
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em;
}重点是五个模块
代码语言：javascript复制@import "compass/css3";
@import "compass/layout";
@import "compass/typography";
@import "compass/utilities";
@import "compass";
宏定义：@include
继承虚拟类：@extend %
