By

Contents
  1. 1. 1. 文件
  2. 2. 2. 语法
    1. 2.1. 1. 导入
      1. 2.1.1. 语法
      2. 2.1.2. 简介
      3. 2.1.3. 实例
    2. 2.2. 2. 单行注释
      1. 2.2.1. 实例
    3. 2.3. 3. 变量
      1. 2.3.1. 语法
      2. 2.3.2. 实例
    4. 2.4. 4. 嵌套
      1. 2.4.1. 实例
    5. 2.5. mixin
      1. 2.5.1. 简介
      2. 2.5.2. 实例
    6. 2.6. 函数
      1. 2.6.1. 实例

sass 念： [sæs]

相关准备工作，参考在vscode上使用SASS

1. 文件

sass有两种后缀名文件：

一种后缀名为sass，不使用大括号和分号；

另一种和我们平时写的css文件格式差不多，使用大括号和分号。

两种文件除了大括号和分号以外没什么区别，这里我们主要讨论的是sass

tips: 由于没有大括号，结构完全依靠缩进控制，有点像Python。书写的时候一定要严格注意缩进。
(这也是我给做不好缩进的同学们推荐使用sass的原因，多写写sass，你就会养成好好缩进的习惯了。)

创建测试文件：

  1. 新建一个文件test.sass

  2. 新建一个index.html，引入test.css文件，默认路径在同目录，按照我之前的配置的修改后，在./css/test.css

  3. 用vscode打开test.sass

安装好Sass和Easy Sass两个插件，就可以开始书写sass了

2. 语法

这里主要提一些常用语法，更深入的学习需要多看手册、多多实践

1. 导入

语法

1
@import "String";

引入多个的时候分号;不能省略

简介

@import 可以导入一个css/sass文件，如果是sass则会在编译后出现在当前文件中，sass后缀可以省略

我们一般把导入的文件命名为_（下划线）开头，如_header，_footer

（理论上在导入时_可以省略，如：@import "header" 不过后来发现在windows下用Easy Sass不支持，其他系统正常）

实例

1
2
@import "_header";
@import "_footer";

2. 单行注释

实例

1
2
//@import "_header";
//@import "_footer";

3. 变量

语法

1
2
//声明变量
$var: value

声明后可以直接使用（是一个全局变量）

实例

1
2
3
$blue: #26a6e0
h1
    color: $blue

tips: 注意:前面没空格，后面有空格

变量后面加上!default是默认变量，类似于编程中的默认方法，定义了变量的默认值，在出现新的赋值后会覆盖掉默认变量

4. 嵌套

说起来比较复杂，看看实例你就会明白了

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
footer
    padding-bottom: 30px
    .foot-list
        margin: 0 auto
        a
            font-size: 0.875em
            &:hover
                font-size: 1em
        @media (min-width:1000px)
            width: 14%
            max-width: 154px
    .foot-line
        @media (min-width:760px) and (max-width:1000px)
            margin: 0 -10px

比较特殊的一个字符：&表示当前选择器，上面的&:hover就相当于footer .foot-list a:hover，一个类似用法：&::after

mixin

简介

mixin用来添加任何你想重复使用的样式

可以用编程中的函数的思想理解mixin：定义一个mixin用来制作一个代码片段，调用mixin就可以引入这个片段，mixin也可以传递参数，多个参数用,隔开

实例

声明mixin 

1
2
3
@mixin mixin-demo
    margin-left: -15px
    margin-right: -15px

引入mixin-demo

1
2
div
    @include mixin-demo

声明一个带参数的mixin 

1
2
3
@mixin mixin-demo($mar: -15px)
    margin-left: $mar
    margin-right: $mar

引入mixin-demo

1
2
3
div
    @include mixin-demo//使用默认值
    @include mixin-demo(-16px)//传入参数

函数

sass预设了很多函数，在这里查看：sass fuction

这里主要说两个经常用到的：

lighten($color,$amount)颜色按百分比变淡
darken($color,$amount)颜色按百分比加深
它们的第一个参数都是颜色值，第二个参数都是百分比

实例

1
2
3
4
$blue: #26a6e0
h1
    color: lighten($blue,10%)
    border: 1px solid darken($blue,10%)
Contents
  1. 1. 1. 文件
  2. 2. 2. 语法
    1. 2.1. 1. 导入
      1. 2.1.1. 语法
      2. 2.1.2. 简介
      3. 2.1.3. 实例
    2. 2.2. 2. 单行注释
      1. 2.2.1. 实例
    3. 2.3. 3. 变量
      1. 2.3.1. 语法
      2. 2.3.2. 实例
    4. 2.4. 4. 嵌套
      1. 2.4.1. 实例
    5. 2.5. mixin
      1. 2.5.1. 简介
      2. 2.5.2. 实例
    6. 2.6. 函数
      1. 2.6.1. 实例