Sass基础

Sass是一种CSS预处理器,它引入了变量、嵌套、混合、继承等编程特性,使得CSS编写更加优雅和高效。通过Sass,可以创建可复用的代码片段,简化CSS的维护。例如,Sass允许定义变量用于存储颜色、尺寸等,使用嵌套规则简化选择器结构,并通过混合(mixins)和继承(@extend)实现代码重用。此外,Sass还支持条件语句、循环和数组,进一步增强了CSS的表达能力。
摘要由CSDN通过智能技术生成

Sass是为了让我们更优雅地写CSS,可以让我们使用编程语言中的特性来写CSS

浏览器不能识别Sass,写好的Sass需要编译成CSS
vscode使用插件easy sass。

sass官网:https://www.sass.hk/

类似Sass的CSS预编译语言还有:

  • Less
  • Stylus
  • Sass

在html中使用时引用.css文件或.min.css文件

Sass写法:
在这里插入图片描述

文件后缀:.scss
例:$fs:10px;
$声明变量
fs:变量名;
10px:变量值
使用时需要带上$符号

在这里插入图片描述
.css与.min.css是插件帮我们生成的css文件,两者区别在于压缩与否。

嵌套

Sass允许嵌套

.father{
    width: 200px;
    height: 200px;
    background-color: gold;
    .son{
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
}

hover效果写法:

div{
    width: 100px;
    height: 100px;
    background: skyblue;
    // &表示上面的div
    &:hover{
        background: gold;
    }
}

还有背景可以酱紫写:

div{
    // 设置个对照
    // background-image: url("");
    // background-repeat: no-repeat;
    // background-size: 50% 50%;
    // background-position: 0 0;
    background: {
        image: url("");
        repeat: no-repeat;
        size:50% 50%;
        position: 0 0;
    };
}

变量作用域问题

第一种情况:

$color:red;  //全局变量
.box{
    $color:blue;  //修改了全局变量的值
    color:$color;  //blue
    .item{
        color:$color;  //blue
    }
}

第二种情况:

.box{
    $color:red;  //局部变量
    color:$color; 
}
.inner-box{
    color:$color;  //报错,上面的局部变量不可用
}

第三种情况(较特殊):

.box{
    $color:red;  //局部变量
    color:$color;  //red
    .inner-box-1{
        $color:blue;  //可以理解为修改了上面的$color变量
        color:$color;  //blue
    }
    .inner-box-2{
        color:$color;  //blue
    }
}

第四种情况(与第三种情况形成对照):

$color:blue;  //全局变量
.box{
    color:$color;  //blue
    .inner-box-1{
        $color:red;
        color:$color;  //red
    }
    .inner-box-2{
        color:$color;  //blue
    }
}

混合

某些属性有时为了兼容性需要写多遍,可以使用SASS中的混合进行简化
定义混合

@mixin name {
    
}

使用混合

@include name

例:
一、

//定义混合
@mixin box-shadow($shadow) {
    -webkit-box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    -o-box-shadow: $shadow;
    -ms-box-shadow: $shadow;
    box-shadow: $shadow;
}
div{ 
    width: 200px;
    height: 200px;
    border: 1px solid red;
    @include box-shadow(-5px 0 5px orange)  //使用混合
}

二、传多个值
在这里插入图片描述
再来举个栗子:
html:

<button class="btn-success">成功</button>
<button class="btn-warning">警告</button>

sass:

@mixin btn-bg-color($btnClass,$bgColor) {
    .btn-#{$btnClass}{
        background-color: $bgColor;
    }
}

@include btn-bg-color("warning",green)

对应的css:

.btn-warning {
  background-color: green;
}

还是栗子:
让盒子旋转45deg,考虑兼容性

@mixin transform($deg:45deg) {
    -webkit-transform:rotate($deg);
    -moz-transform:rotate($deg);
    -o-transform:rotate($deg);
    -ms-transform:rotate($deg);
    transform:rotate($deg);
}
.box1{
    @include transform(); //默认45deg
}
.box2{
    @include transform(90deg);
}

继承(@extend)

例:

.box{
    width: 100px;
    height: 100px;
}
.box-1{
    @extend .box;  //继承.box中的样式
}

对应css:

.box, .box-1 {
  width: 100px;
  height: 100px;
}

换一种写法

//.box是一个box类
//%box不是类,仅封装了共有的样式
%box{
    width: 100px;
    height: 100px;
}
.box-1{
    @extend %box;  //继承.box中的样式
}

对应css:

.box-1 {
  width: 100px;
  height: 100px;
}

运算

$sidebarWidth:60px;
$contentWidth:200px;
.box{
    //加法
    // width: 10px + 10px; // 可以 20px
    // width: $sidebarWidth + $contentWidth; //可以 260px
    //除法(分情况较多)
    // width: 300px / 2; //不可以
    // width: (300px / 2); //可以
    // width: 300px / 2 + 1px; //可以
    // width: $sidebarWidth / 2; //可以
    // 除余
    // width: 50px % 3; //可以
}
//字符串拼接
p::before{
    // content: "Foo " + Bar; //可以  "Foo Bar"
    // content: Bar + " Foo";  //不可以  Bar Foo
}

流程控制

if…else

$textType:"large";

span{
    @if $textType == "large"{
        font-size: 40px;
    }@else if($textType == "middle"){
        font-size: 30px;
    }@else{
        font-size: 20px;
    }
}

for

@for $i from 1 through 3{
    .item-#{$i}{
        width: 5px * $i;
    }
}

对应css

.item-1 {
  width: 5px;
}

.item-2 {
  width: 10px;
}

.item-3 {
  width: 15px;
}

while

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

对应css

.item-6 {
  width: 30px;
}

.item-4 {
  width: 20px;
}

.item-2 {
  width: 10px;
}

数组

$list: dog, pig, cat;  //数组
//循环
@each $item in $list {
    .#{$item}-icon{
        width: 100px;
    }
}

对应css

.dog-icon {
  width: 100px;
}

.pig-icon {
  width: 100px;
}

.cat-icon {
  width: 100px;
}

再举个栗子

@each $animal, $color in (cat,orange),
                         (dog,black),
                         (pig,pink),{
                             .#{$animal}-icon{
                                 color: $color;
                                 background-image: url(./img/#{$animal}.png);
                             }
                         }

对应css

.cat-icon {
  color: orange;
  background-image: url(./img/cat.png);
}

.dog-icon {
  color: black;
  background-image: url(./img/dog.png);
}

.pig-icon {
  color: pink;
  background-image: url(./img/pig.png);
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值