赞
踩
1.SASS介绍
SASS是基于Ruby的 CSS预处理器。less是基于JavaScript的CSS预处理器。
对于大文件的编译,SASS是略胜less。
2.应用示例
入门小网站:www.w3cplus.com/sassguide/
建立如下工程目录:
|test
|-index.scs
(1)变量
index.scss的代码如下:
$fontStack:Helvetica, sans-serif;
$primaryColor:#333;
body{
font-family:$fontStack;
color:$primaryColor;
}
h1{
color:$primaryColor;
}
编译:sass index.scsss >index.css
(2)嵌套
//sass style
//--------------------------------
nav {
ul{
margin:0;
padding:0;
list-style:none;
}
li{
display:inline-block;
}
a{
display:block;
padding:6px 12px;
text-decoration:none;
}
}
编译:sass index.scss >index.css
(3)导入
//reset.scss
html,
body,
ul,
ol{
margin:0;
padding:0;
}
//base.scss
@import 'reset';
body{
font-size:100% Helvetica,sans-serif;
background:#efefef;
}
更多的例子可以看看网站的链接。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。