SASS基础用法

最新推荐文章于 2025-05-17 10:37:25 发布

原创最新推荐文章于 2025-05-17 10:37:25 发布 · 218 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 3 个专栏收录

12 篇文章

订阅专栏

css

1 篇文章

订阅专栏

sass

1 篇文章

订阅专栏

本文深入探讨Sass的高级特性，包括嵌套规则、变量、混合、函数、控制指令等，帮助读者掌握Sass的强大功能，提升前端开发效率。

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

基础用法

一、嵌套规则

#main p {
    color: #00ff00;
    width: 97%;

    .redbox {
        background-color: #ff0000;
        color: #000000;
    }
}
二、引用父选择器 &

a {
    font-weight: bold;
    text-decoration: none;
    &:hover { text-decoration: underline; }
    body.firefox & { font-weight: normal; }
}
编译为↓
a {
    font-weight: bold;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
body.firefox a {
    font-weight: normal;
}
三、变量 $

$width: 5em;
#main {
width: $width;
}
四、@import

@import "rounded-corners", "text-shadow";
五、@media

如果屏幕像素小于300px,则变为亮蓝色
@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}
六、@extend

.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

//另一个例子，hoverlink也拥有（继承）a:hover属性
.hoverlink {
@extend a:hover;
}
a:hover {
text-decoration: underline;
}
七、@at-root

.parent {
...
@at-root .child { ... }
}
生成↓↓
.parent {...}
.child { ... }
八、@if

$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
九、@for

@for $i from 1 through 3 {
.item-#{$i} {
        width: 2em * $i;
    }
}
//编译为↓
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3{
width: 6em;
}
十、@each

@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
十一、@while

$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
//编译为↓
.item-6 {
width: 12em;
}
.item-4 {
width: 8em;
}
.item-2 {
width: 4em;
}
十二、混入指令
十三、函数指令
十四、输出格式