scss和sass的区别，scss的基本使用

最新推荐文章于 2023-09-03 23:18:31 发布

tang0109

最新推荐文章于 2023-09-03 23:18:31 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/weixin_51608296/article/details/117155280

版权

scss的官方文档 https://www.sass.hk/

sass和scss有什么关系？

1、sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。

2、SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。

3、两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有格的缩进规范并且没有‘{}’和‘；’。而scss则和css的规范是一致的。

为了方便应用scss，我们可以在vscode中安装一个名为easy sass 的插件，但是我们只在该项目中工作区中应用该插件，因为在项目中，不需要该插件的辅助，所以将插件启动在工作区就ok了

scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是@变量名, 而scss采用的$变量名

sass使用方法：

首先我们新建一个文件夹test，然后我们在test下新建一个index.html，并新建一个test.scss

页面结构如下

<body>
    <nav> Scss样式 </nav>
    <div id="app">
        Hello World
    </div>
    <div id="content">
        <article>
            <h1>文章标题</h1>
            <p>文章内容 <a href="">百度</a> </p>
        </article>
        <aside>
            侧边栏
        </aside>
    </div>
</body>

我们使用的easy sass插件会自动的帮助我们把test.scss => test.css

变量

sass使用$符号来标识变量

$highlight-color: #f90

上面我们声明了一个名为$highlight-color的变量, 我们可以把该变量用在任何位置

#app {
    background-color:  $highlight-color;
}

以空格分割的多属性值也可以标识变量

$basic-border: 1px solid black;

#app {
    background-color:  $highlight-color;
    border: $basic-border
}

变量范围

与CSS属性不同，变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用。如果它们出现在任何形式的{...}块中（如@media或者@font-face块），情况也是如此：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
  background-color: black
}

# 编译后 

nav {
  width: 100px;
  color: #F90;
  background-color: black;
}

在这段代码中，$nav-color这个变量定义在了规则块外边，所以在这个样式表中都可以像 nav规则块那样引用它。$width这个变量定义在了nav的{ }规则块内，所以它只能在nav规则块内使用。这意味着是你可以在样式表的其他地方定义和使用$width变量，不会对这里造成影响。

嵌套语法

和less一样,scss同样支持嵌套型的语法

#content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
    }
    aside { background-color: #f90 }
  }

转化后

#content article h1 {
  color: #1dc08a;
}

#content article p {
  font-style: italic;
}

#content aside {
  background-color: #f90;
}

&父选择器

假如你想针对某个特定子元素进行设置

比如

  #content {
    article {
      h1 { color: #1dc08a }
      p {  font-style: italic; }
      a {
        color: blue;
        &:hover { color: red }
      }
    }
    aside { background-color: #f90 }
  }

scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是@变量名, 而scss采用的$变量名

tang0109

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
scss和sass的区别，scss的基本使用

sass和scss有什么关系？1、sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。2、SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。3、两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有格的缩进规范并且没有‘{}’和‘；’。而scss则和css的规范是一致的。为了方便应用scss，我们可以在vscode中安装一个名为easy sass
复制链接

扫一扫