sass 学习总结2

sass编写的过程中，几种最基本的用法总结

1. 定义变量及调用

定义变量，前面要加$符号，加上自己取的变量名，变量命名规则可以按驼峰式，也可以定义全局变量和局部变量，顾名思义，全局变量是在最外面定义的变量，局部变量是在某个模块下定义的变量，只能在该模块下调用。

2. 嵌套

相对于css的写法，我们在sass里编写样式会变得更加简单，结构更加清晰，比如ul>li>a的样式，只需要在ul下，li{}里进行写样式，同时需要注意，如果我们需要写ul li a:hover的样式，在对应的a{}花括号里加上&:hover，&符号就代表花括号外面当前的元素，编写方式：

编译后的style.css里的内容

3. mixin

在写CSS3时，有些属性需要加上一些浏览器的前缀，比如border-radius在兼容firefox浏览器时，需要写成-moz-border-radius，兼容safari浏览器时，写成-webkit-border-radius，兼容chrome浏览器时，写成border-radius，所以我们通过一个mixin来传递border-radius的值，使我们的CSS编写时更快捷。

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

在定义mixin时，我们也可以选择带参数的写法，在调用的时候会更方便修改该属性的值，比如

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

在调用时，需要@include来调用，比如需要设置border-radius的值为10px，则写法是：

.box{ @include border-radius(10px);}

来看看具体的效果

sass写法：

编译后效果：

4. extend

@extend可以让我们快速地共享一组css属性，直接来展示让大家更直观：

先定义一个.box

.box{ 
	display:block;
	padding:5px;
	color:#fff;
	background:#ccc;
}

然后，一个链接a需要写的CSS和.box是一样的，那就可以直接共享.box的样式。

a {
	@extend .box;
	text-decoration:none;
}

最后，a的样式编译出来后，就是这样的，我们发现a的样式分为2部分了，一部分是在.box后面，一部分是自己的，个人觉得这个功能在引入全局的icon背景图片时会很方便，大家可以自己尝试。

最基础的几个用法应该就是这些了，后再继续补充一些更深入的用法