sass笔记

1、导入

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

2、定义变量

$fontSize: 12px;
$wid:500px;

.cc{

　　font-size:$font-size;

　　width:$wid;

}

//编译为css后，为字体是12px，宽度为500px

 

3、混合（有无参数）

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

.cc{

　　@include margin;

　　@include opacity(20);

}

//编译为css后，为margin:20px auto; 透明度为0.2

 

@mixin box-shadow($shadow...){
box-shadow:$shadow;
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
-ms-box-shadow:$shadow;
-o-box-shadow:$shadow;
}

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

//编译后为：box-shadow：(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));

 

4、层级关系

.cc{

　　font-size:12px;

　　a{
　　　　color:$color;
　　　　font-size:16px;
　　　　text-decoration:none;
　　　　&:hover{
　　　　color:$color1;
　　}
}

 

编译后为.cc ， .cc a ， .cc a:hover

5、继承

.dd{
　　@extend .cc;

　　}

 

表示.dd继承.cc的所有相关样式

6、mix（）函数

mix($color-1,$color-2,$weight)

$color-1和$color-2指的是你需要合并的颜色，颜色可以是任何表达式，也可以是颜色变量。$weight合并的比例（表示$color-1所占的比例），默认值为50%，其取值范围是0~1之间。

7、lighten() & darken()函数

lighten()和darken()两个函数都是围绕颜色的亮度值做调整的，其中lighten()函数会让颜色变得更亮，与之相反的darken()函数会让颜色变得更暗。这个亮度值可以是0~1之间，不过常用的一般都在3%~20%之间。

如：

background: lighten($baseColor,10%)

 8、saturate() & desaturate()函数

这两个函数是通过改变颜色的饱和度来得到一个新的颜色，他们和前面介绍的修改亮度得到新颜色的方法非常相似。

9、opacify() & fade-in()函数

这两个函数是用来对已有颜色的透明度做一个加法运算，会让颜色更加不透明。

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

其中fade-in()函数又名fade_in()函数。其所起作用等效。

>> opacify(rgba(22,34,235,.6),.2)

rgba(22, 34, 235, 0.8)

>> opacify(rgba(22,34,235,.6),.5)

#1622eb

>> opacify(hsla(22,34%,23%,.6),.15)
rgba(23, 34, 34, 0.65)

>> fade-in(rgba(23,34,34,.5),.615)

#172222

10、transparentize() & fade-out()函数

transparentize()和fade-out()函数所起作用刚好与opacify()和fade-in()函数相反，让颜色更加的透明。这两个函数会让透明值做减法运算，当计算出来的结果小于0时会以0计算，表示全透明。

>> transparentize(red,.5) 
rgba(255, 0, 0, 0.5) 
>> transparentize(#fde,.9) 
rgba(255, 221, 238, 0.1)
>> fade-out(hsla(98,6%,23%,.5),.6)
 rgba(58, 62, 55, 0)

11、unquote()和quote()

unquote()函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。
quote()函数刚好与unquote()函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号""

 如：

content:unquote("hello world")

　　content:quote(hello world)

 

注：quote（）只能给字符串添加双引号，如字符串中有单引号或空格，需要用字符串包裹

12、数学函数

percentage($value)：将一个不带单位的数转换成百分比值；
round($value)：将数值四舍五入，转换成一个最接近的整数；
ceil($value)：向上取整；
floor($value)：向下取整；
abs($value)：返回一个数的绝对值；
min($numbers…)：找出几个数值之间的最小值；
max($numbers…)：找出几个数值之间的最大值。

注：min()和max()函数中，如果出现单位不一致，会报错

13、列表函数

length($list)：返回一个列表的长度值（参数之间使用空格隔开，不能使用逗号，否则函数将会报错）如：length(19px 20px (border 1px solid) 2em)会返回4，
nth($list, $n)：返回一个列表中指定的某个标签值
如：

nth(10px 20px 30px,1)//返回10px
nth((Helvetica,Arial,sans-serif),2)//返回 “Arial”
nth((1px solid red) border-top green,1)//返回（1px "solid" red）

join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表（join函数中，只能将两个列表合并，多于两个将会报错，如需要个列表进行合并，则可选择多使用几次join函数）
append($list1, $val, [$separator])：将某个值放在列表的最后；
如：

append(10px 20px,30px)返回 (10px 20px 30px)

zip($lists…)：将几个列表结合成一个多维的列表(每个单一的列表个数值必须是相同的)；
如：

zip(1px 2px 3px,solid dashed dotted,green blue red) //返回((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

index($list, $value)：返回一个值在列表中的位置值（如指定的值$value不在$list中，则返回false，否则返回位置值）。
如：

index(1px solid red,1px)//返回1

 

14、判断型函数

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

type-of(200)//返回 “number”
type-of(abc)//返回“string”
type-of（red）//返回color

unit($number)：返回一个值的单位（如遇到复杂的计算时，如果时乘除运算，会返回多单位）；
如：

unit（200px）//返回“px"
unit(10px / 3rem)//返回”px/rem“

 

注：如果是加减遇到不同单位时，除px于cm、mm运算外，unit（）函数会报错
unitless($number)：判断一个值是否带有带位（不带单位返回true，带单位返回false，%也属于单位）
comparable($number, $number)：判断两个值是否可以做加、减和合并（如果可以返回true，不可以返回false）

Miscellaneous函数
在这里把Miscellaneous函数称为三元条件函数，主要因为他和JavaScript中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

if($condition,$if-true,$if-false)
上面表达式的意思是当$condition条件成立时，返回的值为$if-true，否则返回的是$if-false值。
如:

 if(true,1px,2px)//返回1px
if(false,1px,2px)//返回2px

 

15、自定义函数
如：去掉一个值的单位

@function strip-units($number){
      @return $number/($number * 0 +1);
}

 

16、特殊变量

如：

$borderTop: top !default;
$baseFontSize: 12px !default;

$baseLineHeight: 1.5 !default;

.border-#{$borderTop}{
  border-#{$borderTop}:1px solid #ccc;
}

body{
  font:#{$baseFontSize}/#{$baseLineHeight};
}

 

17、多值变量

$linkColor: #08c #333 !default;
a {
  color: nth($linkColor, 1);
  &:hover {
    color: nth($linkColor, 2);
  }
}

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

@each $header, $size in $headings {

  　#{$header} {
  font-size: $size;
}

}

