登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 资源区 › 代码 ›Scss 基础

Scss 基础

裸历 4 天前
scss 转 css 在线转换

https://33tool.com/scss_to_css/
变量

1.png
  1. $primary-color: #000;
  3. .main1 {
  4.   background-color: $primary-color;
  5. }
复制代码
一、嵌套

2.png

1.1 父选择器 & (Referencing Parent Selectors: &)

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 hover 样式时，或者当 body 元素有某个 classname 时，可以用 & 代表嵌套规则外层的父选择器。
出错：
  1. .main1 {
  2.   a {
  3.     :hover {
  4.       color: red;
  5.     }
  6.   }
  7. }
复制代码
这样直接转换的时候生成的css
  1. //这里a和:hover中间有空格
  2. .main1 a :hover {
  3.         color: red;
  4. }
复制代码
修复：下面使用&
  1. .main1 {
  2.   a {
  3.     &:hover {
  4.       color: red;
  5.     }
  6.   }
  7. }
复制代码
生成的CSS
  1. .main1 a:hover {
  2.         color: red;
  3. }
复制代码
1.2 属性嵌套 (Nested Properties)

CSS
  1. .funky {
  2.         font: 20px/24px;
  3.         font-family: fantasy;
  4.         font-weight: bold;
  5. }
复制代码
scss
  1. .funky {
  2.   font: 20px/24px {
  3.     family: fantasy;
  4.     weight: bold;
  5.   }
  6. }
复制代码
二、混合指令（@mixin）

混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。
  1. //@mixin 定义
  2. @mixin large-text {
  3.   font: {
  4.     family: Arial;
  5.     size: 20px;
  6.     weight: bold;
  7.   }
  8.   color: #ff0000;
  9. }
  11. //@include 使用
  12. .page-title {
  13.   @include large-text;
  14.   padding: 4px;
  15.   margin-top: 10px;
  16. }
复制代码
css
  1. .page-title {
  2.         font-family: Arial;
  3.         font-size: 20px;
  4.         font-weight: bold;
  5.         color: #ff0000;
  6.         padding: 4px;
  7.         margin-top: 10px;
  8. }
复制代码
2.1 给混合器传参
  1. @mixin link-colors($normal, $hover, $visited) {
  2.   color: $normal;
  4.   &:hover {
  5.     color: $hover;
  6.   }
  8.   &:visited {
  9.     color: $visited;
  10.   }
  11. }
  13. .main1 {
  14.   a {
  15.      @include link-colors(blue, red, green);
  16.   }
  17. }
复制代码
生成
  1. .main1 a {        color: blue;}.main1 a:hover {
  2.         color: red;
  3. }.main1 a:visited {        color: green;}
复制代码
当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，sass允许通过语法$name: value的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：
  1. a {
  2.     @include link-colors(
  3.       $normal: blue,
  4.       $visited: green,
  5.       $hover: red
  6.   );
  7. }
复制代码
三、继承和扩展 （@extend）

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:
3.png

继承类下面的类，也会被继承
4.png

四、数据类型

SassScript 支持 6 种主要的数据类型：

  • 数字，1, 2, 13, 10px
  • 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
  • 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型，true, false
  • 空值，null
  • 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)
插值语句 #{} (Interpolation: #{})

过 #{} 插值语句可以在选择器或属性名中使用变量：
  1. $name: foo;
  2. $attr: border;
  3. p.#{$name} {
  4.   #{$attr}-color: blue;
  5. }
复制代码
css
  1. p.foo {
  2.   border-color: blue;
  3. }
复制代码
5.png

五、控制指令 (Control Directives)

@if

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：
6.png

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：
7.png

@for

@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：
@for $var from  through ，或者 @for $var from  to
区别在于 through 与 to 的含义：当使用 through 时，条件范围包含  与  的值，而使用 to 时条件范围只包含  的值不包含  的值。
另外，$var 可以是任何变量，比如 $i； 和  必须是整数值。
8.png

@each

@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而  是一连串的值，也就是值列表。
@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：
9.png

@while

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：
10.png

六、函数指令 (Function Directives)

@function 与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。
11.png

七、Dart Sass 内置函数

https://sass-lang.com/documentation/modules/
从 Dart Sass 3.0.0 开始，全局内置函数（如 map-get、lighten 等）将被移除，必须通过模块化语法 @use 导入 sass:xxx 模块后才能使用。以下是基于新规范的分类整理，包含各模块的常用函数及使用示例：
一、核心模块（sass:core）

包含最基础的工具函数（无需显式导入，部分函数默认可用，但建议显式导入）。
函数作用示例if($condition, $if-true, $if-false)条件判断@use "sass:core"; core.if(true, 10, 20) → 10feature-exists($feature)检查CSS特性支持core.feature-exists(flexbox) → true二、列表模块（sass:list）

