Sass基础功能介绍

本文将从入门角度介绍Sass的极大特性和基本语法, 由于作者初学Sass, 若有不当之处还请指正.

Sass介绍

• Sass 是一个 CSS 预处理器。

• Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，使css代码更"像代码"。

• 有sass和scss两种写法, 有区别符号分别为缩进和大括号, 下文主要使用的是scss符号.

说实话, 这个logo真好看

一、Sass特性:变量

​ Sass在css语言的基础上增加了变量, 比如一个变量可以代表一种被规定好的css属性,从而简化编程.

​ 变量主要有以下这些特点:

​ 1.在sass中, 用$符号表示声明变量

//下面的代码声明了"字体特征myFont"和"颜色myColor"两个变量, 并直接使用
$myFont: Helvetica, sans-serif;
$myColor: red;
body {
  font-family: $myFont;
  color: $myColor;
}

2.在sass中, 变量的作用域就是其所在的层级

$myColor: red;
div{
    color:$myColor;
}
//div中字体呈现红色
p{
    $myColor: green;
    color:$myColor;
}
//p中字体呈现绿色

• 注:在各个层级声明变量时, 都可以使用在声明变量语句后加!global的方式使此变量成为全局变量

  如:$myColor: red !global;

二、Sass特性:嵌套

​ 1.在sass中, 可以将父子关系表现在大括号的嵌套中, 达到后代选择器的功效

nav {
  		ul {
  		........
 		 }
  
  		li {
		  ........
  		}
}

​ 上述代码转换为css代码如下：

nav ul{
.......
}
nav li{
.......
}

​ 2.在scss中, 可以将多个相同前缀的属性嵌套在该前缀中, 下文代码同时编辑了前缀为 font / text 的多个属性:

font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}

三、Sass指令:导入

​ 1.sass可以进行sass/css文件的导入, 导入后,文件中的sass/css样式在此文件中同样生效.

• 注:导入.scss文件时不用添加后缀, 会自动添加.

• 首先我们创建一个名为reset.css的文件:

  html,body,ul,ol { margin: 0; padding: 0; }

• 下面执行导入指令:

//导入reset.scss文件
@import "reset";

//正常写点代码
body {
  color: red;
}

​ 此文件最终包含我们写的代码和导入文件中的代码, 转换成css代码如下:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  color: red;
}

​ 2.导入后,sass文件会被编译为css文件, 如果就想导入sass文件怎么办呢?

• 可以在文件开头加下划线_ ,那么导入时就之后导入sass文件的原文代码

• 注意:若带下划线与不带下划线的同名文件放置在同一个目录下，带下划线的文件将会被忽略。

四、Sass指令:混入

​ 1.如果我们想多次使用一个较为常用的样式, 可以用@mixin指令先定义一个混入:

//定义一个名为"useful-style"样式
@mixin useful-style{
    color:red;
    font-size: 20px;
}

​ 2.定义完此混入后, 就可以通过@include指令引入该混入:

.style {
  @include useful-style;
   background-color: green;
}
//这个元素不仅有绿色的背景色, 还有useful-style中定义的字体特性

​ 3.混入中也可以包含混入，下文代码将三个混入包含到一个混入中,当以后使用这一个大的混入之时, 其内部会包含三个子混入的定义内容：

 @mixin special-text {
 @include important-text;
 @include link;
 @include special-**border**;
}

​ 4.我们可以定义带变量的混入, 这样调用混入时可给混入传递参数, 更加方便：

//定义可以接收两个参数的混入, 这两个参数将作为color, width变量被用于border样式的设定中
@mixin bordered($color, $width) {
  border: $width solid $color;
}

// 调用这个混入，并传递两个参数
.myArticle {
  @include bordered(blue, 1px);  
}

​ 5.有时，不能确定一个混入(mixin)使用多少个参数,这时我们就可以使用 ...来设置可变参数.

@mixin box-shadow($shadows...) {
      box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

于是, 后缀加了...的shadows变量接收了两个参数, css内容如下:

.shadows {
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

五、Sass指令:继承

​ 当一个选择器和另一个选择器有较多的相同之处时,我们可以使用@extend指令进行特性的继承, 在继承指令之后再做增添和修改

.button-basic  {
  padding: 15px 30px;
}

.button-report  {
  @extend .button-basic;
  background-color: red;
}

​ CSS代码如下:

.button-basic, .button-report {
  padding: 15px 30px;
}

.button-report  {
  background-color: red;
}

六、Sass函数

Sass中也有很多函数, 我们可以调用, 可以访问这个网址查看:Sass 函数 | 菜鸟教程 (runoob.com)

当然,本文的大部分内容都是重述一遍此网址