[Sass]-Sass入门

初识Sass

SASS简介

sass是一种css预处理器，用专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。Sass是CSS3的扩展，它增加了嵌套规则，变量，mixins，选择器继承等等。Sass生成格式良好的CSS，使样式表更易于组织和维护。

.sass和.scss区别：

.sass最初是为了配合haml而设计，所有有着和haml一样的缩进风格，从第三代开始，保留缩进风格，完全向下兼容普通的css代码。推荐使用.scss

compass 是一个开源的css创作框架（一个技术类库）。在sass基础上封装了一系列有用的模块和模板，补充sass的功能

推荐链接： sass中文网 | sass入门 | sass用法指南-阮一峰

安装

• window下安装SASS首先需要安装 (Ruby)[https://rubyinstaller.org/dow...
  安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
• 安装完成后需测试安装有没有成功,运行CMD输入ruby -v。如安装成功会打印ruby版本号
• 更换gem源（使用淘宝的gem源https://ruby.taobao.org/）

1.删除原gem源gem sources --remove https://rubygems.org/

2.添加国内淘宝源gem sources -a https://ruby.taobao.org/

3.打印是否替换成功gem sources -l

4.更换成功后打印如下:

*** CURRENT SOURCES ***
https://ruby.taobao.org/

• 安装Sass和Compass

  //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
  gem install sass
  gem install compass

• sass常用更新、查看版本、sass命令帮助等命令：

  //更新sass
  gem update sass
  
  //查看sass版本
  sass -v
  
  //查看sass帮助
  sass -h

编译sass

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
sass --watch app/sass:public/stylesheets

//编译格式
sass --watch input.scss:output.css --style compact

//编译添加调试map
sass --watch input.scss:output.css --sourcemap

//选择编译格式并添加调试map
sass --watch input.scss:output.css --style expanded --sourcemap

//开启debug信息
sass --watch input.scss:output.css --debug-info

数据类型

• Number
• String
• List
• Map
• Color
• Boolean
• Null

// 数字类型
$n1: 1.2;
$n2: 12;
$n3: 12px;

// 字符串类型
$s1: content;
$s2: 'content';

// bool类型
$true: true;
$false: false;

// Null 类型
$null: null;

// color 类型
$c1: blue;
$c2: #000;
$c3: rbga(0,0,0,0.3);

.#{$s1}{
    @if $null == null {
        font-size: $n3
    }
}

变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

默认变量

sass的默认变量仅需要在值后面加上!default即可。

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

• list。list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值
• map。map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。

全局变量

在{}内定义的变量，在{}外访问不到。如果需要在全局访问，需要在变量值后面加上!global即为全局变量。

特殊变量

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

未编译样式 Scss

body {
    $c_blue: blue;

    header {

        // 局部变量
        $c_red: red;

        // 全局变量
        $c_yellow: yellow !global;
        color: $c_red; 

        // 默认变量
        $fz: 14px;
        $fz: 12px !default;
        font-size: $fz;

        // 多值变量
        $padding: 2px 4px 6px 8px; // 类似数组
        padding: $padding;
        padding-left: nth($padding, 1); // 下标从1开始

        $maps: (color:red, fz: 13px); // 类似json
        background: map-get($maps, color);

        // 特殊变量
        $display: disp;
        
        .#{$display}{
            width: 10px;
            height: 10px;
        }
    }
    footer {
        color: $c_blue;
        color: $c_yellow;
        // color: $c_red; // Undefined variable: "$color".
    }
}

编译后样式 Css

body header {
  color: red;
  font-size: 14px;
  padding: 2px 4px 6px 8px;
  padding-left: 2px;
  background: red; }
  body header .disp {
    width: 10px;
    height: 10px; }
body footer {
  color: blue;
  color: yellow; }

/*# sourceMappingURL=test.css.map */

导入

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。

原生css导入

如果在sass文件中导入css文件如@import 'reset.css'，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
以下为原生css导入：

