我非常了解CSS,但是我对Sass感到困惑.SCSS与CSS有什么不同,如果我使用SCSS而不是CSS,它的工作方式会相同吗?

推荐答案

除了Idriss个答案:

CSS

在CSS中,我们按照下面的描述编写代码,全文如下.

body{
 width: 800px;
 color: #ffffff;
}
body content{
 width:750px;
 background:#ffffff;
}

SCSS

在SCSS中,我们可以使用@mixin来缩短这段代码,这样我们就不必一遍又一遍地编写colorwidth属性.我们可以通过函数定义它,类似于PHP或其他语言.

$color: #ffffff;
$width: 800px;

@mixin body{
 width: $width;
 color: $color;

 content{
  width: $width;
  background:$color;
 }
}

无礼

然而,在无礼中,整个 struct 在视觉上比SCSS更快、更干净.

  • 使用复制粘贴时,它对空白敏感,
  • 它目前似乎不支持内联CSS.

    $color: #ffffff
    $width: 800px
    $stack: Helvetica, sans-serif
    
    body
      width: $width
      color: $color
      font: 100% $stack
    
      content
        width: $width
        background:$color
    

Css相关问答推荐

下一个js app样式刷新页面后不工作页面

当鼠标悬停在元素的::第一行时,如何应用样式?

Vue3日期 Select 器:作用域样式不起作用

使用最小高度和边框使阴影DOM中的元素达到自定义元素高度的100%,如果溢出,还可以zoom 父元素

如何使用混合混合模式更改动画背景上的文本 colored颜色

如何将 div 和 img 包装在 display:flex 容器中

使用 Flex 容器,如何在右对齐所有 Flex 子项的同时赋予子图像完整宽度?

如何在不使用 sx props 的情况下从 Select 样式中定位 mui paper 组件?

CSS 不要 Select 包含混合内容的 div 中的第一个元素

有没有办法将px单位添加到 Sass mixin 的参数数组中?

CSS:如何在嵌套计数器中有多个计数器

使用 Flex Box Tailwind CSS 的元素不相等

如何在 CSS Grid 布局中指定行高?

css3 nth 类型限制为类

带有 flexbox 的 css 正方形网格

为什么是垂直对齐:文本顶部;不能在 CSS 中工作

如何将文本向左旋转 90 度并根据 html 中的文本调整单元格大小

CSS 外边框

我的 inline-block 元素没有正确排列

为什么对 HTML 表单而不是表格使用定义列表(DL、DD、DT)标签?