sass学习笔记

sass和scss的区别

sass是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，scss和css写法比较相似

Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8

sass覆盖默认变量值是在他之前重新声明变量值（！default）

混合宏：@mixin font（当需要使用变量的时候用）

@include font

Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

继承和扩展：@extend .class；（不需要使用变量的时候用，但是声明出来的基类，不管有没有被调用，都会出现在css里面）

@extend 调用的占位符，编译出来的代码会将相同的代码合并在一起

占位符：%（不需要使用变量的时候用，但是声明出来的基类，没有被调用，都不会出现在css里面）

%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码

插值：#{}

@each...in...语句

进行运算的时候，带单位的话，单位要相同。但是进行乘法运算的时候，带单位的话，两个单位相同的话，会出现错误，只要其中一个带值就可以了。进行除法运算的时候，“/”符号，如果有其他的运算符的话就会生效，如果没有的话，要记得带括号，不然不会生效，另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值

值列表

(1)   nth函数（nth function） 可以直接访问值列表中的某一项；

(2)   join函数（join function） 可以将多个值列表连结在一起；

(3)   append函数（append function） 可以在值列表中添加值； 

(4)   @each规则（@each rule） 则能够给值列表中的每个项目添加样式。

 

@for循环

@for $i from through

@for $i from to

$i 表示变量

start 表示起始值

end 表示结束值

这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。

@while

直到遇到false才会停止循环

@while $types > 0 {

    .while-#{$types} {

        width : $type-width + $types;

    }

    $types : $types - 1;  // 自减

}

@each循环

@each $var in

函数功能

(1) 字符串函数

(2) 数字函数

(3) 列表函数

(4) 颜色函数

(5) Introspection 函数

(6) 三元函数等

(1)    字符串函数：用来处理字符串的函数

      unquote($string)：删除字符串中的引号；只能删除字符串最前和最后的引号（双引号或单引号）

quote($string)：给字符串添加引号。

To-upper-case() 函数将字符串小写字母转换成大写字母

To-lower-case() 函数将字符串转换成小写字母

 

(2)    数字函数

      percentage($value)：将一个不带单位的数转换成百分比值；

      round($value)：将数值四舍五入，转换成一个最接近的整数；

      ceil($value)：将大于自己的小数转换成下一位整数；

      floor($value)：将一个数去除他的小数部分；

      abs($value)：返回一个数的绝对值；

      min($numbers…)：找出几个数值之间的最小值；

      max($numbers…)：找出几个数值之间的最大值；

      random(): 获取随机数

列表函数

(1)     length($list)：返回一个列表的长度值；

(2)     nth($list, $n)：返回一个列表中指定的某个标签值（$n必须是大于 0 的整数）

(3)     join($list1, $list2, [$separator])

将两个列给连接在一起，变成一个列表，多于2个会出错，但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个 join() 函数合并在一起使用。参数 $separator，这个参数主要是用来给列表函数连接列表值是，使用的分隔符号，默认值为 auto， 除了默认值 auto 之外，还有 comma 和 space 两个值，其中 comma 值指定列表中的列表项值之间使用逗号（,）分隔，space 值指定列表中的列表项值之间使用空格（ ）分隔。

(1)                       第一个列表中只有一个列表项，那么 join() 函数合并的列表项目中每个列表项目这间使用的分隔符号会根据第二个列表项中使用的

(2)                       如果列表中的第一个列表中每个值之间使用的是空格

(3)                       如果当两个列表中的列表项小于1时，将会以空格分隔

(4)     append($list1, $val, [$separator])：将某个值放在列表的最后；

1)        如果列表只有一个列表项时，那么插入进来的值将和原来的值会以空格的方式分隔。

2)        如果列表中列表项是以空格分隔列表项，那么插入进来的列表项也将以空格分隔；

3)        如果列表中列表项是以逗号分隔列表项，那么插入进来的列表项也将以逗号分隔。

4)        当然，在 append() 函数中，可以显示的设置 $separator 参数，

如果取值为 comma 将会以逗号分隔列表项

如果取值为 space 将会以空格分隔列表项

(5)     zip($lists…)：将几个列表结合成一个多维的列表；

