共计 1944 个字符，预计需要花费 5 分钟才能阅读完成。
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>
<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>
</html>咱们应用的 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 采纳的$ 变量名
小结：
这样咱们就能够通过 admin 模板来做咱们的我的项目了, js 高程第四版链接: https://pan.baidu.com/s/18P8k… 能够加公众号获取提取码.
若有不懂的中央，请加 q 群 147936127 交换或者 vx: ltby52119，谢谢~
