一.sass的基本概念

sass是css的”预处理器”, 一门专门的css编程语言
增加了变量, 函数, 计算, 嵌套关系等用法,让css编写更简洁, 清晰.

二. scss的安装步骤

  1. 首先查询一下是否已经安装过sass, 在cmd中输入sass -v 或者 sass –version
sass -v
sass --version

使用上面任意一个命令,出现以下几种情况都是已经安装好了
1.52.1 complied with dart2js 2.17.1
ruby 1.52.1
Ruby Sass 3.7.4
版本有差别请忽略

  1. 如果没有出现版本号,那就在cmd中执行命令
npm install -g sass

如果是Mac电脑,电脑会中自带ruby,也可以使用ruby安装

sudo gem install sass

安装完成后执行第一步,再查看一下版本号,有版本号就安装完成了.

三.sass的版本和半自动化监听

  1. 关于版本
    早期sass的后缀名是.sass
    3.0版本以后, 后缀名改成了.scss 这种后缀使用的是css语法

  2. 使用半自动化监听方法
    这里是实现scss文件有变动,自动生成css文件

  1. 首先要在项目目录中有两个文件夹, 一个是 scss ,一个是css. scss文件夹中存放sass文件, css文件夹中存放编译过后生成的css文件.
    在sass文件夹中新建一个 page1.scss 文件
    目录结构:

  2. 在scss 和 css 文件夹的上层父级目录,打开cmd窗口
    ,注意项目路径中不能出现中文,否则会报错
    在 cmd 窗口输入

sass scss/page1.scss:css/page1.css

  1. 在cmd执行命令
sass -w scss:css

-w 表示 watch 监听的含义, 就是只要scss文件夹有变动, 就立即编译到 css 文件夹中,这样就实现了半自动化
如果我们修改scss文件的内容就会自动同步生成到css文件中
如果监听的命令没有执行成功,可以按ctrl + c 退出

四.sass的基本语法

到这里终于可以开始写sass代码了,首先学习基本语法.

  1. 嵌套规则
    按照html结构的嵌套关系,在sass文件中使用{}

// 例如:有一个html结构 .box>a
注意:因为安装版本不同,有的在scss文件中写中文注释会报错,尽量不要使用中文的注释

.box {border: 1px solid #000;a{text-decoration: none;}}

样式如下图:

  1. 父选择器

  2. 变量的使用
    a. 变量的读取顺序

$a:100px;$b:center;$c:#f00;$zts:#0aa1ed;div {    width: $a;    height: 100px-10px;    text-align: $b;    color: $c;    background-color: $zts;    //border-color: $hello;    $hello: green;    p {        background-color: $hello;    }}

b. 变量有作用域
全局变量直接写在scss文件中
局部变量是写在某个选择器{}中的, 只有在{} 作用域内的选择器才可以使用局部变量

  1. 计算功能
    一般不推荐用sass计算, 推荐用js计算
    因为使用sass计算的过程中,有的电脑可以计算并编译,有的会报错或者直接不编译
    原因是系统I/O 读写 调用顺序导致的
    例如,使用除计算时,会编译成以下错误代码:

  2. 插值语句
    格式: #{变量名}
    我们不能直接用变量名作为选择器的名字,
    如果需要使用变量名,就需要使用#{}包裹变量名, 才可以使用, 否则会报错

五. 混合&继承&占位符

  1. 混合指令的语法
    @mixin 创建混合指令的方法, 指令的自定义明不能以数字开头
    @include 使用混合指令的名字

  2. 继承
    一个元素使用另一个元素的全部样式,注意! 是全部样式, 继承不可以选择部分样式
    @extend 继承的规则,继承规则后面放的是要继承的选择器名字, 注意选择器要写全, 继承会在编译之后形成群组选择器, 使代码更加优化
    继承多个选择器可以用逗号连接多个选择器的名字

  3. 占位符选择器%
    占位符选择器的样式可以被继承走,但是占位符不会被编译,类似泛型语法

六. 高级语法

  1. 条件语句
    @if(判断条件){条件为真时}@else{条件为假}
    @if(判断条件){条件1 为真时}@else if(判断条件2){条件2为真时}@else{以上条件均不满足时执行此处}
    注意:第一条件判断在sass中不能使用& 或者 | 要使用关键词 and 或者 or
    条件判断方式 > = <= !== == 这些都可以使用

  2. 循环语句
    @for $i from 1 to 5{ }
    @for 表示for循环
    $i 表示循环变量i
    注意:这里的for循环,变量每次只能自增1
    form 1 to 5 :表示从1到5,但注意不包含5

    @for $i from 1 through 5 { } 跟上面类似,区别是这里包含结束值5