sass学习、sass语法、sass函数、编辑工具koala

sass学习

一、sass与scss的区别：

sass定义

sass是一种基于css的预处理语言，在css的基础上进行简化，sass可以定义变量、嵌套、扩展、条件判断、循环等功能。

sass目前有两种语法规则：sass、scss。

1） 第一种语法规则sass,又被称为缩进语法，该种语法不使用大括号、分号，而是通过缩进来指定块。文件扩展名为.sass
2） 第二中语法为scss,该语法与我们平时的css语法差不多，使用大括号、分号。scss是sass3引入新的语法，该语法完全兼容css3,并且继承了sass的强大功能，另外还能识别大部分css hacks和特定于浏览器的语法（这真是太好不过了）。文件扩展名为.scss。

scss更和平常css写法类似，平常一般用scss作为后缀

二、sass语法

1.导入：@import

sass的导入规则与css有所不同。

2.注释

1）多行注释：/**/
2)当行注释：//
css只有一种注释方式：//

3.变量

1)普通变量：ex:$var:#ccc；

$colorPra: 12px;
body{
    font-size:$colorPra;
}

2)默认变量：ex: $var: 1.5 !default;【用来设置默认值】

$heightH1:        1.5 !default;
body{
    line-height: $heightH1; 
}

默认变量设置默认值，根据需求覆盖

$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

3)特殊变量
该类变量可以设置 属性 或在某些特殊情况下使用。

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

4)多值变量：list ，map

$pxA:500px 200px 300px ;//一维数组
$borderM:(1px solid #ccc),(2px dashed #000);  //二维数组
.aa{
    width:nth($pxA,1);
    height:nth($pxA,3);
    border:nth($borderM,1)
}
.bb{
 border:nth($borderM,2);
}

5)全局变量：!global

4.嵌套

1）选择器嵌套
2）属性嵌套
3）跳出嵌套：@at-root
@at-root (without: all/rule(默认值)/media/support)
@at-root (with: …)

5.混合:@mixin @include

1)无参数：

@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

2）有参数

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

等同于

.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}

3)多个参数

@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

等同于

.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

6.@content

7.继承:@extend

h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

8.占位选择器: %

9.函数

在sass中有已经定义好的函数使用，比如我们经常使用的颜色函数：lighten($color,$amount)和darken($color,$amount)，但是我们也可以自己定义自己需要的函数。

$fontSizeDefault:      16px !default;
$gray:              #000 !defualt;        

@function pxTorem($px) {
  @return $px / $fontSizeDefault* 1rem;  //将像素px转化为rem值
}

.aa{
  font-size:pxTorem(30px);
  background:$gray;
  &:hover{
     background:lighten($gray,10%);  //颜色函数计算
  }
}

10.运算：+- * /

进行运算的只能是可以进行 + = /* 的数值型属性（ex:数字、颜色、变量等），在进行运算的时候需要在运算符前后空格，否则会出错。

$pxA:500px 200px 300px ;//一维数组
.tt{
    color:#fff;
    width:1200px - nth($pxA,1); //进行-运算
}

11.条件判断及循环

1）@if 或者 @if @else if @else判断

$ifTrue :true;   //true false 在sass 可作为判断条件
.ab{
    @if $ifTrue{
        display:inline-block;
    }
}

结果为：

.ab {
  display: inline-block;
}

注：当$ifTrue 值为false 时，.ab类中的display是没有的。

2）三目判断
3）for循环
4）@each循环
5）多个字段list、map数据循环

四、函数统计

很多函数平常是用不上的，但是这里罗列出一些函数，方便以后使用

序号	函数类别	函数	注释
1	控制命令	@if
2	控制命令	@for
3	控制命令	@while
4	控制命令	@each
5	控制命令	@for
6	字符串函数	unquote()
7	字符串函数	quote()
8	字符串函数	To-upper-case()、To-lower-case()
9	数字函数	percentage()
10	数字函数	round()
11	数字函数	ceil()
12	数字函数	floor()
13	数字函数	abs()
14	数字函数	min()、max()
15	数字函数	random()
16	列表函数	length()
17	列表函数	nth()
18	列表函数	join()
19	列表函数	append()
20	列表函数	zip()
21	列表函数	index()
22	列表函数	Introspection函数
23	列表函数	unit()
24	列表函数	unitless()
25	列表函数	comparable()
26	列表函数	Miscellaneous函数
27	列表函数	Map函数
28	列表函数	Maps函数:map-get($map,$key)、map-values($map)、map-merge($map1,$map2)
29	列表函数	Map函数map-has-key($map,$key)、map-keys($map)
30	列表函数	Map函数map-remove($map,$key)、keywords($args)
31	颜色函数	RGB()
32	颜色函数	RGBA()
33	颜色函数	Red()、Green()、Blue()
34	颜色函数	Mix()
35	HSL函数	lighten()
36	HSL函数	saturate()
37	HSL函数	adjust-hue()
38	HSL函数	grayscale()
39	Opacity函数	alpha()、opacity()
40	Opacity函数	rgba()
41	Opacity函数	opacify()、fade-out()

@规则：

序号
1	@import
2	@media
3	@extend
4	@at-root
5	@debug
6	@warn
7	@error

五、工欲善其事必先利其器，sass编辑工具koala

koala用起来非常方便，在项目中使用sass时，该软件配合SublimeText使用，将scss文件自动编为css文件。

附上sass地址,保留地址，方便以后查看。

http://www.w3cplus.com/sassguide/

http://www.sass.hk/docs/