1)        在使用zip()函数时，每个单一的列表个数值必须是相同的，同类型

2)        zip(1px 2px 3px,solid dashed dotted,green blue red)生成

               1px solid green, 2px dashed blue, 3px dotted red

(6)     index($list, $value)：返回一个值在列表中的位置值。index(1px solid red, red)

Introspection函数

(1)     type-of($value)：返回一个值的类型

• number 为数值型。 （带单位和没带单位都可以）
• string 为字符串型。
• bool 为布尔型。
• color 为颜色型

(2)     unit($number)：返回一个值的单位，如果有运算的时候，加减要同单位，乘除可以多单位

(3)     unitless($number)：判断一个值是否带有单位,返回boolean值

(4)     comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并,返回boolean值。同单位或者一个不带单位的才可以，或者单位同类型

Miscellaneous函数（三元）

if($condition,$if-true,$if-false) // $condition是boolean值

Map（数据地图/json 以 key:value 成对的出现）

用个 $ 加上命名空间来声明 map。后面紧接是一个小括号 ()，将数据以 key:value 的形式赋予，其中 key 和 value 是成对出现，并且每对之间使用逗号 (,) 分隔，其中最后一组后面没有逗号。

map可以相互嵌套

$theme-color: (

    default: (

        bgcolor: #fff,

        text-color: #444,

        link-color: #39f

    ),

    primary:(

        bgcolor: #000,

        text-color:#fff,

        link-color: #93f

    ),

    negative: (

        bgcolor: #f36,

        text-color: #fefefe,

        link-color: #d4e

    )

);

Sass Maps的函数

(1)     map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。

根据 $key 参数，返回 $key 在 $map 中对应的 value 值。如果 $key 不存在 $map中，将返回 null 值

(2)     map-merge($map1,$map2)：将两个 map 合并成一个新的 map。

(3)     map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。

(4)     map-keys($map)：返回 map 中所有的 key。

(5)     map-values($map)：返回 map 中所有的 value。

(6)     map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。

(7)     keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

@mixin map($args...){

    @debug keywords($args);

}

@include map(

  $dribble: #ea4c89,

  $facebook: #3b5998,

  $github: #171515,

  $google: #db4437,

  $twitter: #55acee

);

RGB颜色函数

开启 Sass 的函数计算：sass -i

(1)      rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；

(2)      rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；

(3)  rgba($red,$green,$blue,$alpha)  //将一个rgba颜色转译出来，和未转译的值一样

(4)  rgba($color,$alpha)  //将一个Hex颜色转换成rgba颜色

(5)      red($color)：从一个颜色中获取其中红色值；

(6)      green($color)：从一个颜色中获取其中绿色值；

(7)      blue($color)：从一个颜色中获取其中蓝色值；

(8)      mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

$weight 为 合并的比例（选择权重），默认值为 50%，其取值范围是 0~1 之间。它是每个 RGB 的百分比来衡量，当然透明度也会有一定的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%，第二个颜色所占比例为75%。

HSL函数

(1)      hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；

(2)      hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；

(3)      hue($color)：从一个颜色中获取色相（hue）值；

(4)      saturation($color)：从一个颜色中获取饱和度（saturation）值；

(5)      lightness($color)：从一个颜色中获取亮度（lightness）值；

(6)      adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；

第二个值可以是度数，也可以是百分比

(7)      lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；

(8)      darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；

(9)      saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色

(10)  desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；

(11)  grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);

(12)  complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);

(13)  invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

Opacity函数

(1)      alpha($color) / opacity($color)：获取颜色透明度值；

(2)      rgba($color, $alpha)：改变颜色的透明度值；

(3)      opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；

接受两个参数，第一个参数是原始颜色，第二个参数是你需要增加的透明度值，其取值范围主要是在 0~1 之间。当透明度值增加到大于 1 时，会以 1 计算，表示颜色不具有任何透明度。

(4)      transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。

让透明值做减法运算，当计算出来的结果小于 0 时会以 0 计算，表示全透明

@media

(1)      如果在样式中使用 @media 指令，它将冒泡到外面

@at-root  跳出根元素

不会嵌套，样式独立

@debug  调试

@warn

@error