Sass教程：简单入门、快速上手

作者: 那麽快樂 | 来源:发表于2019-06-23 21:57 被阅读0次

前言

本文所有的演示都是基于Win10操作系统。

关于Sass

1.定义

Sass的学名叫“CSS预处理器”，就是在CSS的基础上，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，可以让我们以更少的代码实现同样的效果，而且代码的整洁度、可读性更强。
而且Sass算是CSS的超集，它100%兼容CSS的语法，所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。换个说法也就是：如果你喜欢，可以在Sass文件中完全以CSS的语法来写代码，它也是完全支持的。
大体来说，使用Sass分3步：

安装Sass；
编译Sass文件成CSS文件；
在项目中引用CSS文件的路径；

2.文件格式

Sass有两种后缀名文件：.sass和.scss。在同一个项目中，两种格式文件可以共存（不建议，最好统一为一种格式），但二者有各自的特点：
.sass后缀的文件
使用类Ruby的语法，格式为空格缩进式，没有花括号，靠换行区分不同属性，格式要求比较严格。
.scss后缀的文件
是Sass3引入的新语法，基本写法与CSS大致相同，所以对于专门做前端的同学来说，.scss后缀的文件是不二选择。

有一点需要注意，虽然是CSS的超级，但如果你直接把CSS文件的后缀改为.scss，浏览器是不能识别的。这也就是“预编译”的意思，Sass文件还是需要先编译为CSS文件才能正常被浏览器识别。

安装

Sass基于Ruby编写，所以安装Sass分2步：先安装Ruby的环境，再安装Sass。

1.安装Ruby环境

在[Ruby官网]选择电脑系统对应的版本下载、安装，建议默认路径即可。安装过程中注意勾选第二项：Add Ruby executablesto your PATH。安装完毕在命令行环境中通过ruby -v查看是否成功。

2.安装Sass

由于我们可爱的国家有强大的GFW，导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败，所以这里介绍两种windows中Sass的安装方法：官方安装（可能不稳定）及通过镜像安装。

官方安装
Ruby安装成功之后，它自带的包管理工具gem也就安装好了。直接打开命令行通过gem执行Sass安装命令，再查看是否安装成功：
```
gem install sass
sass -v     #查看是否安装成功
```
通过镜像安装
比官方安装方法多2步：需要先移除默认的源，再添加Ruby China的源，查看安装成功之后，最后再执行官方的安装方法。
```
gem sources --remove    #移除自带源
gem sources -a https://gems.ruby-china.org/     #安装RubyChina的源
gem sources -l      #查看当前的源
gem install sass
sass -v 
```
安装源的过程中，如果提示SSL错误，那就把源地址换一下成 tp://gems.ruby-china.org/ 再试。

gem常见命令

gem update --system
升级RubyGems到最新版本。安装镜像前建议先执行此操作。

gem update sass
更新Sass版本

gem uninstall sass
卸载Sass

Sass装好之后，就是万事俱备只欠东风了。因为前面说过，Sass文件先编译为CSS文件才能正常使用，下面来看看有哪些编译的方法。

编译

1.编译方法

Sass编译方式大概有三种：通过命令行编译（基础方法）、GUI可视化图形同居编译及自动化编译。

命令行编译
就是在命令行中通过Sass的命令置及编译，后面的演示也是基于这种方法。相对其他方法稍微繁琐一丢丢，但还是建议大家从基础方法入手，后面再升级其他方法，毕竟打牢基础之后才可以理直气壮得“偷懒”嘛:smirk:
下面是一些基本编译命令

单文件转换命令：

sass style.scss style.css
#把名为style的Sass文件转换为CSS文件。
#件每次有更新保存之后，都需要执行这个命令。

单文件监听命令（添加--watch命令）：

sass --watch style.scss:style.css
#`--watch`参数加上之后，可以监测style这个文件的变化，更新保存之后自动编译。

多文件（文件夹）监听命令

sass --watch sass/main:dist/css
#监视sass目录下main文件夹中的所有Sass文件，并自动编译为CSS文件之后，放到dist/css目录下。

逆向操作，css文件转换为sass/scss文件

sass-convert style.css style.sass
sass-convert style.css style.scss

