SASS与SCSS进阶教程-优快云博客

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

本文深入讲解SASS与SCSS预处理器的基础及高级特性，包括变量、数据类型、运算符、流程控制、函数等核心概念，以及混合宏、占位符和响应式设计的应用技巧。

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

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

五、响应式

sass安装使用

注： 1、用submit编辑器会有问题，用webstorm编辑器

2、所有的css代码都是通过后缀为scss的文件生成的

     3. //引入混合宏      @import "mixins";

Index.html index.scss mixins.scss是自己建的

Index.css是通过监测生成的

一、css预处理器 SASS

新建 index.scss

打开Cmd

安装 cnpm install – g node-sass
查看是否安装成功 node-sass –v
监测某个css文件

node-sass -w index.scss index.css --output-style expanded

监测完成之后再index.scss中写代码会在index.css中生成相应的代码

二、预处理器 scss语言

1.变量

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

2)变量使用

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

{}里面写的是样式表

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

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

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

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

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

5局部变量

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

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

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

6sass中的变量，控制结构….不会出现在最终生成的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从小屏到大屏

Scss语法

响应式基本原理

利用css3 transition制作动画