记录总结下sass在开发过程中常用的语法
一、变量（Variables）
作用 ：存储复用值（颜色、字体、尺寸等），便于统一修改。
语法 ：使用 $ 定义变量，支持全局 / 局部作用域。
scss
css
// 定义变量
$primary-color: #3498db; // 全局变量
$font-base: 'Arial', sans-serif;
$border-radius: 4px;
// 使用变量
.button {
background: $primary-color;
font-family: $font-base;
border-radius: $border-radius;
}
// 局部变量（仅在当前块内生效）
.card {
$card-padding: 16px; // 局部变量
padding: $card-padding;
}
// 全局变量修改（局部作用域内修改全局变量）
.dark-theme {
$primary-color: #2c3e50 !global; // !global 声明为全局修改
background: $primary-color;
}
// 默认变量（若变量未定义则使用默认值）
$secondary-color: #95a5a6 !default; // 若外部已定义，则不生效二、嵌套规则（Nesting）
作用 ：按 HTML 结构嵌套 CSS 选择器，增强可读性。
注意：避免嵌套过深（建议不超过 3 层），否则会生成冗余 CSS。
1. 选择器嵌套
scss
css
// HTML结构：<nav><ul><li><a></a></li></ul></nav>
nav {
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
text-decoration: none;
color: $primary-color;
// & 代表父选择器（此处等价于 nav a）
&:hover {
color: darken($primary-color, 10%); // 内置颜色函数
}
}
}2. 属性嵌套（针对带前缀的属性）
scss
css
.box {
// 等价于：font-size: 16px; font-weight: bold;
font: {
size: 16px;
weight: bold;
}
// 等价于：border-width: 1px; border-style: solid;
border: {
width: 1px;
style: solid;
}
}三、混合宏（Mixin）
作用 ：封装可复用的样式片段，支持参数传递，类似 "函数"。
语法 ：@mixin 定义，@include 调用。
1. 基础用法
scss
less
// 定义无参数混合宏
@mixin clear-fix {
&::after {
content: '';
display: table;
clear: both;
}
}
// 使用混合宏
.container {
@include clear-fix; // 插入clear-fix的样式
}2. 带参数的混合宏
scss
less
// 定义带参数的混合宏（支持默认值）
@mixin button-style($bg: $primary-color, $color: white, $padding: 8px 16px) {
background: $bg;
color: $color;
padding: $padding;
border: none;
border-radius: $border-radius;
cursor: pointer;
}
// 使用混合宏（传递参数）
.primary-btn {
@include button-style; // 使用默认值
}
.danger-btn {
@include button-style(#e74c3c, white, 10px 20px); // 自定义参数
}四、继承（Extend）
作用 ：让一个选择器继承另一个选择器的样式，生成更简洁的 CSS（合并相同样式）。
语法 ：@extend 目标选择器。
scss
css
// 基础样式
.base-btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
}
// 继承基础样式并扩展
.success-btn {
@extend .base-btn; // 继承.base-btn的所有样式
background: #2ecc71;
color: white;
}
.warning-btn {
@extend .base-btn;
background: #f39c12;
color: white;
}编译后 CSS（合并相同样式）：
css
css
.base-btn, .success-btn, .warning-btn {
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
}
.success-btn {
background: #2ecc71;
color: white;
}
.warning-btn {
background: #f39c12;
color: white;
}五、函数（Function）
作用 ：自定义逻辑处理（如计算、颜色转换），返回值可用于样式中。
语法 ：@function 定义，@return 返回结果。
scss
less
// 自定义函数：将px转换为rem（假设根字体为16px）
@function rem($px) {
@return $px / 16px * 1rem; // 运算支持单位计算
}
// 使用函数
.title {
font-size: rem(24px); // 等价于 1.5rem
}
.box {
margin: rem(16px); // 等价于 1rem
}
// 内置函数（颜色处理）
.demo {
color: lighten($primary-color, 10%); // 变亮10%
background: darken(#f1c40f, 5%); // 变暗5%
border-color: rgba($primary-color, 0.8); // 透明化
}六、导入（Import）
作用 ：拆分样式文件（模块化），通过 @import 合并，避免 CSS 多文件请求。
注意：
-
导入的文件后缀
.scss可省略； -
命名以
_开头的文件（如_variables.scss）为 "部分文件"，不会被单独编译，需通过@import引入。
scss
scss
// 目录结构
// styles/
// _variables.scss
// _mixins.scss
// main.scss
// main.scss 中导入其他文件
@import 'variables'; // 导入 _variables.scss
@import 'mixins'; // 导入 _mixins.scss
// 使用导入的变量和混合宏
body {
color: $text-color; // 来自 _variables.scss
@include reset-margin; // 来自 _mixins.scss
}七、运算（Operations）
作用：支持数字、颜色、字符串的运算，增强动态性。
scss
php
// 数字运算（支持 +、-、*、/、%）
.container {
width: 100% - 20px; // 计算宽度
height: 200px / 2; // 100px
padding: 10px + 5px; // 15px
}
// 颜色运算（按RGB通道计算）
$color1: #112233;
$color2: #445566;
.demo {
background: $color1 + $color2; // #557799（11+44=55, 22+55=77, 33+66=99）
border-color: $color2 - #111111; // #334455
}
// 字符串运算（+ 拼接）
$prefix: 'btn-';
.#{$prefix}primary { // 插值表达式，见下文
/* 样式 */
}注意 ：除法需用括号包裹（避免与 CSS 语法冲突）：
width: (100px / 2); // 正确
width: 100px / 2; // 会被编译为 100px / 2（无效 CSS）
八、条件语句（@if / @else）
作用：根据条件生成不同样式，类似编程语言的分支逻辑。
scss
less
// 定义主题变量
$theme: dark;
.body {
@if $theme == light {
background: white;
color: #333;
} @else if $theme == dark {
background: #333;
color: white;
} @else {
background: #f5f5f5;
color: #555;
}
}
// 带参数的条件判断
@mixin text-size($size) {
@if $size == small {
font-size: 12px;
} @else if $size == medium {
font-size: 16px;
} @else {
font-size: 20px;
}
}
.small-text {
@include text-size(small);
}九、循环（@for / @each / @while）
作用：批量生成重复样式（如网格布局、多个相似类名）。
1. @for 循环（遍历范围）
scss
sql
// 语法：@for $var from <start> through <end>（包含end）
// 或 @for $var from <start> to <end>（不包含end）
// 生成.col-1 到 .col-3 的样式
@for $i from 1 through 3 {
.col-#{$i} { // #{} 为插值表达式
width: 100% / 3 * $i;
}
}2. @each 循环（遍历列表 / 映射）
scss
swift
// 遍历列表
$colors: primary #3498db, secondary #95a5a6, danger #e74c3c;
@each $name, $color in $colors {
.btn-#{$name} {
background: $color;
}
}
// 遍历映射（键值对）
$breakpoints: (
sm: 576px,
md: 768px,
lg: 992px
);
@each $name, $value in $breakpoints {
@media (min-width: $value) {
.container-#{$name} {
max-width: $value;
}
}
}3. @while 循环（条件循环）
scss
css
$i: 1;
@while $i <= 3 {
.item-#{$i} {
margin-left: 10px * $i;
}
$i: $i + 1; // 手动更新计数器
}十、插值表达式（Interpolation）
作用 ：在选择器、属性名、字符串中插入变量，动态生成内容。
语法 ：#{$变量名}
scss
php
$prefix: 'menu';
// 动态生成选择器
.#{$prefix}-item {
padding: 8px;
}
.#{$prefix}-active {
color: $primary-color;
}
// 动态生成属性名
$prop: 'border';
.box {
#{$prop}-width: 1px;
#{$prop}-style: solid;
}
// 动态生成字符串
$version: 'v1';
.comment-#{$version} {
/* 样式 */
}十一、注释（Comments）
Sass 支持两种注释：
-
单行注释
// 注释内容：不会被编译到 CSS 中； -
多行注释
/* 注释内容 */：会被编译到 CSS 中（压缩模式除外）。
scss
arduino
// 这是单行注释（编译后不会显示）
/*
这是多行注释
编译后会保留在CSS中
*/
.body {
background: white;
}十二、Sass vs SCSS
Sass 有两种语法：
-
Sass（缩进语法） ：无大括号
{}和分号;，依赖缩进区分层级（类似 Python）； -
SCSS（Sassy CSS） ：语法接近 CSS，保留大括号和分号，是目前主流用法。
sass
less
// Sass语法（缩进式）
$primary-color: #3498db
body
background: $primary-color
color: whitescss
css
// SCSS语法（推荐）
$primary-color: #3498db;
body {
background: $primary-color;
color: white;
}