首页 › 前端开发综合论坛 › Scss 基础

每天短信一点点 發表於 2025-9-30 20:36:00

Scss 基础

<h1 id="scss-转-css-在线转换">scss 转 css 在线转换</h1>
<p>https://33tool.com/scss_to_css/</p>
<h1 id="变量">变量</h1>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930173508765-737445945.png" alt="image" loading="lazy"></p>
<pre><code class="language-scss">$primary-color: #000;

.main1 {
background-color: $primary-color;
}
</code></pre>
<h1 id="一嵌套">一、嵌套</h1>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930174121736-1530511066.png" alt="image" loading="lazy"></p>
<h3 id="11-父选择器--referencing-parent-selectors-">1.1 父选择器 <code>&amp;</code> (Referencing Parent Selectors: <code>&amp;</code>)</h3>
<p>在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器，例如，当给某个元素设定 <code>hover</code> 样式时，或者当 <code>body</code> 元素有某个 classname 时，可以用 <code>&amp;</code> 代表嵌套规则外层的父选择器。</p>
<h4 id="出错">出错：</h4>
<pre><code class="language-scss">.main1 {
a {
    :hover {
      color: red;
    }
}
}
</code></pre>
<p>这样直接转换的时候生成的css</p>
<pre><code class="language-css">//这里a和:hover中间有空格
.main1 a :hover {
        color: red;
}
</code></pre>
<h4 id="修复下面使用">修复：下面使用<code>&amp;</code></h4>
<pre><code class="language-css">.main1 {
a {
    &amp;:hover {
      color: red;
    }
}
}
</code></pre>
<p>生成的CSS</p>
<pre><code class="language-css">.main1 a:hover {
        color: red;
}
</code></pre>
<h3 id="12-属性嵌套-nested-properties">1.2 属性嵌套 (Nested Properties)</h3>
<p>CSS</p>
<pre><code class="language-css">.funky {
        font: 20px/24px;
        font-family: fantasy;
        font-weight: bold;
}
</code></pre>
<p>scss</p>
<pre><code class="language-scss">.funky {
font: 20px/24px {
    family: fantasy;
    weight: bold;
}
}
</code></pre>
<h1 id="二混合指令mixin">二、混合指令（@mixin）</h1>
<p>混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 <code>.float-left</code>。混合指令可以包含所有的 CSS 规则，绝大部分 Sass 规则，甚至通过参数功能引入变量，输出多样化的样式。</p>
<pre><code class="language-scss">//@mixin 定义
@mixin large-text {
font: {
    family: Arial;
    size: 20px;
    weight: bold;
}
color: #ff0000;
}

//@include 使用
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
</code></pre>
<p>css</p>
<pre><code class="language-css">.page-title {
        font-family: Arial;
        font-size: 20px;
        font-weight: bold;
        color: #ff0000;
        padding: 4px;
        margin-top: 10px;
}
</code></pre>
<h3 id="21-给混合器传参">2.1 给混合器传参</h3>
<pre><code class="language-scss">@mixin link-colors($normal, $hover, $visited) {
color: $normal;

&amp;:hover {
    color: $hover;
}

&amp;:visited {
    color: $visited;
}
}