GUI编译工具
推荐国人自己开发的Koala工具，有中文版，上手也很简单。
戳这里看教程
自动化编译
这里有很多途径实现。可以通过webstorm、Sublime等编辑器的相关插件实现，也可以借助Gulp等自动化构建工具来配置。这里就推荐两款sublime的插件：Sass（Sass语法高亮）和Sass Build（编译）。
插件的使用也很简单，编辑完文件后默认快捷键Ctrl+B即可编译，会在当前目录下生成同名css及css.map文件。

Sass其他命令

sass- h
运行命令行帮助文档，可以获得所有的配置选项

sass --style
指定编译后的css代码格式，后面可跟4种参数：nested，expanded，compact，compressed

sass --sourcemap
表示开启sourcemap调试。开启之后，会生成一个后缀名为.css.map的文件。不过现在基本都会默认生成此文件。

2.编译结果

像上面提到的，通过给命令--style后面添加不同的参数，会生成不同样式的css代码，这其实没有太多好说，但大家有没有想过一个问题，Sass文件中的注释会被编译到CSS文件中么？这就要看--style命令后面是什么参数了，默认是nested（嵌套式），而expanded（展开式）是CSS代码常见的格式。
下面做简单展示，建议大家亲自下手查看。

image

Sass中的注释有3种：

//我是单行注释
不会出现在编译之后任何格式的CSS文件中。
/*我是多行注释*/
只会出现在编译之后代码格式为expanded的CSS文件中。
/*!我是强制注释*/
会出现在任何代码格式的CSS文件中。

常用基本语法

1.变量

变量是Sass中最基本的语法。凡是css属性的标准值（比如说1px或者bold）可存在的地方，都可以替换为变量。之后，如果你需要一个不同的值，只需要改变这个变量的值，则所有引用此变量的地方生成的值都会随之改变。
通过 $ 符号来定义，通过变量名称实现多处重复引用。

$box-color: red;        //定义变量
ul{
    color: $box-color;      //引用
}
li{
    background-color: $box-color;       //引用
}

//编译后
ul {
  color: red;
}
li {
  background-color: red;
}

另外，变量的值也可以引用其他变量：

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;

.selected {
  border: $highlight-border;
}

//编译后
.selected {
  border: 1px solid #F90;
}

2.嵌套

Sass支持选择器及属性嵌套，可以避免代码的重复书写。

2.1选择器嵌套

div {
    h1 {
        color: #333;
    }
    p {
        margin-bottom: 1.4px;
        a {
            color: #999;
        }
    }
}

 /* 编译后 */
