随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。

在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。

1.scss中定义变量

$bg-color: #ed795a; //也可以$bg-color: #ed795a !default;这样写 !default 表示是默认值
.btn-default{
   background-color:$bg-color;
}
 
.btn-default{//编译后是
    background-color:#ed795a;
}
scss中的变量也存在作用域，类似于js中的局部变量
$bg-color: #ed795a;
 
.app{
	$bg-color: #8ab945;//类似于js的局部变量
}
 
.btn-default{
   background-color:$bg-color;//这里是 #ed795a 而不是.app里的 #8ab945
}

Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等。

Sass：

Sass是对CSS（层叠样式表）的语法的一种扩充，最早and最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS。

LESS：

2009年开源的一个项目，受Sass的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，在很多流行的框架和工具中已经能经常看到LESS的身影了。

#头条创作挑战赛#

本文同步本人掘金平台的文章：https://juejin.cn/post/7087722170851262495

《面试经》：less和sass的区别？

难度：今天来说一下less和sass有什么区别。

less和sass都是CSS预处理器，都为CSS提供了一些扩展的功能，比如说变量、嵌套规则、混合、函数等，使得CSS代码更加易于维护和扩展。

它们有哪些区别？我给大家整理了几个点。

第一个来说，语法上有很大不同。那么less使用类似的的CSS语法，sass使用类似Ruby的语法，包含什么缩进、花括号等等。