.main1 {
a {
   @include link-colors(blue, red, green);
}
}
</code></pre>
<p>生成</p>
<pre><code class="language-css">.main1 a {
        color: blue;
}
.main1 a:hover {
        color: red;
}
.main1 a:visited {
        color: green;
}
</code></pre>
<p>当你@include混合器时，有时候可能会很难区分每个参数是什么意思，参数之间是一个什么样的顺序。为了解决这个问题，<code>sass</code>允许通过语法<code>$name: value</code>的形式指定每个参数的值。这种形式的传参，参数顺序就不必再在乎了，只需要保证没有漏掉参数即可：</p>
<pre><code class="language-scss">a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
);
}
</code></pre>
<h1 id="三继承和扩展-extend">三、继承和扩展 （@extend）</h1>
<p>选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过<code>@extend</code>语法实现，如下代码:</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930181857438-613855458.png" alt="image" loading="lazy"></p>
<p>继承类下面的类，也会被继承</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930182204496-662495395.png" alt="image" loading="lazy"></p>
<h1 id="四数据类型">四、数据类型</h1>
<p>SassScript 支持 6 种主要的数据类型：</p>
<ul>
<li>数字，<code>1, 2, 13, 10px</code></li>
<li>字符串，有引号字符串与无引号字符串，<code>"foo", 'bar', baz</code></li>
<li>颜色，<code>blue, #04a3f9, rgba(255,0,0,0.5)</code></li>
<li>布尔型，<code>true, false</code></li>
<li>空值，<code>null</code></li>
<li>数组 (list)，用空格或逗号作分隔符，<code>1.5em 1em 0 2em, Helvetica, Arial, sans-serif</code></li>
<li>maps, 相当于 JavaScript 的 object，<code>(key1: value1, key2: value2)</code></li>
</ul>
<h3 id="插值语句--interpolation-">插值语句 <code>#{}</code> (Interpolation: <code>#{}</code>)</h3>
<p>过 <code>#{}</code> 插值语句可以在选择器或属性名中使用变量：</p>
<pre><code class="language-scss">$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
</code></pre>
<p>css</p>
<pre><code class="language-css">p.foo {
border-color: blue;
}
</code></pre>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930200753307-1661934630.png" alt="image" loading="lazy"></p>
<h1 id="五控制指令-control-directives">五、控制指令 (Control Directives)</h1>
<h3 id="if">@if</h3>
<p>当 <code>@if</code> 的表达式返回值不是 <code>false</code> 或者 <code>null</code> 时，条件成立，输出 <code>{}</code> 内的代码：</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930201306849-1207028973.png" alt="image" loading="lazy"></p>
<p><code>@if</code> 声明后面可以跟多个 <code>@else if</code> 声明，或者一个 <code>@else</code> 声明。如果 <code>@if</code> 声明失败，Sass 将逐条执行 <code>@else if</code> 声明，如果全部失败，最后执行 <code>@else</code> 声明，例如：</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930201424594-508815301.png" alt="image" loading="lazy"></p>
<h3 id="for">@for</h3>
<p><code>@for</code> 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：</p>
<p><code>@for $var from &lt;start&gt; through &lt;end&gt;</code>，或者 <code>@for $var from &lt;start&gt; to &lt;end&gt;</code></p>
<p>区别在于 <code>through</code> 与 <code>to</code> 的含义：<em>当使用 <code>through</code> 时，条件范围包含 <code>&lt;start&gt;</code> 与 <code>&lt;end&gt;</code> 的值，而使用 <code>to</code> 时条件范围只包含 <code>&lt;start&gt;</code> 的值不包含 <code>&lt;end&gt;</code> 的值</em>。</p>
<p>另外，<code>$var</code> 可以是任何变量，比如 <code>$i</code>；<code>&lt;start&gt;</code> 和 <code>&lt;end&gt;</code> 必须是整数值。</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930201654265-1810822770.png" alt="image" loading="lazy"></p>
<h3 id="each">@each</h3>
<p><code>@each</code> 指令的格式是 <code>$var in &lt;list&gt;</code>, <code>$var</code> 可以是任何变量名，比如 <code>$length</code> 或者 <code>$name</code>，而 <code>&lt;list&gt;</code> 是一连串的值，也就是值列表。</p>
<p><code>@each</code> 将变量 <code>$var</code> 作用于值列表中的每一个项目，然后输出结果，例如：</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930201900305-437038599.png" alt="image" loading="lazy"></p>
<h3 id="while">@while</h3>
<p><code>@while</code> 指令重复输出格式直到表达式返回结果为 <code>false</code>。这样可以实现比 <code>@for</code> 更复杂的循环，只是很少会用到。例如：</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930202032672-820017006.png" alt="image" loading="lazy"></p>
<h1 id="六函数指令-function-directives">六、函数指令 (Function Directives)</h1>
<p>@function 与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 <code>@return</code> 输出结果。</p>
<p><img src="https://img2024.cnblogs.com/blog/196558/202509/196558-20250930202155329-1558814760.png" alt="image" loading="lazy"></p>
<h1 id="七dart-sass-内置函数">七、Dart Sass 内置函数</h1>
<p>https://sass-lang.com/documentation/modules/</p>
<p>从 Dart Sass 3.0.0 开始，全局内置函数（如 <code>map-get</code>、<code>lighten</code> 等）将被移除，必须通过模块化语法 <code>@use</code> 导入 <code>sass:xxx</code> 模块后才能使用。以下是基于新规范的<strong>分类整理</strong>，包含各模块的常用函数及使用示例：</p>
<h3 id="一核心模块sasscore">一、核心模块（<code>sass:core</code>）</h3>
<p>包含最基础的工具函数（无需显式导入，部分函数默认可用，但建议显式导入）。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>作用</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>if($condition, $if-true, $if-false)</code></td>
<td>条件判断</td>
<td><code>@use "sass:core"; core.if(true, 10, 20) → 10</code></td>
</tr>
<tr>
<td><code>feature-exists($feature)</code></td>
<td>检查CSS特性支持</td>
<td><code>core.feature-exists(flexbox) → true</code></td>
</tr>
</tbody>
</table>
<h3 id="二列表模块sasslist">二、列表模块（<code>sass:list</code>）</h3>
<p>处理列表（有序值集合）的函数，需通过 <code>@use "sass:list"</code> 导入。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>作用</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>list.length($list)</code></td>
<td>获取列表长度</td>
<td><code>list.length(10px 20px) → 2</code></td>
</tr>
<tr>
<td><code>list.nth($list, $index)</code></td>
<td>获取指定索引值（索引从1开始）</td>
<td><code>list.nth(10px 20px, 2) → 20px</code></td>
</tr>
<tr>
<td><code>list.append($list, $value)</code></td>
<td>向列表添加值</td>
<td><code>list.append(10px, 20px) → 10px 20px</code></td>
</tr>
<tr>
<td><code>list.index($list, $value)</code></td>
<td>查找值的索引</td>
<td><code>list.index(10px 20px, 20px) → 2</code></td>
</tr>
</tbody>
</table>
<p><strong>使用示例</strong>：</p>
<pre><code class="language-scss">@use "sass:list";

