标签：为我   .net   title   and   blog   link   auto   工具   web框架   

【LJ?Dragon】鱼对水说你看不到我的眼泪，因为我在水里。水说我能感觉到你的眼泪，因为你在我心里。
【LJ?Dragon】You’re more than a shadow, I’ve just to believe.
【LJ?Dragon】A true friend is some one who reaches for your hand and touches your heart.

简介

官网: http://www.sass.hk/guide/

参考: http://www.w3cplus.com/blog/tags/368.html

SASS是CSS3的一个扩展，增加了规则嵌套、变量、混合、选择器继承等等。

通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

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

在SCSS中使用变量

For Example

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

SCSS - HelloWorld

标签：为我   .net   title   and   blog   link   auto   工具   web框架   

原文地址：http://www.cnblogs.com/anstoner/p/6523539.html