sass的安装和用法

先来哈拉一段：

sass这个按每个人的想法吧，有的人写习惯了就不想用，有的人想尝试新的东西就想用，这个不能说好，不能说坏，所以就自己看着办吧。

1、sass的安装

淘宝RubyGems镜像安装 sass
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources 
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

sass -v

这一系列做完，你的sass就安装好了

2、sass的用法

因为我们前面安装的sublime text2而且里面涉及到sass的插件也默认大家都安装了，所以就新建一个.scss文件吧，然后就可以用sublime打开，开始写sass吧，写完保存，自动会编译的，是不是很方便啊？

变量

定义变量：$linkColor:red;

1、变量默认值！default

$color:red;
$color:blue !default;
p{    color:$color;//red}

2、变量用#{}包裹

一般来说，我们设置的变量都是用于属性值的，而如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。
 background: url(#{$img-src}topbg.png) no-repeat;

3、变量后面加...

@mixin box-shadow($shadow...){
    -webkit-box-shadow:$shadow;
    -moz-box-shadow:$shadow;
    box-shadow:$shadow;
}

$shadow...这样写是因为box-shadow中的属性有1px 1px 2px #333,这些属性值

4、多个变量一起声明

其实这个还是很实用的，把多个相关的值写在一个变量里，然后通过nth($var,index)来获取第几个值。

$linkColor: red blue !default;
a{    
     color:nth($linkColor,1);   
    &:hover{color:nth($linkColor,2);}
}

嵌套

dom嵌套
ul{
   li{
     a{color:red}
   }
}

属性嵌套
p{
 border:{
    color:red
 }
}

继承

(1)

@mixin left($value:10px){
   float:left;
   margin-left:$value;
}
div{
   @include left(20px);
}
p{
@include left(30px);
}

输出：

div {
  float: left;
  margin-left: 20px; }
p {
  float: left;
  margin-left: 30px; }

Tips:这里的输出不能进行合并

(2)

.class1{
border:1px solid #ddd;
}
.class2{
  @extend .class1;
  font-size:120%;
}

.class3{

@extend .class1;

color:#333;

}

输出：

.class1, .class2, .class3 {
  border: 1px solid #ddd; }


.class2 {
  font-size: 120%; }


.class3 {
  color: #333; }

Tips：这里的输出，把相同的提出进行合并

(3)

%类名{

   margin:10px 5px;

}

ul{

@extend %类名;

color:#333;

}

div{

@extend %类名;

background:red;}

输出：

ul,div{

margin:10px 5px;

}

ul{

color:#333;

}

div{

background:red;

}

Tips：这里的输出，把相同的提出进行合并

@import命令插入外部文件_mixin.scss

@import "mixin";