首页 > 代码库 > SCSS - HelloWorld

SCSS - HelloWorld

【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