sass或scss入门

1、sass环境搭载：

安装ruby

安装sass

安装compass

配置webstorm

如果只是使用sass的话，就配置sass命名监听就好了

如图：

sass目录如下：

如果配置了compass要监听compass命令，如图：

compass目录如下：

2、基本语法：

@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;
}

编译之后：

/* 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:;
  *display: inline;
  position: absolute;
  top:;
  bottom:;
  left:;
  right:;
}
/* 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:;
}

/* 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;
}

重点是五个模块

@import "compass/css3";
@import "compass/layout";
@import "compass/typography";
@import "compass/utilities";
@import "compass";
宏定义：@include
继承虚拟类：

@extend %