Sass声明变量

前段时间由于公司需要开发react-native的app 着手动工，所以耽误了文章的更新。
希望大家可以谅解！

声明变量

在sass中，声明变量和javascript一样简单，属于弱类型语言。
不需要init string boolean 等等
只需要一个 $ 符号就可以了
例如

$fontSize:16px;

此外这里有一个小提示：声明变量的时候必须要初始化
所谓的初始化就是赋初始值

这里有一个错误的例子：

$fontSize;

这样写的报错就是

Invalid CSS after "$font": expected ":", was ";"

变量值

由于sass最终编译出来的都是css，所以你的赋值可以是各种类型值
如：

$fontFamily:Helvetica, sans-serif;
$bgColor: #333;
$fontSize:14px;
body{
    font-family:$fontFamily;
    font-size:$fontSize;
    background-color:$bgColor;
}

Sass作用域

在这里就不说什么是作用域，作用域的作用了，不懂的童鞋们就百度一下就可以找到了

作用域的运用

在sass中的作用域是块级作用域。

if{}else{}
for(){}
while(){}
......

这些通常都会用到的就不多做解释了

在sass中还有一种比较特殊的作用域就是嵌套时候的作用域
如：

body{
    $bg:#333;
    background-color:$bg;
    .inSizeContainer{
        background-color:$bg;
    };
};
.outSizeContainer{
    background-color:$bg;
};
......

这样写是会报错的！

我们看这段代码

$bg是定义在body标签里面的

.outSizeContainer是在boddy的外面

所以在.outSizeContainer里面的$bg是找不到这个变量，所以就报错了

但是.inSizeContainer是在body里面，所以是可以访问到$bg这个变量，所以不会导致报错