（一）scss转css的方法（sass编译css）
为什么转（编译）
1.我们写出来的是后缀名为scss的文件，只有编译成css文件，才能用在网站上。
2.对比scss文件和css文件可以更清晰的知道哪里变的更简单和可维护。
两种编译方法（命令行编译&Koala.app工具编译）
1命令行编译
1.1打开终端
Compass是用Ruby语言开发的，所以安装它之前，必须安装Ruby，不知道终端和Ruby请戳下面
http://www.jianshu.com/p/f7f901f5e768
1.2安装Compass
在终端中输入
sudo gem install compass
输入密码（平时你安装app时的密码）
然后等待安装，Compass就安装好了。
1.3编译
在终端中输入
compass create myproject
输入后会创建一个Compass项目，如图文件夹名称为myproject，文件夹的位置在/Users/pro中
打开文件夹
在输入
compass compile
sass子目录中的scss文件将被编译成css文件，保存在stylesheets子目录中。
2.Koala.app工具编译
2.1下载安装Koala.app
https://pan.baidu.com/s/1hswOwbM
提取密码34dt
2.2使用
把你想要转的文件或文件夹拖拽到Koala.app中点击Refresh，就会在文件夹中生成一个css文件
(二)Cpmpass/Sass
1.简单实例让你秒懂@mixin @include @content这三哥们的魔术
传参：@mixin可以，％不可以
调用方式：@mixin=>@include，％=>@extend
产生样式的存在方式：@include：复制拷贝，@extend：组合申明
//scss魔术可以这么变
@mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
@content;
}
.button-green{
@include button{
background: green
}
}
//scss魔术也可以这么变,结果是一样儿一样儿的。
@mixin button {
@content;
}
.button-green{
@include button{
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: green
}
}
//css
.button-green{
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
background: green;
}
把background：green传入@mixin button｛｝中@content的位置，再把@mixin button中的所有值传入.button-green中
//Compass/Sass简单@includ调用
@mixin center-block{
margin-left:auto;
margin-right:auto;
}
.demo{
@includ center-block;
}
//css
.demo{
margin-left:auto;
margin-right:auto;
}
2.@mixin @include @content定义域
//scss
$color: green;
@mixin button($color: #fff) {
color: $color;
@content;
border: 1px solid $color;
}
.button-green {
@include button {background: $color;}
}
//css
.button-green {
color: #fff;
background: green;
border: 1px solid #fff;
}
注意：background颜色拿的是全局变量$color:green的颜色，并不是局部$color: #fff的颜色。
3.变魔术要用@mixin还是@extend
@mixin和@extend都模块化代码，然后更加方便地在样式表中复用一些样式片段，到底什么时候使用@mixin，什么时候使用@extend?
先看一下这两段代码和编译成css后的对比就一目了然了。
//@extend
.button {
background: green;
}
.button-1 {
@extend .button;
}.button-2 {
@extend .button;
}
//@mixin
@mixin button {
background-color: green;
}.button-1 {
@include button;
} .button-2 {
@include button;
}
//@extend=>css
.button, .button-1, .button-2 {
background: green;
}
//@mixin=>css
.button {
background-color: green;
}.button-1 {
background-color: green;
}.button-2 {
background-color: green;
}
虽然@extend编译成css后回更简洁，但是@extend也有一些缺点，它不够灵活，不像@mixin可以变很多传递参数的魔术，@extend也不好维护，如果不传参可以考虑使用@extend。但不得不说@mixin会更强大，更灵活。在大多数情况下@mixin会比@extend更好，但是它们俩都各有优势。
4.透明(opacity)
//Compass/Sass
@import"compass/css3";
#opacity{
@include opacity(0.5);
}
//css
#opacity{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0.5);
opacity:0.5
}
opacity的参数0.5，表示透明度为50%
完全透明
@include opacity(0);
完全不透明
@include opacity(1);
5.@media screen响应式大神
media属性
screen是媒体类型里的一种
and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)
(min-width: 400px) 就是媒体特性，其被放置在一对圆括号中。
//当屏幕尺寸小于600px时，应用下面的CSS样式
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3-media-queries-demo</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
.content{
zoom:1;
}
.content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.leftBox, .rightBox{
float: left;
width: 20%;
height: 500px;
margin: 5px;
background: #ffccf7;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 2s ease;
transition: width 1s ease;
}
.middleBox{
float: left;
width: 50%;
height: 800px;
margin: 5px;
background: #b1fffc;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.rightBox{
background: #fffab1;
}
@media only screen and (min-width: 1024px){
.content{
width: 1000px;
margin: auto
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px){
.rightBox{
width: 0;
}
.leftBox{ width: 30%}
.middleBox{ width: 65%}
}
@media only screen and (max-width: 400px){
.leftBox, .rightBox, .middleBox{
width: 98%;
height: 200px;
}
}
</style>
</head>
<body>
<div class="content">
<div class="leftBox"></div>
<div class="middleBox"></div>
<div class="rightBox"></div>
</div>
</body>
</html>
注意:由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要，否则会出现横向滚动条。
6.变量
声明变量（$）
$width:300px;
默认变量（!default）
$width:300px !default;
局部变量和全局变量
$color:red !default;//定义全局变量
.block{
clock:$color;//调用全局变量
}
em{
$color:red;//定义局部变量
a{
color:$color;//调用局部变量
}
}
2.占位符%(placeholder),继承@extend
%如果@extend不调用，是不起作用的。
@extend继承已经存在的样式
//Compass/Sass
%mt5{
margin-top:5px;
}
%pt5{
padding-top:5px;
}
.btn{
@extend %mt5;
@extend %pt5;
}
.block{
@extend %mt5;
span{
@extend %pt5;
}
}
//css
.btn,.block{
margin-top:5px;
}
.btn, .block span{
padding-top:5px;
}
7.插值#{}
插值(interpolation)将一个占位符，替换成一个值，通常指变量差值或变量替换。
$description: "awesome";
@warn "Tuts+ is #{$description}!";
可以插入任何类型的变量，不仅仅是字符串。
$answer: 42;
@warn "The Answer to the Ultimate Question of Life, the Universe, and Everything is #{$answer}.";
8.$colors:()颜色映射（存储一堆，key/value的组合变量），color()函数，使用key获得映射中的值。
//config配置
$colors:(
"first": tomato,
"second":hotpink
);
//function函数
@function color($key){
@return map-get($colors,$key);
}
//component 零件
.el{
background-color:color(primary);
}
还可以用@warn你要的那个颜色（key）在不在$colors:();里
@function color($key){
@if not map-has-key($colors,$key){
@warn"key not found."
}
@return map-get($colors,$key);
}
比如你想调用$colors:();里的thired，但是$colors:();并没有名字叫third的颜色
@function color($key){
@if not map-has-key($colors,$key){
@warn "key" '#{$key}' not found in $colors map.";
}
.el{
background-color: color(third)；
}
调用color(third)时将会抛出Key third not found
