Sass快速入门

admin

一.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;
        backgroundbgcolor;
        colorfgcolor;
        font-weight: bold;
        font-size: $fs;
}

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

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

        .main{
                height:200px;
                backgroundbgcolor;
                colorfgcolor;
                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-sizefs;
};

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

        .main{
                height:200px;
                backgroundbgcolor;
                colorfgcolor;
                font-weight: bold;
                @include getfont(70px);
        }
}

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

%mainext{
        backgroundbgcolor;
        colorfgcolor;
        font-sizefs;
}

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;
        }
}