css预编译器—sass

最新推荐文章于 2024-05-18 09:58:31 发布

明哥前端

最新推荐文章于 2024-05-18 09:58:31 发布

阅读量588

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签：前端 css css3 sass

本文链接：https://blog.youkuaiyun.com/weixin_55876727/article/details/121519899

css 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Sass的注释类型、变量定义、混入（mixin）、样式继承、条件语句（if/else）、循环（@for）以及函数的使用。通过实例展示了如何在实际开发中应用Sass提升CSS的效率和可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、注释

sass 中的注释有三种

// 是单行注释

/**/多行注释

/*!*/强注释强注释编译之后不会消失

二、定义变量的方法以$开头定义名字:值；

$my_color:red;

调用是直接使用$名字
* {
    margin: 0;
    padding: 0;
    background-color: $my_color;
}

三、混入sass代码块mixin

//定义sass样式代码块
@mixin my_colName($border,$bac) {
    border: 1px solid $border;
    background-color: $bac;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    //调用样式代码块进行混入
    @include my_colName(red,yellow)
}

四、sass样式继承 @extend .name

.name{
    color: #ccc;
}

li {
    @extend .name
}

五、if else 的使用

$my-flag:false;

body {
    @if $my-flag {

        background-color: red;
    }

    @else {
        background-color: yellow;
    }
}

六、@for $i from 1 to 变量名

@for $i from 1 to 5 {
    .a#{$i}{
        width: 100px;
        height: 100px;
        margin:  $i + px;
        background-color: red;
    }
}

//@while 条件 {}

//$i相当于js中for 的 i  在类名中使用#{名字}来拼接  在属性中直接使用$i加上相应的单位

七、sass函数

@function Fn($num){
    @return $num+
}

*{
    //调用方式
     Fn（）   
}

七、sass内置函数

字符串
转为大写str-upper-case（）
转为小写str-lower-case（）
字符串长度str-length（）
查询字符下标str-index（）

控制颜色明度
lighten（颜色，亮度）
darken（颜色，亮度）
亮度以百分比的形式

与或非and or ，not（）