sass的基础应用

最新推荐文章于 2025-05-31 11:09:21 发布

Root1216

最新推荐文章于 2025-05-31 11:09:21 发布

阅读量237

点赞数

CC 4.0 BY-SA版权

文章标签： sass 前端 css

本文链接：https://blog.youkuaiyun.com/Root1216/article/details/131221050

本文详细介绍了Sass的多种特性与指令。包括嵌套规则、父选择器、属性嵌套等语法，还阐述了变量、插值语句、连接符的使用。同时，对运算（数字、颜色值、字符串）、圆括号、@ - Rules与指令、控制指令、混合指令等方面进行了说明，有助于深入掌握Sass。

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

1、嵌套规则

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

// sass 写法
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

// 被编译后
#main p {
  color: #00ff00;
  width: 97%; 
}
      
#main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}

2、父选择器 `&`

在嵌套 CSS 规则时，有时也需要直接使用嵌套外层的父选择器。

// sass 写法
.item {
    width: 200px;
    height: 200px;
    
    &-line {
        border: 1px red  solid;
    }

    a {
        font-weight: bold;
        text-decoration: none;
    
        &:hover { 
            text-decoration: underline; 
        }
  
        body.firefox & { 
            font-weight: normal; 
        }
    }
}

// 被编译后
.item {
    width: 200px;
    height: 200px;
}

.item-line {
    border: 1px red  solid;
}

.item a {
  font-weight: bold;
  text-decoration: none; 
}

.item a:hover {
    text-decoration: underline; 
}

.item body.firefox  a {
    font-weight: normal; 
}

3、属性嵌套

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中。

// sass 写法
.dog{
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
}

// 被编译后
.dog {      
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; 
}

4、变量 `$`(Variables: `$`)

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样，变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明，还可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值。

// 编译前
$background: yellow;

.dog {
    background: $background;
}


// 被编译后
.dog {
    background: yellow;
}

// 编译前
.dog {
    $background: yellow !global;
    background: $background;
}

.small-dog {
    background: $background;
}


// 被编译后
.dog {
    background: yellow;
}

.small-dog {
    background: yellow;
}

// 编译前
$width: 100px;
$width: 200px !default;
$height: null;
$height: 300px !default;

.house {
    width: $width;
    height: $height;
}

// 被编译后
.house {
    width: 100px;
    height: 300px;
}

5、插值语句 `#{}` (Interpolation: `#{}`)

通过 #{} 插值语句可以在选择器或属性名中使用变量。

// 编译前
$name: dog;
$attr: background;

p.#{$name} {
    #{$attr}-color: yellow;
}

// 被编译后
p.dog {
    background-color: yellow
}

6、连接符 &

// 编译前
.name {
    width: 100px;
    height: 100px;
    background: red;
    &-small {
        width: 50px;
        height: 50px;
        background: yellow;
    }
}

// 被编译后
.name {
    width: 100px;
    height: 100px;
    background: red;
}

.name-small {
    width: 50px;
    height: 50px;
    background: yellow;
}

7、运算(Operations)

7.1 数字运算 (Number Operations)

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

// 编译前 
.name {
    width: 10px + 10px;
    height: 50px - 20px;
    margin-top: 100px/4;
    margin-left: 10px*4;
    margin-right: 10px%4;
}

// 被编译后
.name {
    width: 20px;
    height: 30px;
    margin-top: 25px;
    margin-left: 40px;
    margin-right: 2px;
}

7.2 颜色值运算 (Color Operations)

颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。

// 编译前
.name {
    color: #010203 + #040506;
}

// 计算 01 + 04 = 05 02 + 05 = 07 03 + 06 = 09，然后编译为
.name {
    color: #050709; 
}



// 编译前
$translucent-red: rgba(255, 0, 0, 0.5);
p {
    color: opacify($translucent-red, 0.3);
    background-color: transparentize($translucent-red, 0.25);
}

