sccs学习

学习scss首先得学会使用工具koala。

下载地址：http://koala-app.com/index-zh.html

下载安装都很简单，记住地址即可，如果样式中涉及到中文，需要在koala的文件加下，寻找Koala\rubygems\gems\sass-3.2.9\lib\sass\engine.rb文件；

在图中位置添加Encoding.default_external=Encoding.find('utf-8')，作为汉字适配；

而后选中文件执行编译即可，不过它是自动执行的，

scss语法：

1.变量，值

$h1:red;        //标准的键值对

.h1a{
color:$h1;     //需要的地方带入变量即可；
line-height:40px;
font-family:"微软雅黑";
};

一个变量多个值得时候，如下：

$textColor:#00ff00 #ff00ff #ffff00; 

.content{
    width:$divWidth;
    background:nth($textColor,3);
    h1{
        color:$h1;
    }
    p{
       text-indent:$text-indent;
       color:nth($textColor,1);
     &:hover{
           color:nth($textColor,2);
        }
     }
}

nth(变量，值得位置（从1开始）)；

&代表p，即p的hover效果；

 标签选择器的嵌套式在这里也适用；

可以使用&表示父元素选择器；

 @mixin 定义混合变量

@include 调用变量

参数以$开头

实例如下：

函数设置

@mixin opacity($opacity:50){          //$opacity为参数，:50，作为此参数的默认值，在没有参数取掉默认值，用键值方式写默认值         

opacity:$opacity/100;
filter:alpha(opacity=$opacity);
}

函数调用

h2{
@include opacity(30);                 //有参数
}
h3{
@include opacity;                      //没有参数，取用默认值
}

 多组参数时

@mixin box-shadow($shadow...){               //多组不确定参数，以...代替，在调用时自己添加，也能最大限度的代码重用
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}

@include box-shadow(0 2px 2px rgba(0,0,0,0.3),0 3px 3px rgba(111,34,0,0.3),0 4px 4px rgba(0,0,0,.3));

 css样式继承  @extend 

实例：

.h2{                         //被继承样式

color:rgba(112,231,222,0.2);

}

p{

@extend .h2;           //继承样式选择器

}

占位选择器 %   同样用@extend调用

%clearfix{ @if $lte7 { *zoom: 1; } &:before, &:after { content: ""; display: table; font: 0/0 a; } &:after { clear: both; } }

div{

@extend %clearfix;                                 //基础样式的复用

}

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。