那些你不得不了解的SCSS

scss已经成为程序员的必备css技能了，关于scss，这里我总结了一些比较常用的，毕竟，有时候可以应
付一下面试，scss只会使用嵌套？？？那就相当于不会scss

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。SASS可以兼容css, 是一个比较成熟的一种工具，scss是基于Ruby，但是ruby 语法没有关系

变量的使用

scss变量值以$符号表示，属性变量用#{}来展示

sass的变量名可以与css中的属性名和选择器名称相同，包括中划线和下划线。这完全取决于个人的喜好，有些人喜欢使用中划线来分隔变量中的多个词（如$highlight-color），而有些人喜欢使用下划线（如$highlight_color）。使用中划线的方式更为普遍，这也是compass用的方式。

	// 变量值的声明
	$bg_red:red;
	$font30:30px;
	$color: color;
	$font16:font-size;
	
	.father{
	  width: 400px;
	  height: 400px;
	  background: $bg_red;
	  font-size: $font30;
	}
	
	// 属性值的使用
	.son {
	  #{$color}: blue;
	  #{$font16}: 16px;
	}

嵌套CSS 规则：

1. 层级嵌套

      .father{
        width: 400px;
        height: 400px;
        background-color: red;
        .son{
          color: blue;
          font-size: 30px;
        }
      }
   

2. 属性嵌套

      border: {
        width: 1px;
        style: solid;
        color: yellow;
      }
   

3. 父选择器的标识符&:

   	.father{
   	    &:hover{
   	        color: greenyellow;
   	    }
   	}
   

导入其他的style

当通过@import把sass样式分散到多个文件时，你通常只想生成少数几个css文件。那些专门为@import命令而编写的sass文件，并不需要生成对应的独立css文件，这样的sass文件称为局部文件。对此，sass有一个特殊的约定来命名这些文件。

此约定即，sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线。举例来说，你想导入themes/_night-sky.scss这个局部文件里的变量，你只需在样式表中写@import “themes/night-sky”;。

局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时，这非常有用。在这种情况下，有时需要在你的样式表中对导入的样式稍作修改，sass有一个功能刚好可以解决这个问题，即默认变量值。

注释

【静默注释】：标准的CSS注释 /* comment */ ，会保留到编译后的文件。
【单行注释】：单行注释 // comment，只保留在SASS源文件中，编译后被省略。
【重要注释】：/ ! 重要注释 */在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

混合器

混合器：通过@mixin和@include+name 就可以实现大段样式的重用，相当于一个小组件

@mixin father {
    color: red;
    font-size: 20px;

}
@mixin son {
    color: greenyellow;
    font-size: 12px;

}
.father{
    @include father
}
.son{
    @include son 
}

混合器的强大之处，在于可以指定参数和缺省值

参数默认值使用$name: default-value的声明形式，

	@mixin whight($width:200px, $height:200px) {
	  width: $width;
	  height: $height;
	}
	.father{
	  @include whight(400px,400px);
	  background-color: rgb(240, 255, 243);
	  .son{
	    @include whight; // 默认是上面的200px
	    background-color: red;
	  }
	}

继承 @extend

1. 跟混合器@mixin相比，继承@extend生成的css相对更少，体积更小，速度会相对快一点
2. 混合器本身不会引起css层叠的问题，因为混合器把样式直接放到css规则中，而继承存在样式层叠问题。被继承的样式会保持原有定义位置和选择器权重不变

.father{
    color: red;
}
.son{
    @extend .father
}

直接运算

这个是scss比较强大的功能，对于数字不太敏感的我，简直是👍👍👍

.father{
    width: 100%;
    height: 500px;
    background-color: pink;
}
.son{
    width: (100%/2);
    height: (500px/2);
    background-color: plum;
}

自定义函数

使用@function可以定义一个函数，要注意写法

@function father($h){
    @return $h*2
}
.father{
    height: father(100px);
    background-color: plum;
}
.son{
    width: father(100px);
    background-color: yellow;
}

@for 循环的使用

首先这个不是很常用，但是用的时候很给力嘿。在我们新写一个项目的时候，会写各种类名在一个css文件中，作为base.css，在写样式的时候几乎不用写常用的css样式，直接引用类名在标签里面，比如：

.mt24{
  margin-top: 24px;
}
.mb24{
  margin-bottom: 24px;
}
.ml24{
  margin-left: 24px;
}
.mr24{
  margin-right: 24px;
}
.pt24{
  padding-top: 24px;
}
.pb24{
  padding-bottom: 24px;
}
.pl24{
  padding-left: 24px;
}
.pr24{
  padding-right: 24px;
}

但是我们用到的margin值或者padding值远远不止这些，所以@for这个语句就派上了用场

语法： @for $var from A though B /@for $var from A to B
区别： through 包含 A&B ，to 包含A不包含B

/*
字体大小
----------------------*/
@for $var from 10 through 32 {
  .font#{$var}{
    font-size: #{$var}px !important;
  }
}

阮一峰的scss网络日志

这篇博客中还写了scss的两大用法，for循环与if判断，只是我还没想到适合哪种场景，所以这里暂不做详细解释，可以点击链接去看知识点

以上就是我了解到的scss，以后学习到新的会补充的哦