CSS预处理器:SASS快速入门

2018年3月4日20:31:32 发表评论 72

在之前我写过一篇CSS进阶:LESS快速入门的文章,这次这个sass和less一样是css预处理器,同样对对css的编写提高不少的效率,虽然sass和less用法都差不多,但在网上浏览博客时,总是发现sass比less讨论的人更多,用的人也更多,所以说有必要把sass的基本用法也学习一下。

CSS预处理器:SASS快速入门

一、安装sass

sass是ruby语言写的,所以必须先安装ruby,然后再把sass装好。

如果你是使用webpack或者其它打包工具,可直接在项目中写sass,比如vue-cli搭建的vue项目,只需要安装sass的loader就可以直接使用了。

这里假定你已经安装好了ruby,接下来只需要在命令行里输入:

就可以使用sass了,这点相比less是比较麻烦的。

二、sass编译

如果你对css是一定的了解,那么对sass的理解也会更加的快,sass文件后缀名是.scss,意思是Sassy CSS。

通过下面的命令可以将.scss文件转化为css代码:

或者保存一个指定的css文件名:

SASS提供四个编译风格的选项:

在生产环境中,我们一般是使用compressed来编译

三、sass基本使用

1.变量

在sass中,所有变量以$开头

也可以将变量镶嵌在字符串中,就必须使用#{}

2.计算功能

在sass中,同样可以使用算式:

3.嵌套

也可以这样写:

就连属性也是可以嵌套的,比如说border-color属性,但是border必须加上冒号:

在嵌套中,可以用&引用父元素,比如a:hover

4.注释

据我了解less的注释只有一种,在编译时也不会被保留,而在sass中,有两种注释风格:
1. 标准css注释/* comment / ,会保留到编译后的文件。
2. 单行注释:// comment,只会在sass文件中显示,编译后被省略。
像下面这样在/
加个!号是表示重要注释,编译后会保留,就算是压缩模式下的编译,通常放版权信息:

四、sass代码重用

1.继承

在sass选择器中允许继承另一个选择器,比如说base:

base2继承base,就要使用@extend命令:

2.Mixin

sass中的Mixin像c语言中的宏,是可以重用的代码块,使用@mixin就可以定义:

使用@include调用上面这个mixin:

mixin还可以指定参数和默认值:

可以不写参数,同样也可以写:

4.插入文件

和css引入同样,可以使用@import命令来插入外部文件:

四、sass高级用法

1.条件语句

支持使用@if语句:

还有配套的else命令:

2.循环语句

支持for循环,好像less不支持吧:

也可以使用while循环:

each循环:

3.自定义函数

还支持自定义函数:

less和sass有很多相似之处,个人认为sass更加强大点,并且有团队长期维护,更加可靠,不过还是要根据个人需求或者公司的需求来进行选择,工具是死的,人是活的。

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: