sass一些好用的东西

使用sass快一年了，来记录一下它好用的东西吧
##1.代码的宏观模块管理
很方便的把不同功能的代码放在不同的文件中，然后在main.scss中@import引入；

注意：sass的@import并不同于css的@import。css每次@import都会发送一个新的http请求，请求一个css文件。但是sass是将所有的scss文件融合编译为一个css文件，实际使用的就是那个融合编译后的文件，并不关系你内部@import多少个文件。

拿我现在的项目目录举个例子：



我会在main.scss中@import其他部分，但是我只需要在我的html文件中引入main.css这一个文件就好。

@charset "utf-8";
/** SASS的语法参见sass-lang.com */
@import "variables";//存放各个变量
@import "mixins";//各种可服用的mixin，比如box-sizing的兼容写法
@import "reset";//重置掉浏览器的自定义样式
@import "common";//通用的原子组件，比如：button
@import "component";//通用的组合组件，比如：输入验证码表单
@import "module";//每个页面下面的自定义样式
@import "themes";//主题样式，因为我们有的项目要嵌入不同银行的app中，为了保证和他行的app风格一致，我们需要在这里切换不同的主题样式
@import "iconfont";//图标字体
@import "layout";//用来放媒体查询的rem基准

你使用“_”开始的命名方式，sass就不会将这个scss文件编译成css文件，在引用的时候，可以不包含下划线。
##2.变量
使用变量之后，当设计师修改样式或者我们想编写一个ui库的时候，我们可以从容应对。
同样举个例子就明白啦

// Colors
$color-normal:													#445c95 !default;//项目主题色，应用于主要信息、标题等
$color-secondary:												#888f9b !default;//项目说明文字颜色
$color-description:												#acb2c1 !default;//项目次要信息颜色

我们在定义文本颜色的时候就可以使用上面的三个变量，当项目更换导致整体颜色风格更改时，我们只需要改这三个变量，无需去更改每个定义文本颜色的地方。

变量还有一个很重要的用途，在混合宏中用来传递参数。下面就会讲到混合宏。

##3.混合宏
可以在整个样式表中重复使用的样式，可以将这些样式定义为混合宏，主要用来各种兼容写法。举几个例子就明白了。

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

我们的定义了一个混合宏border-radius，里面写了各个浏览器的兼容。假设我们现在有个元素需要设置圆角，我们可以通过@include使用。

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

最终编译产生的css文件就是这样的

.box {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px; }

除了兼容写法，还可以将常用的代码片段定义为混合宏，比如定义按钮的样式

@mixin btn-style($color-btn) {
background-color: $color-btn;
color: #ffffff;
border: none;
&:active,&:hover{
background-color: darken($color-btn,5%);
}
&:disabled{
background-color: $color-btn-disabled;
cursor: not-allowed;
}
}

混合宏还支持不定参数传递,参数后面跟着省略号，表明可以还可以传递多个参数，参数个数不定量。

@mixin animation($animation...) {
-webkit-animation: $animation;
-moz-animation: $animation;
animation: $animation;

使用时：

.plane{
@include animation(flash 1s .3s infinite linear);
}

##4.%foo
‘%’就像‘.’、‘#’选择器一样，可以当做一种选择器使用。不同的时，定义在%foo下的样式，如果不通过@extend引用，就不会生效。举个例子：

%retina-border-top{
&:before{
@include retina-border(1,1px,0,0,0);
}
@media (-webkit-min-device-pixel-ratio: 2){
&:before{
@include retina-border(2,1px,0,0,0);
}
}
@media (-webkit-min-device-pixel-ratio: 3){
&:before{
@include retina-border(3,1px,0,0,0);
}
}
}

这是实现在retina屏下真正‘1px’边框的代码，当我们在使用时是这样的：

.box{
@extend retina-border-top；
}

它比起@mixin的优势是，它生成的css更智能。智能在于，它会将通过@extend调用它的元素组合起来声明。
但是如果需要传递参数，我们还是使用@mixin比较好。
##5.嵌套
使用常规的CSS，每个元素在自己的“声明块”中独立变化，而通过Sass，可以在嵌套的块里将相关的元素组合在一起。无需通过后代选择器一层层嵌套，直接大括号写就好了。真的非常方便，谁用谁知道。还是举个例子：
用css写是这样的：

.parent {
width: 300px;
}
.parent .child1 {
width: 100%;
}
.parent .child1 .child1 {
width: 60%; }
.parent .child2 {
width: 30%;
}

用sass是这样的

.parent{
width:300px;
.child1{
width: 100%;
.child1{
width: 60%;
}
}
.child2{
width: 30%;
}
}