sass初学练习二

来源：互联网发布：天之痕java结局版编辑：程序博客网时间：2024/05/16 15:54

上一节我们只是简单练习了sass的变量及其引用。这一节我们可以细化一下sass的更多用法及要注意的事项。还是老规矩，边学边练习;要学的同学赶紧动手吧。继续用上一节的sass文件进行优化。

sass变量命名规则。命名必须以$开头，可以是中划线或者是下划线，全凭个人喜好。比如：$font-size,$font_size;$fontSize都可以。
sass全局变量与局布变量。有JS基础的同学都应该知道，没有基础的同学也不要灰心，我在这里简述下就明白了。所谓全局变量就是写在css规则外面的变量，所有的css规则都可以引用。如下图:$pSize就是全局变量,整个站点，所有字体是18px的地方都是可以引用.

局部变量就是定义在css规则里面的。比如：$fColor变量，只能 footer p 内部引用，外面是引用不了的。所以不会影响别的地方
sass默认变量值。一般来说如果反复声明一个变量，编译后就是最下面那个了。因为css的解析规则就是从上到下。如果你写了一个变量，被后来导入的sass文件库覆盖了，咋办？这下就要用到!default 这个标签来帮忙了。含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可.如下：

编译后的color还是#ff0;
特殊变量。一般情况我们定义变量作为属性值，但是还可以用作属性的，只需要以#号{变量名}就可以搞定了，例如:
```
$sideL:left;.header { padding-#{$sideL}:0;}
```

多值变量。

$linkColor:         #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值.header a{  color:nth($linkColor,1);  &:hover{    color:nth($linkColor,2);  }}

map定义变量。多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。map格式为：$map: (key1: value1, key2: value2, key3: value3);例如：编译后的代码为：
嵌套css规则。注意的是嵌套的层次不要超过3层，嵌套的代码不要超过50行。
a.父级嵌套。比如下面上一节的写法:
```
<span>.header nav { float:$sideR;}.header nav li { float:$sideL;}.header nav li a { float:$sideL; padding:$padding;color:$linkColor; }</span>
```
我们就可以改成嵌套式的：

编译一下看看效果，解析的还是跟原来一样。

b.比如像伪类，hover那些效果用嵌套怎么写呢。用&标示符就可以了。如下图：

编译出来跟我们平时写的是一样的哦。是不是可以节省很多不必要的代码啦，挺方便的。

c,群组嵌套。比如:
```
.header h1,.header h2,.header h3 { color:#000}.nav a,.aside a { color:#f00; }
```
就可以改成:
```
.header {   h1,h2,h3 ｛ color:#000｝}.nav,.aside {  a { color:#f00; }}
```
处理这种群组选择器规则嵌套上的强大能力，正是sass在减少重复敲写方面的贡献之一。尤其在当嵌套级别达到两层甚至三层以上时，与普通的css编写方式相比，只写一遍群组选择器大大减少了工作量。但是有利也有弊，你只写了几层嵌套，看上去只有一点点代码，可是编译出来的css却是一大套，大大降低网站的速度。所以平时输写的时候注意规则，不要嵌套太深。
sass的属性嵌套。跟css规则嵌套是一样的，冒号后面紧跟在括号{}.如下:

编译后就是这样了:

上面说了这么多属性和方法，大家都记住了吗？光看是没用的，还是要动起手来操作。下节继续学习sass的高级用法。

PS:个人笔记原创，请务转载，转载请标明出处，只供学习，有什么不足之处，欢迎大家指正，谢谢！

0 0