sass入门重点从安装到语法

查看安装http://www.w3cplus.com/sassguide/

和在hbuilder里面配置环境http://blog.csdn.net/qq_37617413/article/details/65632848

在这里放一张我安装时命令行的输入；

我以为环境配置完就好了吗？该怎么编译成css呢？css文件又放在那里呢？

1.、你可以在开始里面搜索ruby。在这里找到他的指令窗口。

2、然后命令行输入你的scss所在的绝对路径和你希望他保存文件的绝对路径（注意这里的文件名不能有空格）。加上watch就可以监听scss文件了。

我在这里面遇到一个错误就是开始在hbuilder里面配置好环境以后不知道怎么去做了。scss文件也会写了，但是不知道他是怎么编译成css的，一直报错

自动编译(\111\css\new.scss)失败：
Errno::ENOENT: No such file or directory @ rb_sysopen - –no-cache
  Use --trace for backtrace.

如果你也遇到了这个问题，那你就按照我上面/1/2步骤来就不会有这个问题了。而且注意

------------------------------------------------------------------------

变量 ： $变量名

后面用！default代表默认值，如果你想覆盖默认值，就在这个默认值前面在从新定义。

（默认变量的价值在进行组件化开发的时候会非常有用。）

$baseLineHeight:2;

$baseLineHeight:1.5 !default;

body{line-height: $baseLineHeight;}

编译出来的结果是

body{line-height:2;}

------------------------------------------------------------------------

多值变量

多值变量分为list类型和map类型 .list相当于一位数组。map相当于js里面的对象

1/list

$px: 1px solid #ccc;

$margin:2px 3px 20px 0px; 用逗号空格小括号分割多个值，使用nth(变量名,索引)取值

$linkColor:#08c#333 !default;//第一个值为默认值，第二个鼠标滑过值

a{color:nth($linkColor,1);

&:hover{color:nth($linkColor,2);

}

}

编译成css的结果

a{color:#08c}

a:hover{color:#333}

2/map

$heading:(h1:2em,h2:1.5em,h3:1.2em)键值对的形式，用逗号隔开。使用 map-get(变量名,索引值)

$heading:(h1:2em,h2:1.5em,h3:1.2em)

@each $header, $sizein$heading { //这里用了循环 each in ，这里的$header, $size就是里面的建，值

#{$header} {

font-size: $size; }

}

编译出的css是：

h1 { font-size:2em; }

h2 { font-size:1.5em; }

h3 { font-size:1.2em; }

------------------------------------------------------------------------

 父选择器引用：&

a{

 text-decoration:none;

   &:hover{color:blue;}

}

------------------------------------------------------------------------

混合(mixin)

@mixin  代码块命名(参数[可选]){...代码块}

使用@include  代码块的名字(参数[可选])

@mixin  mycolor{

   color:#000;

   background-color:#000;

   border:1px solid #000;

}

#name{

 @include mycolor;

}

编译之后的css是：

#name{

  color:#000;

   background-color:#000;

   border:1px solid #000;

}

这个是没有参数的。那有参数的是什么样呢？看下面：

@mixin  param( $color, $border){     //当然你也可以给这个参数默认值，但是如果再传过的参数又给值的话会覆盖这个。如果这里有默认值了你也不想覆盖它，就可以直接省略在include里面给它传参。

    color:$color;

    border:$border;

}

#name{

  @include  param(green,1px solid #333) ;  //把这个green传给参数$color .1px solid #333传给$border 

}

最后编译出来是

#name{

  color:green;

  border:1px solid #333;

}

------------------------------------------------------------------------

继承

@extend后面紧跟需要继承的选择器。

比如：@extend .类名;/@extend #id名;/@extend 标签名;

.class1{

font-size:10px;

}

.class2{

@extend class1;

color:red;

}

编译成css

.class1{

font-size:10px;

}

.class2{

font-size:10px;

color:red;

}

------------------------------------------------------------------------

函数

@function 函数名(参数){

}

sass定义了很多函数可供使用。实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。因为是定义好的所以可以直接用。

$grey:#34345;

color：lighten($grey,10%); //颜色在#34345的基础上减淡10%

color:darken($grey,10%)； //颜色在#34345的基础上加深10%

自己定义的函数

$baseFontSize:16px;

@function pxToRem($px) {

@return $px / $baseFontSize * 1rem;

}

.test{font-size:pxToRem(16px);} 也就是16px/16px=1px;

编译结果：

.test{font-size:1px;}