css/scss(at-rules)基础使用(basic use)
css
1.媒体查询（media search）
根据设备特性（如屏幕宽度）应用不同样式：
apply different styles depending on device characteristics,such as screen width
@media (max-width: 600px) {
.box { background: red; }
} 2.@keyframes（动画关键帧）(Animation key frame)
定义 CSS 动画的关键帧：
difine key frame of css animation
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
} 3.@font-face（自定义字体）(custom font)
引入自定义字体文件：
introduce define font file
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
} 4.@supports（特性检测）(feature detection)
根据浏览器支持的特性应用样式：
apply styles based on features supported by your brower
@supports (display: grid) {
.container { display: grid; }
} 5.@import（导入外部 CSS）(inporting external css file)
@import url('reset.css');scss
1. 变量（Variables）
作用：用
$定义变量，存储颜色、字体等样式值Function:use $ define variables,store color、font style value and so on
$primary-color: #3498db;
.button { background: $primary-color; }2.嵌套（Nesting）
作用：嵌套选择器，反映 HTML 的层级关系。
Function: nest selector,reflect html's hierarchical relationship
.nav {
ul { margin: 0; }
li { display: inline-block; }
a {
&:hover { color: red; } // 嵌套伪类
}
}3. 混入（Mixins）
作用：通过
@include复用样式块。Function: reuse style pieces by '@include'
@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box { @include flex-center; }4. 继承（Inheritance）
作用：通过
@extend继承样式，减少重复代码。Function: By @extend extend the style,reduce duplicate code.
.alert { padding: 15px; }
.error {
@extend .alert;
background: red;
}5. 函数（Functions）
作用：内置函数（如
darken()、lighten()）或自定义函数处理样式值。Function: Internal functions pr custom functions handle style values.
$base-color: #333;
.text { color: darken($base-color, 10%); }6. 条件语句（Control Directives）
作用：通过
@if、@else if、@else实现条件逻辑。Function: Conditional logic is implemented by @if, @else if, @else.
@mixin theme($color) {
@if $color == light { background: white; }
@else { background: dark; }
}7. 循环（Loops）
作用：通过
@for、@each、@while实现循环。Function: implement loop by
@for、@each、@while
@each $animal in (cat, dog, bird) {
.#{$animal}-icon { background: url(#{$animal}.png); }
}8. 模块化（Modules）
作用：通过
@use和@forward管理样式依赖Function: manage style dependencies through
@use and@forward
// utils/_variables.scss
$spacing: 10px;
// main.scss
@use 'utils/variables' as *;
.margin { margin: $spacing; }9. 占位符（Placeholders）
作用：定义
%placeholder选择器，仅在通过@extend使用时生效。Function: define
%placeholder selector,only effective when this is through useing @extend
%clearfix {
&::after {
content: '';
display: table;
clear: both;
}
}
.container { @extend %clearfix; }10. 运算（Operations）
作用：直接在样式值中进行数学运算。
Function: do the math directly in the style values
.box { width: 100px + 20px; } // 输出 width: 120px;11. 插值（Interpolation）
作用：通过
#{}将变量或表达式嵌入选择器和属性名。Function:let variable inlay selector and Attribute name through through #{}