5.13 scss的基本用法

最新推荐文章于 2023-03-27 19:12:43 发布

新时代农民工官方认证码农--菜鸭子毛毛~

最新推荐文章于 2023-03-27 19:12:43 发布

阅读量148

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_54093765/article/details/116770463

版权

本文介绍了SCSS（Sass的语法糖版本）的基本概念和用法，包括变量的声明（$variable）、嵌套规则及&父选择器的使用。通过实例展示了如何使用SCSS简化CSS编写，并提到了在VSCode中使用easysass插件进行自动编译。SCSS与CSS语法接近，支持更高效和模块化的样式表管理。

摘要由CSDN通过智能技术生成

SCSS处理的了解和使用

目标: 了解和学习Scss处理器的规范和用法

官方文档

首先注意,这里的sass和我们的scss是什么关系

sass和scss其实是**一样的**css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。
SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。
两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。
而scss则和css的规范是一致的。

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

在这里插入图片描述

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

页面结构如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./test.css">
</head>
<body>
    
</body>
</html>

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

变量

sass使用$符号来标识变量

$highlight-color: #f90

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

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

$basic-border: 1px solid black;

变量范围

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

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

# 编译后

nav {
  width: 100px;
  color: #F90;
}

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

嵌套语法

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

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

转化后

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

&父选择器

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

比如

article a {
  color: blue;
  &:hover { color: red }
}

学到这里,我们会发现scss和less有很多相似之处,最大的区别就在于声明变量的方式,less采用的是**@变量名, 而scss采用的$变量名**

新时代农民工官方认证码农--菜鸭子毛毛~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
5.13 scss的基本用法

SCSS处理的了解和使用目标: 了解和学习Scss处理器的规范和用法官方文档首先注意,这里的sass和我们的scss是什么关系sass和scss其实是**一样的**css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。而scss则和css的
复制链接

扫一扫