Sass 基本使用

说明

sass 是css 的预处理器，是对 css 的扩展，可以编译成传统的css, 使用 sass 代替 css 编写样式， 可以有效的减少冗余代码

1. 安装

Windows

需要预先安装 Ruby 下载地址

Mac

Mac 内置安装了 Ruby

安装Sass

打开终端 输入

gem install sass

如果报错，可能是需要管理员权限 Mac +

sudo

windows 选择用管理员权限打开终端

检查是否安装成功

sass -v

2. 语法

sass 文件 有两种写法， 一种是SCSS 是 css 的扩展版本， 另外一种是 SASS 书写方式上与css 有些差异，本文采用第一种写法

1. 定义变量 $

变量前边加入

$

, 变量之中也可以引入其他变量

$primary-color : #999;

    .box{
        background : $primary-color;
    }
           

2. 嵌套 &

&

表示直接调用父选择器

&-test

表示用父选择器拼接

.nav{
        color : red;
        ul{
            margin : ;
            li{
                list-style : none;
            }
            &:hover{
            }
            & &-test{
            }
        }
    }
           

嵌套也可以用在样式的属性里边，但是上一级属性必须加

:

border: {
        left: px;
        right: px;
        top: px;
        bottom: px;
    }
           

3. 混合 @mixin

表示可以重用的代码块

@mixin : 定义一个代码块

$t: 0

用来设置默认值

@mixin posabs($t: 0, $r: 0, $b: 0, $l: 0) {
        position: absolute;
        top: $t;
        right: $r;
        bottom: $b;
        left: $l;
    }
           

@include 引用一个代码块

.box{
        @include posabs(, 10);
        width: px;
        height: px;
    }
           

使用

@include name (b:#333,a:#444);

可以 不按照顺序传入

4. 继承扩展 @extend

让一个选择器继承另一个选择器中的所有样式

.box{
        @include posabs(, 10);
        width: px;
        height: px;
    }

    .test{
        @extend .box;
        font-size: px;
    }
           

.test继承了.box的所有样式，包括.box子元素的样式

5. 引用外部文件 @import

引入其他scss文件中的所有内容，这些小的分支的scss文件叫 partials 小的scss文件命名需要以“_”开头，这样，sass就会识别，不直接将其编译，而是在引入的文件中编译

可以用来模块化，更有调理一点

// _common.scss
    $color: red;

    // app.scss
    @import "common";
    .box{
        width: px;
        height: px;
        background: $color;
    }
           

6. 注释

/*!
    *强制注释，注释内容会一直存在在css中
    */

    //单行注释，输出的css文件中不会包含
    /*
    * 多行注释，压缩后不存在
    */
           

7. 颜色函数

内置颜色函数

lighten($color, %) // 增加明度
　　darken($color, %) // 降低明度
　　grayscale($color) // 变灰
　　complement($color) // 返回补充色
           

更多颜色函数查看

8. sass中的函数

abs(-px) // 返回绝对值 10px
    round() // 四舍五入 4
    floor() // 向下取整
    ceil() // 向上取整
    min(, , , ) // 选取最小值
    max(, , ) // 选取最大值
           

9. 更多使用方法查看官网