note of learning sass

sass

1. sass编译css的四种格式

nested 嵌套
compact 紧凑
compressed 压缩
expanded 扩展

2. sass笔记

1. 变量： $varialbeName
2. 嵌套：
   

   father{
   statement;
   chile{
   statement;
   }
   }

3. 嵌套时调用父选择器:

{
    father{
        statement;
        child{
            statement;
        }
        &:hover{//使用&可以调用付选择器
            statement
        }
    }
}

4. 属性嵌套：

eg:

    selector{
        (fatherAttribute)font:{
            family:xxxx;
            size:xxx;
            weight:800;
        }
    }

5. 定义mixin 混合

mixin: 定义好的css样式
@mixin 名字 (参数1，参数2...){
...
}

• 参数一般是确定值. 或者带有具体值的变量
• 使用方法是：@include mixinName;
• 如果嵌套的话，会自动在css中解出来。

6. mixin里的参数；

• 在mixin方法名字后面跟圆括号，里面添加参数名，参数的名字需使用
  $开头。
• darken函数
  - synax: darken(color,%)

7. 继承或扩展

1. 扩展的选择器拥有被扩展的选择器的所有样式，并且自己的不同之处会独自保留。
2. 被扩展的选择器的子选择器汇集成付选择器的样式，并且其他的扩展的选择器的同样子类也会个该子类用用同样的样式。

8. @mixin 和 @function的区别

• @mixin可以说是一个定义好的样式，不属于任何选择，大家都可以使用。
• @function是函数，或者功能类的东西，一般需要计算和逻辑运算。

9. @import 和Partial

• @import导入功能
  一个sass文件里面导入其他的部分
• partials是sass文件的小的部分，他们组成的额sass文件编译时可以编 译成一个css文件，这样可以减少服务器浪费
• partials文件的名字前面用一个下划线开头。
• 导入partials时，@import "name";
  引号是需要的，不需要下划线，也不需要带$符号。

10. 注释

三种：单行. 多行. 强制

多行

/*
*日出东方
*你说啥类？
*/

在编译成css文件时会保留，如果是压缩格式则不保留

单行

//见天很好

无论哪种编译格式都不会被保留

强制：

/*!
*天王盖地虎
*宝塔镇河妖
*/
这种注释会一直出现在css里面

11. 数据类型

css属性的值. sass变量的值：数字 字符串 颜色 列表
方法，type-of(value)可以识别出数据类型
数字类型（单位），数值类型可以添加单位
列表数据：数据之间可以用空格或者逗号来分开
颜色：rgb(a) hsl(a) 颜色名字 hex进制
sass交互命令模式：sass -i

12. 数值

• 可能包含单位
• 可进行数学运算
• 注意除法/的使用。（在font中表示行间距，确实想要用除法的话可以使用()圆括号抱住）
• 乘法. 除法带单位运算的几个点：
  
  1. 一个数值带单位，则可运算，且结果带单位
  2. 除法两个数字带单位，可运算，结果不带单位
  3. 乘法两个带单位，可运算，结果带两个单位

13. 数字函数

• abs()绝对值，带单位
• round()四舍五入
  
  • ceil()往上取整
  • floor()往下取整
• percentage()百分数
• min()取几个数中较小的
• max()取几个数中最大的

14. string字符串

• 带引号，可包含空格，特殊符号之类
• 不带引号
• +操作符，也可使用-,/之类。除号不可用。
  如果是不带引号的字符串开头加其他字符串，在css中则不带引号

15. 处理字符串函数

• &variable
• to-upper-case()大写
• to-lower-case()
• str-length()
• str-index(variablename,"str")
• str-insert(variable1,varibla2,num)前者出入到后者的指定位置

16颜色

• hex:#xxxx rgb() hsl(色相 饱和度 亮度/明度) str

17. 颜色函数

• rgb（1,2,3）值为0~255，也可用百分比。
• rgba（1，2,3,4）第四个值是alpha通道即-透明，取值范围是0~1，
• HSL(h,s,l)h-heu色相/色调 取值为0到360； s-saturation饱和度取值为百分比；l-lighter亮度，取值为百分比。
  HSLA，第四个是alpha通道，设值类似rgba。

18. 颜色函数：-adjust-hue

• adjust-hue可调这色相
• syntax:adjust-hue(a要调整的颜色，要调整的度数+deg)；

19. 颜色函数lighten,harden

• syntax:lighten(要处理的颜色,要增加的明度%)；
• syntax:darken(要处理的颜色，要增加的度数%)

20. 颜色函数:saturate,desaturate增加和减少颜色纯度

syntax:saturate(要改变的颜色，要改变的的度数%)
syntax:desaturate(要改变的颜色，要改变的的度数%)

21. 颜色函数opacify,transpatentize改变颜色的透明度

syntax:opacify(要改变的颜色，要改变的的值
syntax:transparentize(要改变的颜色，要改变的的值)
结果的值采用rbga的方式。

22. 列表 list

列表数值可用空格分隔，也可用逗号分隔，也可用括号

23. 列表函数

• length(list)获取列表长度
• nth(list,index)或许列表中值，index从1开始。
• index(list,value)或许值的位置
• append(list,value)把value插入到list中
• join(list-1,list-2)把两个列表合并。

24. -map相关的函数,命名的列表

类似于python中的字典，内部的格式为：“键：值”中间用逗号分开。

• map-get(map,key)返回map中key对应的值。
• map-keys(map),返回中所有的key
• map-values(map)，返回map中所有格值
• map-has-key(map,key),返回map中是否存在key
• map-merge(map-1,map2),合并两个map
• map-remove(map,key1,key2...),从map中移除对应的键值。

25. 布尔值true/false

<,>,and,or,not

26. interplation插入

把一个值插入到另一个值里面
使用
syntax:#{value/$var}变量值插入到另一个对象里面

27. 控制指令control-directives

@if   @for   @each   @while

28. @if

@if 条件{
...
}[@else if{
...
}]

29. @for循环

@for @var from to/through {
}

30. @each遍历iteration

syntax:@each $var in$list{
...
}

用来做多个列表，或者同类型元素的不用项的遍历更改

31. @while循环:

eg:

$i:6;
@while @i>0{
	.item-#{$i}{
		width:5px*$i;
	}
	$i:$i-2;
}

32. 用户自定义函数@function

@function 名称(参数1，参数2){
...
}

**一般都要用到@return关键字**

33. 警告与错误@warn @error

@if map-has-key($color,$key){
@warn“在$cololr里没有找到#{$key}
}