初识scss（1）

最近在看sass，先总结了一点点，为了以后自己来看不用去翻文档；如果那里不正确欢迎指正！

什么是 Sass？

Sass 官网上是这样描述 Sass 的：

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。

Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。 

Sass 和 SCSS 有什么区别？

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：

文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名

语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass需要依赖Ruby，因为我的电脑是windows系统所以Mac系统安装怎么安装Ruby没有去进一步研究，在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

下载好文件个人建议安装到c盘，安装好后打开ruby的command控制面板，之后就可以在电脑上安装sass

安装sass

 1、通过命令安装 Sass

gem upadte sass

全局变量:

$color:red !default; 全局变量就是定义在元素外面的变量

span{ $color:blue;定义在元素内部的变量

      b{color:$color } 

}  

全局变量的影子

当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为 了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。

变量的使用建议：

该值至少重复出现了两次；

该值至少可能会被更新一次；

该值所有的表现都与变量有关（非巧合）

<header>

<nav>

<div>1</div>

<div>2</div>

<div>3</div>

</nav>

</header>

css：nav div{color：red}

scss：nav {

                    div{ color：red;

                    header &{

                                        color:blue

                                       }

                            } 

                   }

css：.warp{  

  border-top:1px solid #ccc;

            border-bottom:1px solid #000;

            font-size:14px;

            font-weight:blod;

                  }

scss：.warp{

border{

top:1px solid #ccc;

bottom:1px solid #ccc;  

}

font{

size:14px;

weight:blod; 

} 

             }

css：  .clear{width:100%;margin:0 auto;*zoom:1}
          .clear:before，.clear:after{display:table;content:"";}

          .cleear:after{clear:both;]

scss： .clear{

width:100%;margin:0 auto;*zoom:1;

&:befor,&:after{display:table;content:""}

&:after{clear:both}  

     }

@mixin box-shadow（$shadow...）{

@if length($shadow)>1{

@include prefixer(box-shadow,$shadow);

}@else{

$shadow:0 0 4px rgba(0,0,0,3);

@include prefixer(box-shadow$shadow);

} 

btn-small{  background：#bf1832;  color：#fff;  }

.btn-middle{background：#bf1832; color:#000; }

总结：因为混合宏不会自动合并相同的样式，如果一个样式文件多次调用一个混合宏，会产生对个对应的样式代码，从而造成了代码的容易，

个人建议：如果你的代码块中涉及到了变量，建议适合用混合宏来创建相同的代码块；

总结：使用继承后，编辑出来的Css会将使用的代码块合并到一起通过组合选择器的方式向大家展现 但它不能传递参

总结：采用占位符编辑出来的css代码和使用继承是相同，占位符是独立定义的，不调用的时候是不

会再css中产生任何代码，而继承是首先要有一个基类不管调没调用，基类样式都会在编译之后的css  代码中；

sass：

$property:(margin,padding);

@mixin set-value($side,$value){

    @each $prop in $property{

        #{prop}-${side}:$value; 

        } 

}

.lo{

       @include set-value(top,10px)        

    }

css：

.lo{margin-top:10px;padding-top:10px;}

    其中each...in 遍历$property；

@mixin generate-size($class,$small$medium,$big){

.#{$class}-small{font-size：$small；}

.#{$class}-medium{font-size：$medium；}

.#{$class}-big{font-size：$big；} 

}

@include generate-size("header",10px,20px,30px)

.header-big { font-size: 40px; }
.header-medium { font-size: 20px; }

.header-small { font-size: 10px; }

sass：

@mixin firefox-message($selector) {
body.firefox#{$selector}:before {
content: "Hi, Firefox users!";

}

}

@include firefox-message(".header");

css：

  body.firefox .header:before {
  content: "Hi, Firefox users!"; }