1.安装:
1)安装ruby,
2)更换gem源,尝试了一下中文网那个淘宝源不好使。在网上找了其他的:gem sources -a http://gems.ruby-china.org
但是gem sources -1还是不能打印出来,不过直接进行安装gem install sass, 显示安装成功。
install compass,显示安装成功。
2.编译sass
1)命令行编译:sass input.scss output.css
2)koala编译
3.基本语法:
1)文件后缀名:.sass, .scss。scss相对对于格式要求较松。
2)导入:@import,将@import的scss文件合并只生成一个css文件。
命名:_mixin.scss,寄出的文件命名以_开头,文件导入时可以不写下划线。@import "mixin".
2)注释:标准css注释:/**/或//
3)变量:变量必须以$开头,后面紧跟变量名。变量值与变量名之间用冒号分开。
a)普通变量:定以后可全局使用,
9. sass可以进行运算,运算符前后有空格,否则会报错。
4)@each:@each $var in <list or map>
1)安装ruby,
2)更换gem源,尝试了一下中文网那个淘宝源不好使。在网上找了其他的:gem sources -a http://gems.ruby-china.org
但是gem sources -1还是不能打印出来,不过直接进行安装gem install sass, 显示安装成功。
install compass,显示安装成功。
2.编译sass
1)命令行编译:sass input.scss output.css
2)koala编译
3.基本语法:
1)文件后缀名:.sass, .scss。scss相对对于格式要求较松。
2)导入:@import,将@import的scss文件合并只生成一个css文件。
命名:_mixin.scss,寄出的文件命名以_开头,文件导入时可以不写下划线。@import "mixin".
2)注释:标准css注释:/**/或//
3)变量:变量必须以$开头,后面紧跟变量名。变量值与变量名之间用冒号分开。
a)普通变量:定以后可全局使用,
$fontSize: 12px;
body{
font-size:$fontSize;
}
b)默认变量:仅需在值后面加上!default
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
c)特殊变量:定义的变量是属性值。但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
d)多值变量:list或map类型。
list
//sass style
//-------------------------------
$linkColor: #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}
map
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
4. 嵌套
1)选择器的嵌套:一个选择器集成另一个选择器
2)属性嵌套:当属性有相同的开始单词时,嵌套。
5.混合
sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用。
//sass style
//-------------------------------
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
@include center-block;
}
//css style
//-------------------------------
.demo{
margin-left:auto;
margin-right:auto;
}
mixin也可以带有参数值。
//sass style
//-------------------------------
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
//css style
//-------------------------------
.opacity{
@include opacity; //参数使用默认值
}
.opacity-80{
@include opacity(80); //传递参数
}
@content用来解决@media的问题
//sass style
//-------------------------------
@mixin max-screen($res){
@media only screen and ( max-width: $res )
{
@content;
}
}
@include max-screen(480px) {
body { color: red }
}
//css style
//-------------------------------
@media only screen and (max-width: 480px) {
body { color: red }
}
6. 继承:@extend,一个选择器可以继承另一个的样式,而且有不相同的样式时,可以对样式进行重写。
//sass style
//-------------------------------
h1{
border: 4px solid #ff9aa9;
}
.speaker{
@extend h1;
border-width: 2px;
}
//css style
//-------------------------------
h1,.speaker{
border: 4px solid #ff9aa9;
}
.speaker{
border-width: 2px;
}
7.占位选择器。避免冗余,对基础样式的处理,在基础验前加上%,通过extend调用。
//sass style
//-------------------------------
%ir{
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
#header{
h1{
@extend %ir;
width:300px;
}
}
8. 函数:通过@function定义函数。
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
9. sass可以进行运算,运算符前后有空格,否则会报错。
10.条件判断及循环:
1)@if,@else。
2)三目判断:if($condition, $if_true, $if_false)
3)for循环:@for $var from <start> through <end>和@for $var from <start> to <end>。这两个的区别是关键字through表示包括end这个数,而to则不包括end这个数。
//sass style
//-------------------------------
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
//-------------------------------
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
4)@each:@each $var in <list or map>
//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
代码参考:https://github.com/YZlingyu/teambition/blob/master/css/index.scss