Sass学习笔记

Sass

Sass（Syntactically Awesome Stylesheets）是一个CSS预处理器，Sass 扩展了CSS，例如嵌套、混合、继承和其他一些特性，使得CSS的编写，变得更加简单和可维护。（Sass官网）

Sass安装

使用npm来安装Sass：

npm install -g sass

安装完成后可查看sass版本：

sass --version

Sass编译

• 创建一个.scss文件（如test.scss）；
• shift+右键，选择在“在此处打开powershell窗口”，输入以下命令，将.scss文件转化为css，并生成test.css文件和test.css.map文件。

sass test.scss test.css

踩坑：若遇到如下问题，请接着往下操作3步，否则可跳过

• 1.在PowerShell 输入get-executionpolicy查看计算机目前的执行策略，若为：Restricted，则说明执行策略受限，不允许运行未签名的脚本。
• 2.解决：更改计算机的执行策略。在开始–>右键，以管理员身份打开PowerShell 输入 set-executionpolicy remotesigned
  
  
  3.输入：Y，回车。
  重新执行sass test.scss test.css命令，成功。

SASS监听

可以让Sass 监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

	// watch a file
　　sass --watch input.scss:output.css
　　
　　// watch a directory
　　sass --watch app/sass:public/stylesheets

Sass变量

变量用于存储一些信息，可以重复使用。
Sass 变量使用 $ 符号开头，使用 : 赋值，如下：

/* 定义变量与值 */
$bgcolor: red;

/* 使用变量 */
body {
  background-color: $bgcolor;
}

Sass计算功能

Sass 允许在代码中使用算式：

div{
　　　　margin-top: (20px/2);
　　　　width: 50px + 100px;
　　　　height: $var * 10%;
　　}

注意：除法运算要加括号。

Sass注释

• 标准的CSS注释 /* comment */ ，编译后会保留。
• 单行注释 // comment，编译后被省略。
• 重要注释加感叹号（!），压缩编译也会一直保留：

	/*!
　　　　重要注释！
　　*/

Sass 嵌套规则

Sass代码：

  ul {
    list-style: none;
     li {
    display: inline-block;
 	 }
  }

转换为CSS后：

ul {
  list-style: none;
}
ul li {
  display: inline-block;
}

可以使用&引用父元素。比如a:hover伪类，可以写成：

a {
　　　　&:hover { color: gray; }
　　}

Sass 嵌套属性

Sass代码：

font: {
  family: "微软雅黑";
  size: 16px;
}

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

转换为CSS后：

font-family: "微软雅黑";
font-size: 18px;

text-align: center;
text-overflow: hidden;

Sass 导入文件

@import "filename";

**注意：**无须文件后缀，Sass 会自动添加后缀 .scss。

Sass混入

混入(mixin)通过 @mixin 指令来定义，通过@include 指令包含使用，例如：

@mixin mixin-name{
  color: pink;
  font-size: 16px;
}

div{
  @include mixin-name;
  background-color: red;
}

转化为CSS代码后：

div{
  color: pink;
  font-size: 16px;
  background-color: red;
}

另外，混入中可以包含混入：

@mixin mixin-name {
  @include other-mixin-name;
}

混入也可以接收参数（参数可设默认值，也可设可变参数）：

/* 混入接收两个参数 */
@mixin boxs-border( $width,$color) {
  border: $width solid $color;
}
.boxs {
  @include boxs-border(1px,blue); // 调用混入，并传递两个参数
}

Sass继承

Sass 继承使用@extend 指令，方便代码的复用，例如：

.div1{
  width:50px;
  height:50px;
  color: white;
}

.div2{
  @extend .div1;
  background-color: red;
}

.div3{
  @extend .div1;
  background-color: green;
}

转换为CSS代码后：

.div1, .div2, .div3{
	width:30px;
  	height:20px;
  	color: white;
}

.div2{
  background-color: red;
}

.div3{
  background-color: green;
}

Sass 函数

Sass 定义了各种类型的函数，我们可以通过 CSS 语句直接调用。例如：

//将字符串转成大写
to-upper-case("hello"); //结果: "HELLO"

Sass允许用户编写自己的函数：

@function fun($num) {
　　　　@return $num * 4;
　　}

　　#box{
　　　　width: fun(5px);
　　　　height:fun(6px);
　　}