SASS、SCSS和css的关系

搜索了一下，发现国内很少人认识SASS和SCSS，故在此介绍一下他们。

SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

 

SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。

 

例如：

---------------------------------

在SCSS中使用变量

---------------------------------

 

 

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

  border-color: $blue;

  color:

    darken($blue, 9%);

}

.border {

  padding: $margin / 2;

  margin: $margin / 2;

  border-color: $blue;

}

转换成CSS如下：

 

/* CSS */

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}

.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce;

}

-------------------------------------------

SCSS嵌套：

-------------------------------------------

 

table.hl {

  margin: 2em 0;

  td.ln {

    text-align: right;

  }

}

li {

  font: {

    family: serif;

    weight: bold;

    size: 1.2em;

  }

}

转换成CSS如下：

 

/* CSS */

table.hl {

  margin: 2em 0;

}

table.hl td.ln {

  text-align: right;

}

li {

  font-family: serif;

  font-weight: bold;

  font-size: 1.2em;

}

有兴趣的同学可以到官方网站去了解一下，http://http://sass-lang.com/ ，英文的。

本文转自：

搜索了一下，发现国内很少人认识SASS和SCSS，故在此介绍一下他们。

SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

 

SCSS即是SASS的新语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于SASS。

 

例如：

---------------------------------

在SCSS中使用变量

---------------------------------

 

 

$blue: #3bbfce;

$margin: 16px;

.content-navigation {

  border-color: $blue;

  color:

    darken($blue, 9%);

}

.border {

  padding: $margin / 2;

  margin: $margin / 2;

  border-color: $blue;

}

转换成CSS如下：

 

/* CSS */

.content-navigation {

  border-color: #3bbfce;

  color: #2b9eab;

}

.border {

  padding: 8px;

  margin: 8px;

  border-color: #3bbfce;

}

-------------------------------------------

SCSS嵌套：

-------------------------------------------

 

table.hl {

  margin: 2em 0;

  td.ln {

    text-align: right;

  }

}

li {

  font: {

    family: serif;

    weight: bold;

    size: 1.2em;

  }

}

转换成CSS如下：

 

/* CSS */

table.hl {

  margin: 2em 0;

}

table.hl td.ln {

  text-align: right;

}

li {

  font-family: serif;

  font-weight: bold;

  font-size: 1.2em;

}

有兴趣的同学可以到官方网站去了解一下，http://http://sass-lang.com/ ，英文的。谢谢~