外汇论坛 › Bootstrap5 › Sass快速入门

admin 发表于 2021-4-5 22:07:42

Sass快速入门

一.Sass安装
dart-sass-1.32.8

二.Sass环境变量
D:\dart-sass

三.Sublime Sass编译器
SASS-Build
1.noexpress+nomap
2.noexpress+map
3.express+nomap
4.express+map

四.Sass CSS编程实例
1.变量
$bgcolor:#555;
$fgcolor:#fff;
$fs:30px;

body{
        padding:0px;
        margin:0px;
        background:$bgcolor;
        color:$fgcolor;
        font-weight: bold;
        font-size: $fs;
}

2.嵌套
$bgcolor:#555;
$fgcolor:#fff;
$fs:30px;

body{
        padding:0px;
        margin:0px;

        .main{
                height:200px;
                background:$bgcolor;
                color:$fgcolor;
                font-weight: bold;
                font-size: $fs;
        }
}

3.模块
1)_font.scss
$bgcolor:#555;
$fgcolor:#fff;
$fs:50px;

2)index.scss
@use 'font';

body{
        padding:0px;
        margin:0px;

        .main{
                height:200px;
                background:font.$bgcolor;
                color:font.$fgcolor;
                font-weight: bold;
                font-size: font.$fs;
        }
}

4.mixins
$bgcolor:#555;
$fgcolor:#fff;

@mixin getfont($fs){
        font-size:$fs;
};

body{
        padding:0px;
        margin:0px;

        .main{
                height:200px;
                background:$bgcolor;
                color:$fgcolor;
                font-weight: bold;
                @include getfont(70px);
        }
}

5.继承或扩展
$bgcolor:#555;
$fgcolor:#fff;
$fs:70px;

%mainext{
        background:$bgcolor;
        color:$fgcolor;
        font-size:$fs;
}

body{
        padding:0px;
        margin:0px;

        .main{
                height:200px;
                font-weight: bold;

                @extend %mainext;
        }
}

6.运算
$bgcolor:#555;
$fgcolor:#fff;
$fs:50px*2;

%mainext{
        background:$bgcolor;
        color:$fgcolor;
        font-size:$fs;
}

body{
        padding:0px;
        margin:0px;

        .main{
                height:200px;
                font-weight: bold;

                @extend %mainext;
        }
}

查看完整版本: Sass快速入门