sass或scss入門

標籤：tab   環境   min   add   center   安裝   ott   lib   notice   

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

重點是五個模組

@import "compass/css3";
@import "compass/layout";
@import "compass/typography";
@import "compass/utilities";
@import "compass";
宏定義：@include
繼承虛擬類：

@extend %

 

sass或scss入門