Sass 入门

Posted 2021-01-31 yanjiez

1 什么是Sass

简单来说，Sass是 CSS的预处理器 ，它将CCS变为了一种更干净、高效的编程语言（变量、条件语句、继承...）。

2 安装与使用

2.1 安装

1. 下载 Ruby
2. 安装sass，通过在命令行中运行

gem install sass

2.2 使用

创建Sass文件，后缀名为.scss，意思为 Sassy CSS。

2.2.1 生成CSS

命令行运行以下语句可以将Sass文件编译为CSS文件

sass sass/style.scss css/style.css

2.2.2 添加监视

添加监视后，无需每次手动生成CSS，SCSS文件保存后会自动生成

sass --watch sass/style.scss:css/style.css

退出监视：ctrl + c

3 特性

3.1 变量

Sass中的变量以$开头。

//定义变量
$color-yellow:#FFE100;
//使用变量
div{
    color:$color-yellow;
}

3.2 嵌套

在CSS的编写中，多层结构会写很多重复的code：

.main{...}
.main .content{...}
.main .content ul{...}
.main .content ul li{...}

而在Sass中，可以写成：

.main{
    ...
    .content{
        ...
        ul{
            ...
            li{
                ...
            }
        }
    }
}

使代码更具有结构化，且避免了不必要的重复，但需注意不宜嵌套过深。

3.3 父元素引用

在嵌套子层级中，可以使用&引用父元素

.div{
    &:hover{
        background:#333;
    }
}

3.4 运算

$screen-width:100vw;
$screen-height:100vh;
div{
    width:$screen-width / 2;
    height:$screen-height - 100px;
}

3.5 继承

允许一个选择器继承另一个选择器，关键字为 @extend

//父类选择器
.btn{
    padding:4px 12px;
}
//子类继承
.btn-1{
    @extend .btn;
    background-color:#333;
}

3.6 混合mixin

mixin是一种可以重用的代码块，可传递参数，关键字为 @mixin ， @include
不传参时类似继承，但不占用选择器名

//定义
@mixin btn{
    padding:4px 12px;
}
//使用
.btn-1{
    @include btn;
    background-color:#333;
}

传参

//定义
@mixin btn($background:#fff){
    padding:4px 12px;
    background:$background;
}
//使用
.btn-1{
    @include btn(#333);
}

3.7 条件语句

@if、@else一般配合@mixin使用

@if lightness($color) > 30% {
　　background-color: #000;
} @else {
　　background-color: #fff;
}

3.8 插值

插值#{}一般与循环在一起使用，如下一小节

3.9 循环

3.9.1 for循环

@for $i from 1 to 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

3.9.2 while循环

$i: 10;
@while $i > 0 {
　　.item-#{$i} { width: 2px * $i; }
　　$i: $i - 2;
}

3.9.3 each循环

@each $img in a, b, c {
　　.#{$img} {
　　　　background-image: url("/image/#{$img}.jpg");
　　}
}

3.10 颜色函数

常用的颜色函数主要是加深darken和减淡 lighten

$color-yellow:#FFE100;
$color-yellow-light:lighten($color-yellow,20%);
div{
    color:darken($color-yellow-light,10%);
}

3.11 自定义函数

//定义
@function double($n) {
　　@return $n * 2;
}
//使用
#sidebar {
　　width: double(5px);
}

3.12 引用外部scss文件

可以根据component来分成多个scss文件来写样式，最后统一引入主scss文件，或者引用一些通用的样式，如变量定义文件_variables.scss、mixin定义文件_mixins.scss等

@import "general/variables";
@import "general/mixins";

@import "components/header";
@import "components/login";