修真院技术总监深度解析Sass

上周六的线上直播课程中，由修真院的技术总监沁修带领直播课学员们

以直播、问答、互动的形式，深入理解了【预编译语言：SASS】，讲解如何用Sass生成良好格式化的css代码。

错过直播课的同学，现将文字版课程内容分享给大家，希望大家能够从中有所收获。

1、sass是什么？

2、变量

3、嵌套

4、继承

5、混合

6、导入

7、控制语句

1.sass是什么

在学习sass之前首先来回顾一下css是什么。

css是一门非程序的描述性语言:

它没有变量没有函数没有作用域

需要大量书写看似毫无逻辑而且重复的代码，极其不方便维护和扩展，也难以复用。

为了解决这些问题，出现了一些css的预编译语言，对css进行了扩充。

sass是css的预处理器，它提供了许多便利的写法方法

可以使用变量，常量，嵌套，函数，混合，继承等功能，让css的开发变得更加简单可维护。

直接写出来的sass文件其实就是普通的文本文件，以.sass或.scss作为文件后缀名。

里面可以直接使用css语法以及sass特有的语法特性，完成后通常需要经过编译成合法的css文件以供浏览器使用。

同样类似的工具还有less，stylus等等，通常这些东西都非常简单，我们只需要选择性的学习其一就足以应付未来的工作和学习。

如果确实需要，那么再选择性的学习其他的也没任何难度，可以随时放心食用。

2.变量

有编程经验的人可能对变量并不陌生，只需要定义一个变量，然后为其赋值，就能四处复用它。

这在css总意味着不用在重新写无数个一样的16进制颜色，要修改时只需要在变量定义的地方进行修改就可以全局修改，减少了少改漏改产生的问题。

变量的定义是以$符号开头，加上变量名，比如：

$text-warning: red;

$border-radius: 5px;

.tip {

color: $text-warning;

border: 1px solid $border-radius;

}

变量也可以通过加减乘除等运算符号进行计算，比如：

$font-base: 10px;

.article {

font-size: $font-base * 2 - 4px;

border-width: $font-base / 10;

}

变量还有一种特性就是可以使用#{}这个符号来将变量名插入到属性名或者选择器上：

$side: bottom;

$radius: 5px;

.leading-# {

margin-#: 10px;

border-radius: $radius;

}

另外值得注意的是：

1、变量需要提前声明才能使用，因为编译是从上往下进行的，如果在还未声明变量的地方使用，会找不到这个变量。

2、变量都是全局变量，如果在大括号内部定义的变量则属于局部变量。

3.嵌套

曾经有一个问题困扰过我一段时间，就是在写多媒体查询时的代码，究竟应该放在css文件中的什么位置上。

以前我选择放在样式表的最后，为不同的屏幕宽度专门拿出一块区域来写这部分代码。

但这样做的问题是在于，这些样式规则就和原始的规则分开来了，维护起来会比较烦人。

但还好后来有了sass，它的嵌套规则让我可以通过在原始规则中放媒体查询来解决这个问题

这样可以把它相关的所有规则放在一个地方，这样阅读和维护都变得更容易，不用上下反复查看了。

通常所用到的选择器嵌套是这样的，将新的选择器放到父级选择器当中，并且可以无限多级嵌套：

.nav {

width: 100%;

height: 2rem;

ul {

list-style: none;

}

li {

float: left;

a {

color: gray;

}

}

}

如果想将多媒体查询部分放到其中：

.nav {

width: 80%;

height: 2rem;

ul {

list-style: none;

}

li {

float: left;

a {

color: gray;

}

}

@media only screen and (max-width: 798px) {

width: 100%;

height: 1.8rem;

li a {

color: black;

}

}

}

另外除了选择器之间可以嵌套外，属性也是可以嵌套的：

.box-border {

border: {

style: solid;

left: {

width: 1px;

color: red;

}

right: {

width: 3px;

color: green;

}

}

}

4.继承

如果存在两个class，他们有一些不同但又有许多相似之处，以前的做法可能是把所有样式重复声明两次。

但是有sass之后更好的做法是创建一个基础的class，然后在第二个class中用@extend继承它，同时还可以添加一些额外的样式，或者对某些样式进行重写。

比如我们之前学过bootstrap的按钮的构建思想，是对基础样式进行附加和重写，而现在想要定义自己的样式时就可以很方便地进行这一操作了。

首先声明一个标准样式的class，然后继承这个样式，然后设置不同的主题色：

.btn {

padding: 5px;

border-radius: 5px;

background: #eee;

color: #999;

outline: none;

}

.btn-cancle {

@extend .btn;

background: #fff;

color: gray;

}

5.混合

当出现大段大段重用样式代码时，独立的变量就难以应付，这个时候可以通过sass的混合器@mixin 和 @include 实现大段样式的重用。

在定义mixin时，需要在前面添加@符号，使用时需要用@include来引用该@mixin：

@mixin boxs {

$side: top;

$radius: 5px;

$gap: 10px;

border-radius: $radius;

margin-#: $gap;

}

.article {

@include boxs;

}

.section {

@include boxs;

}

混合器还可以传入参数，并设置默认值：

@mixin boxs($side, $radius: 5px, $gap: 10px) {

border-radius: $radius;

margin-#: $gap;

}

.article {

@include boxs(top);

}

.section {

@include boxs(bottom, 10px, 0px);

}

6.导入

导入规则可以从外部文件导入mixin混合器等等。

在sass中有一个命名惯例，被导入的样式文件名用下划线做前缀。

导入的语法是@import “xxx”，这里的xxx不需要带文件后缀和下划线前缀。

也就是说导入“_text.sass”或者“_text.scss”的时候，只需要写@import “text”就可以了：

@import “boxs”;

.article {

@include boxs(top);

}

.section {

@include boxs(bottom, 10px, 0px);

}

7.控制语句

在sass中还有一些和编程语言一样的控制语句，通过一些条件来限制样式内容。

如果有过编程经验的人对下面这几种语句一定相当熟悉，几乎不用学习只需要看一眼就知道是怎么使用的，当然我们这里还是看一眼它们的例子。

条件语句使用@if：

.nav {

@if $width/$item > 200 {

margin-right:0;

}

@if $width/$item

margin-right:20px;

}

}

循环语句使用@for:

@for $i from 1 to 10 {

.box-# {

height: $i * 10px;

}

}

还有@while:

$i: 1;

@while $i

.box-# {

height: $i * 10px;

}

$i: $i + 1;

}

以及@each:

@each $item in img1,img2,img-circle,img-square {

.icon-#{$item} {

background-image: url(“/images/#{$item}.jpg”);

}

}

以上就是上节课的内容解析啦

下节预告

从零开始入门JavaScript基础语法，为以后进阶打下坚实基础

报名听课的同学们将获得：

1、与技术总监级别的一线开发人员接触、提问机会

2、来自真实项目的应用开发技巧、代码规范

3、与直播课程配套的任务体系、日报体系

4、分配一对一的专属师兄，进行技术辅导

5、课程PPT、录播视频、细化知识点解析课堂等学习资源

周六上午开课，不占用工作、学习时间

一餐饭的价格，汲取实战角度的开发经验

快来扫码报名吧！

条件所限无法报名的同学，我们下周依然会将直播课的文字版更新在公众号，欢迎前来讨论学习~