SASS基础使用

SASS基础使用手册

SASS是一个将脚本解析成CSS的脚本语言，即SassScript,对CSS3（层叠样式表）的语法的一种扩充,提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

head

准备工作：

安装Ruby语言—>点击跳转

1.安装

这里我们默认大家已经安装过Ruby，并且配置了环境变量，安装SASS只需要在Ruby根目录打开命令行，执行以下代码即可：

1	gem install sass

2.使用

创建后缀名为.scss的文件，在其中写sass代码，但是浏览器并不认识它，我们需要将它转换为浏览器认识的格式，如css：

1	sass test.scss test.css

SASS也帮我们内置了四种文件模式，以供我们选择使用：

nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩css代码。

假如我们想要压缩css文件，这时就不必去用什么三方插件，可选择SASS为我们内置的文件模式：

1	sass --style compressed test.sass test.css

SASS也为我们提供了热加载：

1	sass --watch input.scss:output.css

3.基础用法

3.1 变量

SASS中允许我们声明变量，用 $ 开头：

$blue : red;　
div {
       color : $blue;
}

3.2 计算功能

SASS允许在样式中使用运算操作：

div {
	margin:(1+4)px;
	padding:(2*5)px;
	left:(10/5)px;
}

3.3 嵌套

SASS允许选择器进行嵌套：

//普通嵌套
	#father{
		width:50px;
		height:50px;
		#child{
			background-color:pink;
		};
	};

//属性同样可嵌套
    .class{
        margin:{
            left:10px;
            right:10px;
        };
    };

//在嵌套块中，可使用&来访问父级。如a:hover 则可写为
	a{
    	&:hover { color: pink; }    
	};

3.4 注释

SASS中注释可有三类：

// 单行注释，只在sass中可见，编译后会被省略

/*
	多行注释，会保留到编译文件中
*/

   /*！
	重要注释，此注释不但会保留到编译文件中，连格式也会保留
   /

3.5 继承

SASS中允许出现继承关系，使用关键字 @extend

// class2继承calss1，即class2拥有class1的属性
	.class1{
		width:10px;
	};
	.class2{
		@extend .class1;
		height:10px;
	};

3.6 Mixin

Mixin我们就把他理解成一个方法即可，使用关键字 @mixin:

// 我们定义一个居中方案，使用时直接使用即可
	@mixin center{   
		position: absolute;
		left:0px;
		right:0px;
		top:0px;
		bottom:0px;
		margin:auto;
	};

	.class2{
		@include center;  //使用关键字 @include 引用
	};

3.7 自定义函数

SASS允许我们定义函数，使用关键字 @function：

@function tuo($n){
    @return $n * 2;
};

.class4{
    margin: tuo(5);
};

3.8 if判断

SASS允许简单的逻辑运算，如if，使用关键字 @if :

    .class5{
        @if 1+1 == 2 { margin:0 auto; }
    };

//当然它的搭档 @else，也还在：
    .class6{
        @if( 3 > 5 ){
            color:red;
        }@else{
            color:pink;
        };
    };

3.9 循环操作

for循环，使用关键字 @for ：

    @for $i from 1 to 5{
        .box#{$i}{
            size:#{$i}px;
        };
    };

//提示：#{}相当于ES6中的${},用于做拼接操作

while循环，使用关键字 @while ：

$s:0;
@while $s<5{
    .time#{$s}{
        margin-left:#{$s}px;
    };
    $s: $s+1;
};

4.结语

本文旨在指导快速入门了解SASS，并不能靠本文一招吃透SASS，当然，也没有任何一门技术是可以速成的，都是要靠一定周期的学习、练习去认识去掌握，本文概括不全的地方请去官网查看——->传送门。

本文参考与阮一峰的《SASS用法指南》