Sass入门

Sass是用ruby语言写的，但跟ruby没有什么关系，可以说它是css的拓展，它让css实现了变量，函数，条件语句，循环等效果。

##sass的安装 要使用sass，前提是要安装ruby环境。 下载地址:rubyinstaller.org/downloads 安装ruby完成后，cmd命令行中执行以下指令安装sass：

gem install sass

我们可以通过nodejs的npm包来下载。 但npm服务器是在国外，不太稳定，可以用下面的方法改变为国内镜像。

npm install cnpm -g --registry=https://registry.npm.taobao.org

然后所有的npm指令都可以改为cnpm来执行。

##编译 拓展名为*.sass用的就是ruby语法，格式非常严格，不适合习惯了css书写的人群，而另外*.scss可以直接使用css的语法，但如果仅仅是这样，就没有必要使用sass。 sass文件浏览器是无法直接识别的，这里需要使用一些指令。 在命令行中：

1.  cd //打开文件的目录

2.  sass --no-cache --watch sass/.:css --style expanded 

• sass 是必须存在的

• --no-cache 不出现临时文件

• --watch 监听文件夹

• sass/.:css 这里冒号之前代表的是选择sass文件夹下所有的文件。.（点）代表所有文件，css代表新建一个css文件夹；

• nested：嵌套缩进的css代码，它是默认值。

  expanded：没有缩进的、扩展的css代码。

compact：简洁格式的css代码。

compressed：压缩后的css代码。

###变量 在sass中,所有的变量都以$开头，

$bgcolor:#f9f9f9;
.box{background-color:$bgcolor;}

###特殊变量 如果要将变量当做属性来写必须用#{}，包裹它；

$decra:left
border-#{$decra}:0;
//border-left:0;

###嵌套 它允许我们做选择器嵌套

#top{
	background:$bgcolor;
	height: 34px;
	line-height:32px;
	border-bottom:1px solid #f2f2f2;
    a:hover{
    	color:$ddcolor;
    }
}

属性嵌套

.shopcart{
      margin:{
          top:20px;
      }
    //margin-top:20px;
}

在嵌套中使用&符号可以代表上级父元素;

.link{
	margin-right:15px;
	color:#999;
    &.first{
    	margin:0;
    }
    &:hover{
    	color:$ddcolor;
    	text-decoration:underline;
    }
}

###mixin函数 混合函数用@mixin 来定义一段重复使用的语句。

@mixin border($w,$c,$decra){
        border:$w + px solid $c;
        border-#{$decra}:0;
}

然后通过@include 来调用它。

@include border(2,$ddcolor,right)

、