SASS基础知识

什么是SASS

1. SASS与CSS的关系

SASS（Syntactically Awesome Stylesheets）是一种强大的CSS扩展语言，它允许开发者使用变量、嵌套规则、混合宏和更多功能，这些在纯CSS中是不可能做到的。SASS旨在简化CSS代码的维护，并提高样式表的可读性和灵活性。使用SASS，开发者可以编写更加结构化和动态的样式表，然后通过SASS编译器将其转换为标准的CSS文件，以供浏览器使用。

2. CSS预处理器概述

CSS预处理器是一种脚本语言，它扩展了CSS的功能并提供了更加高级的编程特性。这些预处理器的主要目的是使CSS代码更加高效、可维护和易于开发。除了SASS，还有其他流行的CSS预处理器，如LESS和Stylus。它们都提供了类似的功能，但各有其语法和特点。

3. SASS与SCSS的区别

SASS有两种语法格式：原始的SASS语法（也称为缩进语法）和SCSS（Sassy CSS）。两者都是SASS预处理器的一部分，但它们在书写方式上有所不同。

• SASS（缩进语法）：它使用缩进而不是花括号来表示选择器的嵌套，并且不使用分号来分隔属性。这种语法更简洁，但对于习惯了常规CSS的开发者来说可能需要一定的适应时间。

// SASS示例
$primary-color: #333

body
  font: 100% $primary-color
  background-color: #fff

• SCSS（Sassy CSS）：SCSS语法与标准CSS更为相似，使用花括号和分号。这使得从CSS过渡到SCSS更加容易，因为几乎不需要改变现有的CSS样式。

// SCSS示例
$primary-color: #333;

body {
  font: 100% $primary-color;
  background-color: #fff;
}

两个都将转化成以下的CSS:

body {
   
   
  font: 100% #333;
  background-color: #fff