找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1234|回复: 0

Sass快速入门

[复制链接]

304

主题

42

回帖

1348

积分

管理员

积分
1348
发表于 2021-4-5 22:07:42 | 显示全部楼层 |阅读模式
一.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;
        }
}

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|外汇论坛 ( 粤ICP备16021788号 )

GMT+8, 2024-12-22 21:11 , Processed in 0.073616 second(s), 18 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表