div h1 { color: #333; }
div p { margin-bottom: 1.4px; }
div p a { color: #999; }

大多数情况下上面那种简单的嵌套都没问题。但如果你想要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符。

div {
    p {
        margin-bottom: 1.4px;
        &:hover {
            color: #999;
        }
    }
}

//编译后：
div p { margin-bottom: 1.4px; }
div p:hover { color: #999; }

2.2属性嵌套

示例1：

div {
    border: {
      style: solid;
      width: 1px;
      color: #ccc;
    }
}

//编译后
div {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

示例2：

div {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

//编译后
div {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3.代码重用之继承

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

.class1 {
    border: 1px solid #333;
}

.class2 {
    @extend .class1;
    background-color: #999;
}

//编译后
.class1, .class2 {
  border: 1px solid #333;
}

.class2 {
  background-color: #999;
}

如上示例，.class2不仅会继承.class1自身的所有样式，也会继承任何跟.class1有关的组合选择器样式，如下：

.class1 {
    border: 1px solid #333;
}
.class1 a {
    color: red;
}

.class2 {
    @extend .class1;
}

//编译后：
.class1, .class2 {
  border: 1px solid #333;
}

.class1 a, .class2 a {
  color: red;
}

4.代码重用之Mixin混合器

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include+minxin名称来调用。

无参数mixin声明及调用：

@mixin mixName {        
    float: left;
    margin-left: 10px;
}

div {
    @include mixName;
}

//编译后：
div {
  float: left;
  margin-left: 10px;
}

带参数mixin声明及调用
可以不给参数值直接写参数，如果给了值的话，就是参数的默认值，在调用的时候传入其他值就会把默认值覆盖掉。
```
@mixin left($value: 10px) {
    float: left;
    margin-left: $value;
}
div {
    @include left(66px);
}

//编译后：
div {
  float: left;
  margin-left: 66px;
}
```

带多组数值参数的mixin声明及调用
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。

@mixin mixName($shadow...) {
  box-shadow:$shadow;
}
.box{
  @include mixName(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

//编译后：
.box {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
}

下面是一个实际应用中关于CSS3浏览器兼容的mixin使用示例：

@mixin transition($transition){
    -webkit-transition: $transition;
    -moz-transition: $transition;
    -ms-transition: $transition;
    -o-transition: $transition;
    transition: $transition;
}
@mixin opacity($opacity) {
    opacity: $opacity;
    filter: alpha(opacity = $opacity * 100);
}

div {
    width: 100px; height: 100px;
    @include transition(all 0.5s);
    @include opacity(0.5);
}
ul {
    width: 50px; height: 50px;
    @include transition(all 1s);
    @include opacity(1);    
}

//编译后
div {
  width: 100px;
  height: 100px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

ul {
  width: 50px;
  height: 50px;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  opacity: 1;
  filter: alpha(opacity=100);
}

5.颜色函数

Sass中集成了大量的颜色函数，让变换颜色更加简单直接。

$box-color: red;        
ul {
    color: $box-color;      
}
li {
    background-color: darken($box-color,30%);       
}

//编译后：
ul {
  color: red;
}
li {
  background-color: #660000;
}

其他颜色函数

lighten(#cc3, 10%) // #d6d65c

grayscale(#cc3) // #808080

complement(#cc3) // #33c

6.@import引入

CSS中原本就有不常用的@import语法，但是有两个弊端：

引入语句一定要卸载代码最前面才会生效；
影响性能。如果A文件要引入B文件，当浏览器读到A文件时会再去下载B，阻塞进程。

而Sass中的@import会在生成CSS文件时就把引入的所有文件先导入进来，也就是所有相关的样式会被编译到同一个CSS文件中，无需发起额外的请求。
当然，Sass的@import也支持导入远程的CSS文件。那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。
一般来说基础的文件命名需要以'_' 开头，如 _partial.scss。这种文件在导入的时候可以不写下划线及后缀，可写成@import "partial"。但是倒入CSS文件的话，就需要“文件名+后缀”了。

@import ‘partial’       //导入名为“_partial.scss”的文件
@import ‘toolbar.css’       //导入名为“toolbar.css”的文件
* {
    margin: 0;
    padding: 0;
}

原生的CSS导入

下列三种情况下会生成原生的CSS@import：

被导入文件的名字以.css结尾；
被导入文件的名字是一个URL地址（例如http://www.sass.hk/css/css.css ），由此可用谷歌字体API提供的相应服务；
被导入文件的名字是CSS的url()值。

也就是说，你不能用Sass的@import直接导入一个原始的CSS文件，因为sass会认为你想用CSS原生的@import。但是，因为sass的语法完全兼容css，所以你可以把原始的css文件改名为.scss后缀，即可直接导入了。

结语

文章整理于自己的学习笔记，多为个人理解，仅供参考；如有真知灼见，欢迎交流。

文章始发于http://www.lipengcheng.xyz ，如需转载，请注明出处，谢谢。

Sass教程：简单入门、快速上手

前言

1.定义

2.文件格式

安装

1.安装Ruby环境

2.安装Sass

编译

1.编译方法

2.编译结果

常用基本语法

1.变量

2.嵌套

2.1选择器嵌套

2.2属性嵌套

3.代码重用之继承

4.代码重用之Mixin混合器

5.颜色函数

6.@import引入

原生的CSS导入

结语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

css

Sass教程： 简单入门、快速上手

前言

1.定义

2.文件格式

安装

1.安装Ruby环境

2.安装Sass

编译

1.编译方法

2.编译结果

常用基本语法

1.变量

2.嵌套

2.1选择器嵌套

2.2属性嵌套

3.代码重用之继承

4.代码重用之Mixin混合器

5.颜色函数

6.@import引入

原生的CSS导入

结语

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

css

Sass教程：简单入门、快速上手