sass是css预处理器,完全兼容所有版本的CSS。
Sass 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性,易于组织和维护。
SASS文件就是普通的文本文件,里面可以直接使用CSS语法。文件后缀名是.scss,意思为Sassy CSS。
安装:npm install sass
SASS提供四个编译风格的选项
1、nested:嵌套缩进的css代码,它是默认值。
2、expanded:没有缩进的、扩展的css代码。
3、compact:简洁格式的css代码。
4、compressed:压缩后的css代码。
基本用法
1、变量
SASS允许使用变量,所有变量以$开头。
如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。
2、计算功能
SASS允许在代码中使用算式:
3、嵌套
SASS允许选择器嵌套。比如,下面的CSS代码:
可以写成:
属性也可以嵌套,比如border-color属性,可以写成:
注意,border后面必须加上冒号。
在嵌套的代码块内,可以使用&引用父元素。比如a:hover伪类,可以写成:
注释
SASS共有两种注释风格。
标准的CSS注释 /* comment */ ,会保留到编译后的文件。
单行注释 // comment,只保留在SASS源文件中,编译后被省略。
在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
代码的重用
1、继承
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
class2要继承class1,就要使用@extend命令:
2、Mixin
Mixin有点像C语言的宏(macro),是可以重用的代码块。
使用@mixin命令,定义一个代码块。
使用@include命令,调用这个mixin。
mixin的强大之处,在于可以指定参数和缺省值。
使用的时候,根据需要加入参数:
下面是一个mixin的实例,用来生成浏览器前缀。
使用的时候,可以像下面这样调用:
3、颜色函数
SASS提供了一些内置的颜色函数,以便生成系列颜色。
4、插入文件
@import命令,用来插入外部文件。
@import "path/filename.scss";
如果插入的是.css文件,则等同于css的import命令。
@import "foo.css";
高级用法
1、条件语句
@if可以用来判断:
配套的还有@else命令:
2、循环语句
SASS支持for循环:
也支持while循环:
each命令,作用与for类似:
3、自定义函数
SASS允许用户编写自己的函数。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.