sass学习笔记

1.安装

 1)下载 ruby http://www.ruby-lang.org/en/downloads/
 2)安装haml sass
  打开Ruby的命令符面板，输入： gem install haml 和 gem install sass
 3)进入相应的文件中,执行命令
  sass test.scss test.css
  sass --style compressed|nested|compact|expanded test.scss test.css
　* nested：嵌套缩进的css代码，它是默认值。
　　* expanded：没有缩进的、扩展的css代码。
　　* compact：简洁格式的css代码。
　　* compressed：压缩后的css代码。


监听某个文件
　　sass --watch input.scss:output.css
　　监听目录

　　sass --watch app/sass:public/stylesheet

2.变量

    1）默认
$color:red !detault;
    2)全局、局部
$color:red !global;

    3)嵌套 &表示父元素选择器

3.@mixin

    (1)无参数
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}


button {
    @include border-radius;
}


    (2)有参数
@mixin border-radius($w:3px){
border-radius:$w;
-webkit-border-radius:$w;
}
div{
@include border-radius;
@include border-radius(10px);
}
    (3)多个参数
@mixin boxSize($w:100px,$h:200px){
width: $w;
height: $h;
}
.box{
@include boxSize($h:100px);
background: $bgColor;

}

4.继承

    (1)@extend


eg:.error{
color:red;
margin-top:20px;
}
.one{
font-size:40px;
}
.second .error{
@extend .error;
@extend .one;
border: 2px solid blue;

}

5.基本特性

(1)% 占位符

6.运算

        (1)+ - * / %
(2)
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算

}

7.条件与判断

        (1)
p{
@if 2+2==4 {
  border:2px solid red;
}@else{
border: 2px solid blue;
}
}
(2)三目运算符
$isBold:true;
p{
font-weight:if($isBold,bold,normal);
}
(3)for循环
@for $i from 1 through 3{   //1,2,3
.item-#{$i}{
width:100px*$i;
}
}


@for $i from 1 to 3{   //1,2
.item-#{$i}{
width:100px*$i;
}
}


注意：through 包含end,to不包含end
(4)each循环
@each $img in bg1,bg2,bg3{
.#{$img}{
background: url(img/#{$img}.jpg) 0 0 no-repeat;
}
}
(5)while循环
$i:6;
@while $i>0{
.item-#{$i}{
background:red;
}
$i:$i - 2;  //-左右得有空格
}

8.如果我现在有一个color.scss的配置文件，需要引入到style.scss
@import "color";