// 被编译后  opacify 相当于 + transparentize 相当于 -
p {
    color: rgba(255, 0, 0, 0.8);
    background-color: rgba(255, 0, 0, 0.25); 
}

7.3 字符串运算 (String Operations)

+ 可用于连接字符串，运算表达式与其他值连用时，用空格做连接符.

// 编译前
p:before {
    content: "Foo " + Bar;
    font-family: sans- + "serif";
}
p {
    margin: 3px + 4px auto;
}
// 被编译后
p:before {
    content: "Foo Bar";
    font-family: sans-serif; 
}
p {
    margin: 7px auto; 
}

8、圆括号 (Parentheses)

// 编译前
p {
    width: 1em + (2em * 3);
}

// 被编译后
p {
    width: 7em; 
}

9、@-Rules 与指令 (@-Rules and Directives)

Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）。这一节会详细解释，更多资料请查看控制指令 (control directives) 与混合指令 (mixin directives) 两个部分。

9.1 @import

Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@import "rounded-corners", "text-shadow";

9.2 嵌套 @import

// 编译前
.example {
    color: red;
}

#main {
    @import "example";
}

// 被编译后
#main .example {
    color: red;
}

9.3 @media

// 编译前
.sidebar {
    width: 300px;
    @media screen and (orientation: landscape) {
          width: 500px;
    }
}

// 被编译后
.sidebar {
    width: 300px; 
}
@media screen and (orientation: landscape) {
    .sidebar {
        width: 500px;
    }
}

// 编译前
@media screen {
    .sidebar {
      @media (orientation: landscape) {
        width: 500px;
      }
    }
}
// 被编译后
@media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
    }
}

9.4 @extend

// 编译前
.error {
    border: 1px #f00;
    background-color: #fdd;
}
.attention {
    font-size: 3em;
    background-color: #ff0;
}
.seriousError {
    @extend .error;
    @extend .attention;
    border-width: 3px;
}

// 被编译后
.error, .seriousError {
    border: 1px #f00;
    background-color: #fdd; 
}

.attention, .seriousError {
    font-size: 3em;
    background-color: #ff0; 
}

.seriousError {
    border-width: 3px; 
}

9.5 @at-root 、 @at-root (without: ...) and @at-root (with: ...)

将所有子class 提升到跟级别

// 编译前
.parent {
    ...
    @at-root {
      .child1 { ... }
      .child2 { ... }
    }
    .step-child { ... }
}

@media print {
    .page {
        width: 8in;
        @at-root (without: media) {
          color: red;
        }
    }
}

// 被编译后
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }

@media print {
    .page {
        width: 8in;
    }
}
.page {
    color: red;
}

10、控制指令 (Control Directives)

10.1 @if

// 编译前
p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
    @if null  { border: 3px double; }
}

// 被编译后
p {
    border: 1px solid; 
}

// 编译前
$type: monster;
p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}

// 被编译后
p {
    color: green; 
}

10.2 @for

// 编译前
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

// 被编译后
.item-1 {
    width: 2em; 
}
.item-2 {
    width: 4em; 
}
.item-3 {
    width: 6em; 
}

10.3 @each

// 编译前
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
    #{$header} {
        font-size: $size;
    }
}

// 被编译后
h1 {
    font-size: 2em; 
}
h2 {
    font-size: 1.5em; 
}
h3 {
    font-size: 1.2em; 
}

10.4 @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; 
}

11、混合指令 (Mixin Directives)

1、正常混入
// 编译前
@mixin silly-links {
    a {
        color: blue;
        background-color: red;
    }
}
@include silly-links;
// 被编译后
a {
    color: blue;
    background-color: red; 
}

2、带参数混入
// 编译前
@mixin sexy-border($color, $width) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}
p { @include sexy-border(blue, 1in); }
// 被编译后
p {
    border-color: blue;
    border-width: 1in;
    border-style: dashed; 
}