sass、scss完整教程

前言

sass是css的预处理器,你可以像编程一样去写css,极大的简化css,同时支持块级作用域,使css不再为了重复类名导致样式覆盖问题而烦恼.

sass的安装

首先sass是基于Ruby开发的,所以想要使用sass,你必须先装Ruby,不过Mac自带Ruby环境,所以使用Mac的朋友可以直接安装sass,如果你的电脑已经有了Ruby,那么你可以直接执行以下安装命令

gem install sass

npm装一下sass

npm i sass -S

webpack配置

sass安装好之后,还需要去构建工具配置一下,方式也很简单,使用s在这里插入代码片ass-loader可以对sass进行编译

{
	test:\/.(sass | scss)$\,
	use:'sass-loader'
}

顺便提一句,sass-loader与less-loader一样的安装方式,这里不进行赘述,有疑问的同学可以参考上一篇less的博客,非常详细

sass的简单用法

sass文件的文件名后缀,可以是.sass,也可以是.scss,推荐朋友们使用.scss,因为.scss你可以使用的语法与css相似,但是如果是.sass,这个语法是和css有很大不同的,很多情况下会非常的不习惯.下面以.scss文件的语法为例.

一、变量

sass可以以$符开头定义变量

$color : rgba(0, 0, 0, 0.5);
.test{
	color: $color;
}

除了颜色,还可以任意定义尺寸、甚至简写方式,举个简单的例子,剩下的你可以发挥自己想象的空间了

$padding: 10 20 30 40;
.test{
	padding:$padding;
}

变量遵循块级作用域原则,如果你想让定义的变量可以全局使用,那么你可以这样

.test{
	$color:rgba(0,0,0,0.5) !global;
}

二、混合

一般用法

可以使用@mixin来定义一个混合器,并通过@include来使用,还是来一个例子

@mixin test-style {
	width:100px;
	height:100px;
	background-color: #f00;
}

.test{
	@include test-style;
}

像函数一样使用

除此之外,你还可以将混合器当作一个function一样来使用,想象空间瞬间大了起来

@mixin test-style($w, $h, $color){
	width: $w;
	height:$h;
	background-color:$color;
}

.test{
	@include test-style(100px, 100px, #f00);
}

给混合设置个默认值

当然你可以如下所示这样来设置默认值,但是,还是可以发挥想象空间的,默认值也可以使用sass的变量

@mixin test-style($w:200, $h:300, $color:#f0f){
	width: $w;
	height:$h;
	background-color:$color;
}

三、继承

混合用起来感觉很方便吧,那么现在你可以选择另一种方式,可以同样方便的,批量使用css.sass提供了继承的方式,以@extend来使用需要继承的类的属性

.test-1{
	width:100px;
	height:100px;
	background-color:#f00;
}

.test-2{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	@extend .test-1;
}

这样一来,你就得到来两个一样颜色,一样大小的容器,这里需要注意的是,继承的优先级很低,无法覆盖前面相同的css属性,同时继承容易出现大量复制类名的情况,请谨慎使用

四、嵌套

sass支持嵌套的写法

.test-1{
	width:100px;
	height:100px;
	display:flex;
	justify-content:center;
	align-items:center;

	.test-2{
		width:50px;
		height:50px;
	}
}

它对应的html结构,应该是

<div className={styles['test-1']}>
	<div className={styles['test-2']}></div>
</div>

五、父选择器表示符&

sass以&符为父选择器标识符

.test{
	width:100px;
	height:100px;
	
	&:hover{   // 等价于 .test:hover
		color:#f00;
	}
}

你还可以这样

.test{
	width:100px;
	height:100px;
	
	&-1:hover{   // 等价于 .test-1:hover
		color:#f00;
	}
}

六、插值语句#{}

它最大的作用,应该就是,通过 #{} 插值语句可以在选择器或属性名中使用变量：

$name:test;
.#{$name}{
	width:100px;
	height:100px;
	color:#f00;
}

七、文件导入

可以通过@import将另一个sass文件导入到当前的sass文件中,但是当以下这些情况的时候,@import仅作为普通的css语句生效

1、文件拓展名是 .css；
2、文件名以 http:// 开头；
3、文件名是 url()；
4、@import 包含 media queries。

@import ‘./style.scss’;

.test{
	width:100px;
	height:100px;
	color:#ff0;
}

八、计算能力

数值计算

支持 +, -, *, /

$width:10;
.test{
	width: 100 + $width;
}

颜色的色值计算

$color:#390;

.test{
	color:#f00 + $color;
}

还可以计算透明度,通过 opacify 或 transparentize 两个函数进行调整。面对设计稿#F0F000这样的色值,加上0.5的透明度,再也不用烦恼转换颜色了.

$color:#F0F000;

.test{
	// color用opacify
	color:opacify($color, 0.5);

	// 背景色用transparentize
	background-color:transparentize($color, 0.5);
}

以上这些应该是日常中比较常用的使用方法了,当然除了这些还有很多很多很多的高级用法,比如条件语句、函数、各种指令等等.但是作为快速学习,日常使用,以上就完全够用了.如果你想了解一些高级用法,那么请继续看

高级用法

条件语句

@if
@else
@else if
用法看例子,如同js一样

$type:test;

.test{
	@if $type == test {
		color:#f00;
	}@else if $type == test-1{
		color:#0f0;
	}@else{
		color:#00f;
	}
}

循环语句

@for

@for $i form 1 to 10 {
	.test-#{$i}{
		color:rgba(#{$i}, 255, 0);
	}
}

自定义函数

@function

@function test-color($color){
	color:$color;
}

.test{
	color:test-color(#f00);
}

在其他的高级用法,这里就不讲了,太多了,可以直接去官网查看,本篇文章,日常使用完全够用了