18、全局变量（在选择器中声明的变量会覆盖全局变量）

$fontSize: 12px;

body {
  $fontSize: 14px;
  font-size: $fontSize;
}

p {
  font-size: $fontSize;
}

 

编译后body的font-size是14px。p的font-size值均为12px

19、@at-root跳出嵌套

 注:

　　默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。

　　这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，目前@support还无法广泛使用）。我们默认的@at-root其实就是@at-root (without:rule)

//跳出单个嵌套
.parent-2 {
  color: #f00;
  @at-root .child {
    width: 200px;
  }
}
//跳出多个嵌套
@media print {
  .parent2 {
    color: #f00;
    @at-root (without: media) {
      .child2 {
        width: 200px;
      }
    }
  }
}

 

 

 20、@at-root与&配合使用

.child{
    @at-root .parent &{
        color:#f00;
    }
}
//编译后
.parent .child {
  color: #f00;
}

 

21、用于@keyframe

.demo {
    ...
    animation: motion 3s infinite;

    @at-root {
        @keyframes motion {
          ...
        }
    }
}
//编译后
.demo {
    ...   
    animation: motion 3s infinite;
}
@keyframes motion {
    ...
}

 

22、@content

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

//编译后
@media only screen and (max-width: 480px) {
  body { color: red }
}                  

 

 
23、@if判断

@if可一个条件单独使用，也可以和@else结合多条件使用

$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//编译后
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

 

24、@for循环

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//编译后
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

25、@each循环

$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//编译后
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}