关于SCSS你应该知道的

什么是SCSS？

CSS预处理器，完全兼容CSS3的同时继承了Sass强大的动态功能。SASS提供的变量、嵌套、混合、继承等特性

node环境下安装使用 npm install -g sass
其他环境安装请自查官网

变量

你可以利用变量来存储一个你重复使用的 样式 ， 如颜色、font stacks , 或者是你想存储的任何值。

// SCSS
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// 编译后
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，避免了重复输入父选择器

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

// 编译后 
nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

引入

SASS 能够将代码分割成 多个片段，并以下划线作为其命名前缀 (_reset.scss），使用 @import 'reset ’ 导入的时候不会将其编译成 css文件，不会发生 http 请求，只是将代码块导入合并操作。

// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

混合Mixin

混合用来分组那些需要在页面中复用的 CSS声明，开发人员可以通过向 mixin 传递变量，来让代码更加灵活。如 在添加浏览器兼容性前缀的时候。

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);   // 通过 @include 来使用 定义好的 mixin 
}

继承

可以通过 @extend 指令在选择器之间复用CSS属性，不会产生冗余的代码

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

.success {
  @extend %message-common;
  border-color: green;
}

.error {
  @extend %message-common;
  border-color: red;
}

.warning {
  @extend %message-common;
  border-color: yellow;
}

编译后

.message .success .error .warning {
	border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.success {
  border-color: green;
}
.error {
  border-color: red;
}
.warning {
  border-color: yellow;
}

操作符

SASS提供了标准的算术运算符，例如+、-、*、/、%。

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

编译后

.container {
  width: 100%; }

article[role="main"] {
  float: left;
  width: 62.5%; }

aside[role="complementary"] {
  float: right;
  width: 31.25%; }

扩展

引用父级选择器 &

/*===== SCSS =====*/
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

/*===== CSS =====*/
a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

嵌套属性

CSS 许多属性都同属于同一个命名空间，如font-size、font-weight 等 都属于font 空间下 ，我们可以 font ：来定义

// 注意用 : 来定义 
.demo{
	font:{
		size:30em;
		family:fantasy;
		weight:bold;
	}
}

// 编译后 
.demo {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
 }

支持if elseif for循环 等语句

@mixin txt($weight) { 
  color: white; 
  @if $weight == bold { 
    font-weight: bold;
  } 
  @else if $weight == light { 
    font-weight: 100;
  } 
  @else { 
    font-weight: normal;
  } 
}

.txt1 { 
  @include txt(bold); 
}

// 编译后 
.txt1{
	color:white;
	font-weight:bold ;
}