初识SASS/SCSS

看完本文之后的收获：

什么是SASS/SCSS、SASS/SCSS基础的语法

一.了解SASS/SCSS

1.什么是SASS/SCSS,到底是干什么的?

想要理解SASS/SCSS，就要知道预处理器，通常情况下，我们写页面时引入css文件，供项目使用，而预处理器就是一种编程语言，将css文件中的内容写成代码，通过编译之后供项目使用。

预处理器-----编译----->.css文件------->供项目使用

而预处理器有非常多种，SASS/SCSS就是其中一种。

2.为什么要学习SASS/SCSS?

让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

获得一个更好的结构体系

3.SASS/SCSS两者有什么区别？

其实两者是同一个东西，通常都叫sass

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

Sass 时不带有 大括号和 分号，其主要是依靠严格的 缩进方式来控制的;Scss跟原css相似，都有‘；’和‘{}’。

二、SASS/SCSS的基本语法

举个例子：

 CSS:

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

 SASS:

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

body
  font: 100% $font-stack
  color: $primary-color

 SCSS:

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

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

SASS严格按照缩进，个人认为容易出错，SCSS更像是CSS,更易于理解,所以这都以SCSS讲解，与css不同的是，它是按照层级关系写的样式，而不是像css一个一个分开。 在此特别提醒：“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）

声明变量

$primary-color: #333;

Scss 的变量包括三个部分：

1. 声明变量的符号“$”
2. 变量名称
3. 赋予变量的值

默认变量（全局变量）

$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

普通变量

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

嵌套

Scss 的嵌套分为三种:

1.选择器嵌套

 css:

<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

scss:

nav {
  a {
    color: red;
    header & {
      color:green;
    }
  }  
}

2.属性嵌套

css:

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

scss:

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

3.伪类嵌套

伪类用到‘&’符号

css:

.box:before{
    content:"伪元素嵌套";
}

scss:

.box{
  &:before {
    content:"伪元素嵌套";
  }
}

混合宏@mixin

代码中，难免有很多代码是重复使用的，减少重复使用会用到宏

1.声明宏“@mixin”来声明一个混合宏

a.不带参数的混合宏

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

b.带参数的混合宏

@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

 带参数分实参和形参

  x.形参（可传多个）

@mixin border-radius($radius){
   -webkit-border-radius: $radius;
   border-radius: $radius;
 }
  .box {    @include border-radius(3px);  }

  y.实参（可传多个）

 @mixin border-radius($radius:3px){
    -webkit-border-radius: $radius; 
    border-radius: $radius;
  }
.btn {
   @include border-radius;
 }

2.混合宏的调用

button {
    @include border-radius;
}

继承@extend

在scss中使用“@extend”来继承样式

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

占位符%

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

插值#{}

 适用在写的代码量很大的情况

 scss:

$properties: (margin, padding);
@mixin set-value($side, $value) {
    @each $prop in $properties {
        #{$prop}-#{$side}: $value;
    }
}
.login-box {
    @include set-value(top, 14px);
}

 css:

.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

注释

 1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
 2、类似 JavaScript 的注释方式，使用“//”

数据类型

 
 
 数字: 如，1、 2、 13、 10px；
 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz；
 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；
 布尔型：如，true、 false；
  空值：如，null；
 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。

运算

 加

.box {
  width: 20px + 8in;
}

 减

$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}

 乘

.box {
  width:10px * 2px;  
}

 除

.box {
  width: 100px / 2;  
}

 颜色运算

p {
  color: #010203 + #040506;
}

 字符运算

$content: "Hello" + "" + "Sass!";
.box:before {
  content: " #{$content} ";
}

（运算符类型不同会报错）

.box {
  width: 20px + 1em;
}
报错