Sass预处理器教程

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学，可以点心心支持一下哈

一、sass是什么

Sass官方文档 www.sasscss.com/guide

Sass中文网 www.sass.hk

sass是一种css预处理语言，由Ruby语言开发，比css多出很多功能（变量、嵌套、运算、混入、继承、指令、函数）更容易阅读

sass的工作方式是，在sass源文件中写代码，然后由sass程序（sass编译器）将其转化成css文件

二、sass和scss 的关系

sass 的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到sass 里面，因此 sass 语法进行了改良，sass 3就变成了scss(sassy css)。与原来的语法兼容，只是用 { } 取代了原来的缩进，更像css写法。（以前版本使用缩进风格 sass，最新版本改为{ } scss）

三、sass（scss）和less的区别

(1)编译环境不同

sass需要Ruby环境，日常开发使用sass插件（Live Sass Compiler或其他）（运行在服务器端）

less基于JavaScript，需要引入less.js来处理代码输出css（客户端运行，也就是浏览器运行）

(2)变量符不同

sass: $color:#000;

less: @color:#000;

(3)输出风格不同

sass有四种输出风格：

nested:嵌套缩进的css代码

expanded:展开的多行的css代码

compact:简洁格式的css代码

compressed:压缩后的css代码

(4)条件语句不同

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持

......

四、sass的使用

1. 安装Sass

首先，确保你已经安装了Sass。你可以使用以下命令在命令行中安装：

npm install sass -g

2. 基础语法

Sass的基础语法与CSS类似，但它引入了一些额外的特性：

原始 Sass 语法：

$primary-color: #3498db;

body
  background-color: $primary-color;

转换为 SCSS 语法：

$primary-color: #3498db;

body {
  background-color: $primary-color;
}

在 SCSS 中，使用分号 ; 表示语句的结束，而使用花括号 {} 表示代码块。这样的转换是相对简单的，因为 SCSS 更接近于常规的 CSS 语法。

在这个例子中，$primary-color 是一个变量，用于存储主题色。

3. 变量

使用变量可以方便地存储和重用值：

// styles.scss

$primary-color: #3498db;
$font-size: 16px;

body {
  background-color: $primary-color;
  font-size: $font-size;
}

这样，当需要更改主题色或字体大小时，只需更改变量的值即可。

4. 嵌套

使用嵌套可以更清晰地表示选择器的层级关系：

// styles.scss

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
      margin-right: 5px;

      a {
        text-decoration: none;
        color: $primary-color;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

嵌套规则让样式表更加易读，同时避免了重复书写选择器。

5. 混合（Mixin）

混合允许将一组样式组合成一个集合，并在需要时重复使用：

// styles.scss

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

这里，@mixin定义了混合，@include使用了混合。这样可以避免在代码中多次写入相同的前缀。

6. 导入其他SCSS文件

使用@import语句可以将其他 SCSS 文件导入到当前文件中，实现代码模块化：

// styles.scss

@import "reset";
@import "variables";
@import "mixins";

7. 运算

scss 允许进行基本的数学运算：

// styles.scss

$base: 10px;
$padding: $base * 2;

.element {
  margin: $base + 5px;
  padding: $padding;
}

这样可以在样式表中进行数值计算，使得样式表更加灵活。

8. 条件语句

使用条件语句可以根据不同条件应用不同的样式：

// styles.scss

$width: 10px;

div {
  width: $width;
  height: $width;

  @if $width > 5 {
    background-color: red;
  } @else {
    background-color: blue;
  }
}

9. 循环

使用循环可以重复应用样式：

// styles.scss

@for $counter from 1 through 5 {
  .class-#{$counter} {
    width: $counter * 10px;
  }
}

这个例子中，通过循环生成了带有不同宽度的 CSS 类。

10. 注释

使用注释来增强代码的可读性：

// styles.scss

// This is a single-line comment

/* 
  This is a
  multi-line comment
*/

$primary-color: #3498db;

body {
  background-color: $primary-color;
}