处理列表（有序值集合）的函数，需通过 @use "sass:list" 导入。
函数作用示例list.length($list)获取列表长度list.length(10px 20px) → 2list.nth($list, $index)获取指定索引值（索引从1开始）list.nth(10px 20px, 2) → 20pxlist.append($list, $value)向列表添加值list.append(10px, 20px) → 10px 20pxlist.index($list, $value)查找值的索引list.index(10px 20px, 20px) → 2使用示例：
  1. @use "sass:list";
  3. $sizes: 10px 20px 30px;
  4. @debug list.length($sizes); // 输出 3
  5. @debug list.nth($sizes, 2); // 输出 20px
复制代码
三、映射模块（sass:map）

处理键值对映射的函数，需通过 @use "sass:map" 导入。
函数作用示例map.get($map, $key)获取映射中键的值map.get(($a: 1), $a) → 1map.keys($map)返回所有键的列表map.keys(($a:1, $b:2)) → ($a, $b)map.has-key($map, $key)判断是否包含键map.has-key(($a:1), $a) → truemap.merge($map1, $map2)合并两个映射map.merge(($a:1), ($b:2)) → ($a:1, $b:2)使用示例：
  1. @use "sass:map";
  3. $theme: (primary: #42b983, secondary: #35495e);
  4. @debug map.get($theme, primary); // 输出 #42b983
  5. @debug map.keys($theme); // 输出 (primary, secondary)
复制代码
四、颜色模块（sass:color）

处理颜色的函数，需通过 @use "sass:color" 导入。
函数作用示例color.lighten($color, $amount)提亮颜色color.lighten(#ff0000, 20%) → 亮红色color.darken($color, $amount)加深颜色color.darken(#ff0000, 20%) → 暗红色color.rgba($color, $alpha)调整透明度color.rgba(#ff0000, 0.5) → 半透明红color.red($color)提取红色通道值color.red(#ff0000) → 255使用示例：
  1. @use "sass:color";
  3. $primary: #42b983;
  4. @debug color.lighten($primary, 10%); // 输出 #5fca99
  5. @debug color.rgba($primary, 0.8); // 输出 rgba(66, 185, 131, 0.8)
复制代码
五、数字模块（sass:math）

处理数值计算的函数，需通过 @use "sass:math" 导入（注意：math 模块需显式启用 precision 等配置）。
函数作用示例math.abs($number)取绝对值math.abs(-10) → 10math.ceil($number)向上取整math.ceil(3.2) → 4math.round($number)四舍五入math.round(3.5) → 4math.percentage($number)转为百分比math.percentage(0.5) → 50%使用示例：
  1. @use "sass:math";
  3. $width: 150px;
  4. @debug math.div($width, 2); // 输出 75px（替代 / 运算）
  5. @debug math.percentage(0.3); // 输出 30%
复制代码
六、字符串模块（sass:string）

处理字符串的函数，需通过 @use "sass:string" 导入。
函数作用示例string.length($string)字符串长度string.length("hello") → 5string.index($string, $substring)查找子串位置string.index("hello", "ll") → 3string.to-upper-case($string)转为大写string.to-upper-case("hello") → "HELLO"使用示例：
  1. @use "sass:string";
  3. $className: "active";
  4. @debug string.length($className); // 输出 6
  5. @debug string.to-upper-case($className); // 输出 "ACTIVE"
复制代码
七、选择器模块（sass:selector）

处理 CSS 选择器的函数，需通过 @use "sass:selector" 导入。
函数作用示例selector.nest($selectors...)嵌套选择器selector.nest(".a", "&:hover") → ".a:hover"selector.append($selectors...)拼接选择器selector.append(".a", ".b") → ".a.b"使用示例：
  1. @use "sass:selector";
  3. @debug selector.nest(".parent", ".child") → ".parent .child";
  4. @debug selector.append(".btn", "--primary") → ".btn--primary";
复制代码
模块化语法注意事项


  • 导入方式：通过 @use "sass:模块名" 导入（如 @use "sass:color"），函数需通过 模块名.函数名 调用（如 color.lighten(...)）。
  • 别名设置：可通过 @use "sass:color" as c; 简化调用（如 c.lighten(...)）。
  • 兼容性：Dart Sass 3.0.0+ 强制要求模块化导入，旧版全局函数将失效，建议尽快迁移。
完整的模块及函数列表可参考官方文档：Sass 模块化函数。
vue 中安装scss
  1. npm install sass --save-dev
复制代码
vue 中 vite全局导入
  1. import { fileURLToPath, URL } from 'node:url'
  3. import { defineConfig } from 'vite'
  4. import vue from '@vitejs/plugin-vue'
  5. import vueDevTools from 'vite-plugin-vue-devtools'
  7. // https://vite.dev/config/
  8. export default defineConfig({
  9.   plugins: [vue(), vueDevTools()],
  10.   resolve: {
  11.     alias: {
  12.       '@': fileURLToPath(new URL('./src', import.meta.url)),
  13.     },
  14.   },
  15.   css: {
  16.     preprocessorOptions: {
  17.       scss: {
  18.         additionalData: `@import "@/assets/style.scss";`,
  19.       },
  20.     },
  21.   },
  22. })
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
裸历
4 天前

0

粉丝关注

26

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