Sass 和 SCSS

admin2024-07-08  10

Sass 和 SCSS 是 Sass (Syntactically Awesome Stylesheets) 的两种语法。它们都被用于编写更加结构化和易于维护的 CSS。以下是它们在语法和特性上的主要对比:

1. 语法格式

Sass (缩进语法)

  • 没有花括号 {} 和分号 ;
  • 使用缩进来表示嵌套和层次关系。
nav
  ul
    margin: 0
    padding: 0
  li
    display: inline-block
    margin-right: 5px

SCSS (Sassy CSS)

  • 类似于标准的 CSS,使用花括号 {} 和分号 ;
  • 兼容所有现有的 CSS 代码。
nav {
  ul {
    margin: 0;
    padding: 0;
  }
  li {
    display: inline-block;
    margin-right: 5px;
  }
}

2. 变量

两者都支持变量,语法一致:

$primary-color: #333;

nav {
  color: $primary-color;
}

3. 嵌套

两者都支持嵌套,但在 Sass 中,嵌套使用缩进,而在 SCSS 中使用花括号:

// Sass
nav
  ul
    margin: 0
    padding: 0

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
  }
}

4. 混合器 (Mixins)

混合器的定义和调用在两者中相同:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

5. 插值

插值在两者中的用法相同:

$side: left;
.margin-#{$side} {
  margin-#{$side}: 10px;
}

6. 运算

两者都支持在样式中进行运算:

.container {
  width: 100% - 20px;
}

7. 继承

两者都支持样式继承:

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

下次项目中用到它们的时候再在此补充!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!