1. 被导入文件的名字以.css结尾
   @import '***.css'
2. 被导入文件的名字是一个URL地址
   @import 'http://***'
3. 被导入文件的名字是css的url{}值
   @import url(*.css)

Sass导入

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import "mixin"。

嵌套

选择器嵌套

选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

& 父选择器的标识符

&表示父元素选择器，常用 &:hover

群组选择器的嵌套

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

子组合选择器和同层组合选择器 > +和~

1. 子组合选择器>选择一个元素的直接子元素。(只会选择article下紧跟着的子元素中命中section选择器的元素)

article > section { border: 1px solid #ccc }

1. 同层相邻组合选择器+选择header元素后紧跟的元素

header + p { font-size: 1.1em }

1. 同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素

article ~ article { border-top: 1px dashed #ccc }

属性的嵌套

属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

border后面必须加上冒号。

@at-root 跳出嵌套

• @at-root
  用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。
• @at-root (without: ...)和@at-root (with: ...)
  默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

@at-root &组合

未编译样式 Scss

body {
    header {
        border: {
            color: red;
            radius: 5px;
        }

        a {
            text-align: center;

            &:hover {
                text-align: left;
            }
            @at-root .content {
                width: 100px;
            }
        }
    }
}
@media screen and (max-width:520px){
    @at-root (without:media rule){
        .content {
            height: 200px;
        }
    }
}
@at-root .text-info {
    color: red;

    @at-root nav &{
        color: blue;
    }
}

编译后样式 Css

body header {
  border-color: red;
  border-radius: 5px; }
  body header a {
    text-align: center; }
    body header a:hover {
      text-align: left; }
    .content {
      width: 100px; }

.content {
  height: 200px; }
.text-info {
  color: red; }
  nav .text-info {
    color: blue; }

继承

选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

多继承

一个选择器中有多个继承

链式继承

.b 继承.a, .c 继承.b ...

局限性

不支持包含选择器(.a .b),相邻兄弟选择器(.a + .b)
a如果有:hover ,hover状态也被继承

占位选择器 %

如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

未编译样式 Scss

.header {
    background: blue;
}
.footer {
    font-size: 12px;
}
.sidebar {
    width: 12px
}
.content {
    height: 13px
}
// 多继承
.content-header {
    @extend .header;
    @extend .footer;
    @extend .sidebar, .content;
    color: red;
}

// 链式继承
.a {
    width: 12px
}
.b {
    @extend .a;
    height: 13px;
}
.c {
    @extend .b;
    border: 2px;
}

// 占位选择器 %
%d {
    width: 12px
}

.e {
    @extend %d;
    height: 13px
}

编译后样式 Css

.header, .content-header {
  background: blue; }

.footer, .content-header {
  font-size: 12px; }

.sidebar, .content-header {
  width: 12px; }

.content, .content-header {
  height: 13px; }

.content-header {
  color: red; }

.a, .b, .c {
  width: 12px; }

.b, .c {
  height: 13px; }

.c {
  border: 2px; }

.e {
  width: 12px; }

.e {
  height: 13px; }

mixin

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。
混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。

无参数mixin

//sass style
//-------------------------------
@mixin content {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include content;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}

有参数mixin

@mixin cont($fz: 14px){
    font-size: $fz;
}
body {
    @include cont(12px) 
}

多个参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

@mixin cont($color: red,$fz: 14px){
    color: $color;
    font-size: $fz;
}
body {
    @include cont($fz: 12px) 
}

多组值参数mixin

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$shadow...

@mixin box-shadow($shadow...){
    -moz-box-shadow: $shadow;
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
}
.shadow{
    @include box-shadow(0px 2px 3px #ccc, 4px 5px 6px #f2f)
}

@content

可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式，接受的样式从@content开始。

@mixin style-for-iphone {
    @media only screen and (min-device-width: 320px) and (max-device-width: 568px){
        @content;
    }
}
@include style-for-iphone{
    font-size: 12px;
}