sass心得

1、sass的安装：
（1）下载安装Ruby，记得安装的时候勾选第二项，
（2）打开控制面板gem install sass（人品好的话，一下子就能安装成功)
（3）如果（2）安装不成功进行一下步骤：gem sources -remove htpps://rubygems.org/
    gem sources -a http://gems.ruby-china.org
    gem sources -l
    gem install sass

2、sass的编译
(1)下载安装koala
(2)打开koala把需要编译的整个项目文件夹直接拖进去，选择输出路径，并且可以在设置里面选择输出的编译格式，
  * nested：嵌套缩进的css代码，它是默认值。
  * expanded：没有缩进的、扩展的css代码。
  * compact：简洁格式的css代码。
  * compressed：压缩后的css代码。

3、引入sass文件
引入sass文件其实还是引入的css文件，所以需要在html页面引入编译好的css文件

4、编写sass文件
（1）在头部加入@charset"utf-8"

（2）用$声明变量:css与sass的最大的区别就是sass里面可以声明变量，从而减少了代码的冗余，
    声明方式:$变量名：值 ($width:40px)
    调用方式:width:$width;
    编译出来：width:40px;

(3）不传参的混合宏 @mixin ：混合宏就是将一堆经常重复使用的代码块放在一起，
    声明例如：@mixin margin_style{ margin-top:20px;margin-left:30px;}
    调用方式:@include margin_style
    编译出来：margin-top:20px;margin-left:30px;
    不足：调用混合宏编译出来的css代码不会合并，使得代码变得臃肿冗余

（4）传参的混合宏:
    声明方式：@mixin margin_style($style,$value){ margin-#{style}:$vaule}
    （也可以在（）里面给他默认值，如果调用的时候没有给他值就是用默认值）
    调用方式:@include margin_style(top,20px)
    编译出来：margin-top:20px;

（5）扩展/继承：如果有一个clss具有某些css样式了，但是另一个clsaa也需要这些样式，就可以继承前面的css样式
    使用方法 @extend .需要继承的class
    不足：如果基类，并不存在于html中时，不管调用没调用，在编译的时候都会将他的css都将产生基类对应的样式代码

（6）占位符：class中没有这个css样式,但是后面经常用到了用到了，就可以把它写成一个单独的样式里面去，然后让其他的class去继承
    使用方法：%名字{}
    调用方法：@extend %名字

（7）if指令：@if  @else

（8）for循环：
            @for $i from <start> through <end>
            @for $i from <start> to <end>
            $i 表示变量
            start 表示起始值
            end 表示结束值
（这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数。）

(9)while循环 ：while 循环条件
(10)字符串函数：
      unquote($string)：删除字符串中的引号；
      quote($string)：给字符串添加引号。
      To-upper-case()将小写字母转换成大写字母
      to-lower-case（）将大写转换成小写

(11)引入：
    @import "foo.css";
    @import "foo" screen;
    @import "http://foo.com/bar";
    @import url(foo);

(12)@media：可以嵌套使用
    @media screen {
          .sidebar {
            @media (orientation: landscape) {
              width: 500px;
            }
          }
        }
(13)@extend 是用来扩展选择器或占位符
(14)@at-root 从字面上解释就是跳出根元素。当你选择器嵌套多层之后，想让某个选择器跳出，此时就可以使用 @at-root。
(15)@debug 在 Sass 中是用来调试的，当你的在 Sass 的源码中使用了 @debug 指令之后，Sass 代码在编译出错时，在命令终端会输出你设置的提示 Bug:      
(16)@warn 和 @debug 功能类似，用来帮助我们更好的调试 Sass
(17)@error 和 @warn、@debug 功能是如出一辙。

转载于:https://www.cnblogs.com/ryt103114/p/6015880.html