sass语法

最新推荐文章于 2025-04-07 14:30:14 发布

sunshinefcc

最新推荐文章于 2025-04-07 14:30:14 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： sass

本文链接：https://blog.youkuaiyun.com/github_37213295/article/details/80051517

css 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了Sass语言的核心特性，包括变量、数据类型、运算符、流程控制、函数以及语言独有的特点。通过实例展示了如何使用变量、控制流和函数进行更高效的CSS编写，并介绍了混合宏、占位符%在响应式设计中的应用。

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

三、占位符 % 优点:高效缺点:不能接受参数

四、响应式

一、css预处理器 scss语言

1.变量

1)变量定义 $theme-color:#000;

2)变量使用

(1)变量可直接使用在样式表的值部分

{}里面写的是样式表

(2)如果要使用在选择器或者属性部分，需要特定语法插值的支持

(3)#{ }插值的用法（重点）

(4)变量的默认值相当于把这个值优先级设到最低

（无论在页面的任何位置重新设置，值都会被覆盖）

$theme-color:#000 !default;（默认值）

(5)局部变量

Sass中变量的作用域是块级作用域

（一对花括号就是一个块）

变量不会输出到css最终生成的样式中

(6)sass中的变量，控制结构….不会出现在最终生成的css中

2.数据类型

(1)数字:

(2)字符串：有引号字符串或无引号字符串

(3)颜色： blue是颜色（不是字符串）

(4)布尔型：

(5)空值：

(6)值列表：用空格或者逗号分开

3.运算符

+ - * / (> < != == %)

4.流程控制

(1)分支结构if

(2)循环结构for each（常用each）

5.函数

(1)自定义函数

@function add($a,$b){

@return $a+$b;

}

(2)内置函数（$debug相当于console.log）

                            $size:20px,30px,80px;
                            $class-name:"header";
                            $bg-color:blue;
                            $device-list:"pc","ipad","phone";

                            $device-map:(
                              "pc":20px,
                              "pad":30px,
                              "phone":80px
                            );

                            1.列表中的三个函数

                                @debug length($device-list);
                                @debug nth($device-list,2);
                                @debug index($device-list,"phone");

                            2.map中的两个函数(取值取表)

                                @debug map_get($device-map,"phone");
                                @debug map_keys($device-map);
                                @debug map-values($device-map);

                            3.流程控制循环for each(常用each)

                                @for $i from 1 through length($device-list){
                                      @if($i<2){
                                        .#{$class-name}-#{nth($device-list,$i)}{
                                          width: nth($size,$i);
                                                }
                                          }
                                }

                                        @each $v in map_keys($device-map){
                                          @debug $v;
                                          @debug map-get($device-map,$v);
                                        }

                                           @each $v in map_keys($device-map){
                                              .#{$class-name}-#{$v}{
                                                    width: map_get($device-map,$v)/2;
                                                  }
                                            }

6.语言本身独有的特性

二、混合宏

三、占位符 % 优点:高效缺点:不能接受参数

四、响应式

@media screen and (max-width:800px){
  body{
    background: #d7de4a;
  }
}
@media screen and (min-width:800px){
  body{
    background: #2fb9c2;
  }
}
@media screen and (min-width:1000px){
  body{
    background: #bf76ff;
  }
}

(1)从大屏到小屏

(2)从小屏到大屏