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
页面结构如下
Hello World文章标题
文章内容 百度
我们使用的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采用的$变量名
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/215222.html原文链接：https://javaforall.net
![几款强大的网页生成工具[通俗易懂]](https://javaforall.net/wp-content/uploads/2020/11/2020110817443450-480x300.jpg)
