SASS使用教程

本篇我想大家介绍SASS的一些知识，希望对大家有所帮助。

1.SASS介绍。

SASS是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

SASS有以下四个特点:

兼容CSS

Sass完全兼容所有版本的CSS。我们对此严格把控，所以你可以无缝地使用任何可用的CSS库。

特性丰富

Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力，一直使其保持领先地位

成熟

Sass已经经过其核心团队超过8年的精心打造。

行业认可

一次又一次地，行业把Sass作为首选CSS扩展语言。

社区庞大

数家科技企业和成百上千名开发者为Sass提供支持。

框架

有无数的框架使用Sass构建。比如Compass，Bourbon，和Susy。

2.SASS安装配置。

安装前，你需要安装npm和gulp这两个工具。

安装ruby

由于sass基于ruby语言开发而成，所以安装sass前还需要安装ruby。

安装成功后，在cmd中输入以下命令：

ruby -v
//如果成功则会出现
ruby 2.4.1p111 (2017-03-22 revision 58053) [x64-mingw32]

接下来，更换成国内的gem源

//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。

$npm init
//一路直下
$ npm install sass --save-dev

安装完成后查看版本

$ sass -v
//出现这说明安装成功
Sass 3.5.1 (Bleeding Edge)

至此，已经安装好了sass。

3.SASS语法介绍。

基础知识。

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

• 注释

/**/多行注释
//单行注释

• 变量

声明变量用$符号

例如：$width:300px

默认变量加上default

例如：$width:300px!default

嵌套

• 选择器嵌套

例如：

div{
    font-size: 20px;
    a{
        span{
            font-weight: 500;
            color: #ff0;
            font-size: 5em;
        }
    }
}

• 属性嵌套

div {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

• 跳出嵌套

div{
    font-size: 20px;
    a{
        @at-root span{
            font-weight: 500;
            color: #ff0;
            font-size: 5em;
        }
    }
}

• 伪类嵌套

div{
    &hover:{
       color: #f00;
    }
    font-size: 20px;
    a{
        @at-root span{
            font-weight: 500;
            color: #ff0;
            font-size: 5em;
        }
    }
}

还有一些，以后介绍。

4.SASS总结。

通过学习SASS，我感受到了SASS强大的CSS编译功能，确实方便我们每个人进行CSS编译开发。