$sizes: 10px 20px 30px;
@debug list.length($sizes); // 输出 3
@debug list.nth($sizes, 2); // 输出 20px
</code></pre>
<h3 id="三映射模块sassmap">三、映射模块（<code>sass:map</code>）</h3>
<p>处理键值对映射的函数，需通过 <code>@use "sass:map"</code> 导入。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>作用</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>map.get($map, $key)</code></td>
<td>获取映射中键的值</td>
<td><code>map.get(($a: 1), $a) → 1</code></td>
</tr>
<tr>
<td><code>map.keys($map)</code></td>
<td>返回所有键的列表</td>
<td><code>map.keys(($a:1, $b:2)) → ($a, $b)</code></td>
</tr>
<tr>
<td><code>map.has-key($map, $key)</code></td>
<td>判断是否包含键</td>
<td><code>map.has-key(($a:1), $a) → true</code></td>
</tr>
<tr>
<td><code>map.merge($map1, $map2)</code></td>
<td>合并两个映射</td>
<td><code>map.merge(($a:1), ($b:2)) → ($a:1, $b:2)</code></td>
</tr>
</tbody>
</table>
<p><strong>使用示例</strong>：</p>
<pre><code class="language-scss">@use "sass:map";

$theme: (primary: #42b983, secondary: #35495e);
@debug map.get($theme, primary); // 输出 #42b983
@debug map.keys($theme); // 输出 (primary, secondary)
</code></pre>
<h3 id="四颜色模块sasscolor">四、颜色模块（<code>sass:color</code>）</h3>
<p>处理颜色的函数，需通过 <code>@use "sass:color"</code> 导入。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>作用</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>color.lighten($color, $amount)</code></td>
<td>提亮颜色</td>
<td><code>color.lighten(#ff0000, 20%) → 亮红色</code></td>
</tr>
<tr>
<td><code>color.darken($color, $amount)</code></td>
<td>加深颜色</td>
<td><code>color.darken(#ff0000, 20%) → 暗红色</code></td>
</tr>
<tr>
<td><code>color.rgba($color, $alpha)</code></td>
<td>调整透明度</td>
<td><code>color.rgba(#ff0000, 0.5) → 半透明红</code></td>
</tr>
<tr>
<td><code>color.red($color)</code></td>
<td>提取红色通道值</td>
<td><code>color.red(#ff0000) → 255</code></td>
</tr>
</tbody>
</table>
<p><strong>使用示例</strong>：</p>
<pre><code class="language-scss">@use "sass:color";

$primary: #42b983;
@debug color.lighten($primary, 10%); // 输出 #5fca99
@debug color.rgba($primary, 0.8); // 输出 rgba(66, 185, 131, 0.8)
</code></pre>
<h3 id="五数字模块sassmath">五、数字模块（<code>sass:math</code>）</h3>
<p>处理数值计算的函数，需通过 <code>@use "sass:math"</code> 导入（注意：<code>math</code> 模块需显式启用 <code>precision</code> 等配置）。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>作用</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>math.abs($number)</code></td>
<td>取绝对值</td>
<td><code>math.abs(-10) → 10</code></td>
</tr>
<tr>
<td><code>math.ceil($number)</code></td>
<td>向上取整</td>
<td><code>math.ceil(3.2) → 4</code></td>
</tr>
<tr>
<td><code>math.round($number)</code></td>
<td>四舍五入</td>
<td><code>math.round(3.5) → 4</code></td>
</tr>
<tr>
<td><code>math.percentage($number)</code></td>
<td>转为百分比</td>
<td><code>math.percentage(0.5) → 50%</code></td>
</tr>
</tbody>
</table>
<p><strong>使用示例</strong>：</p>
<pre><code class="language-scss">@use "sass:math";

$width: 150px;
@debug math.div($width, 2); // 输出 75px（替代 / 运算）
@debug math.percentage(0.3); // 输出 30%
</code></pre>
<h3 id="六字符串模块sassstring">六、字符串模块（<code>sass:string</code>）</h3>
<p>处理字符串的函数，需通过 <code>@use "sass:string"</code> 导入。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>作用</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>string.length($string)</code></td>
<td>字符串长度</td>
<td><code>string.length("hello") → 5</code></td>
</tr>
<tr>
<td><code>string.index($string, $substring)</code></td>
<td>查找子串位置</td>
<td><code>string.index("hello", "ll") → 3</code></td>
</tr>
<tr>
<td><code>string.to-upper-case($string)</code></td>
<td>转为大写</td>
<td><code>string.to-upper-case("hello") → "HELLO"</code></td>
</tr>
</tbody>
</table>
<p><strong>使用示例</strong>：</p>
<pre><code class="language-scss">@use "sass:string";

$className: "active";
@debug string.length($className); // 输出 6
@debug string.to-upper-case($className); // 输出 "ACTIVE"
</code></pre>
<h3 id="七选择器模块sassselector">七、选择器模块（<code>sass:selector</code>）</h3>
<p>处理 CSS 选择器的函数，需通过 <code>@use "sass:selector"</code> 导入。</p>
<table>
<thead>
<tr>
<th>函数</th>
<th>作用</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>selector.nest($selectors...)</code></td>
<td>嵌套选择器</td>
<td><code>selector.nest(".a", "&amp;:hover") → ".a:hover"</code></td>
</tr>
<tr>
<td><code>selector.append($selectors...)</code></td>
<td>拼接选择器</td>
<td><code>selector.append(".a", ".b") → ".a.b"</code></td>
</tr>
</tbody>
</table>
<p><strong>使用示例</strong>：</p>
<pre><code class="language-scss">@use "sass:selector";

@debug selector.nest(".parent", ".child") → ".parent .child";
@debug selector.append(".btn", "--primary") → ".btn--primary";
</code></pre>
<h3 id="模块化语法注意事项">模块化语法注意事项</h3>
<ol>
<li><strong>导入方式</strong>：通过 <code>@use "sass:模块名"</code> 导入（如 <code>@use "sass:color"</code>），函数需通过 <code>模块名.函数名</code> 调用（如 <code>color.lighten(...)</code>）。</li>
<li><strong>别名设置</strong>：可通过 <code>@use "sass:color" as c;</code> 简化调用（如 <code>c.lighten(...)</code>）。</li>
<li><strong>兼容性</strong>：Dart Sass 3.0.0+ 强制要求模块化导入，旧版全局函数将失效，建议尽快迁移。</li>
</ol>
<p>完整的模块及函数列表可参考官方文档：Sass 模块化函数。</p>
<h1 id="vue-中安装scss">vue 中安装scss</h1>
<pre><code>npm install sass --save-dev
</code></pre>
<h1 id="vue-中-vite全局导入">vue 中 vite全局导入</h1>
<pre class="language-ts" data-lines-highlight=""><code class="language-ts" data-lines-highlight="">import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
plugins: ,
resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
},
css: {
    preprocessorOptions: {
      scss: {
      additionalData: `@import "@/assets/style.scss";`,
      },
    },
},
})</code></pre><br><br>
来源：https://www.cnblogs.com/tangge/p/19121745

查看完整版本: Scss 基础