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，谢谢~