Sass的分享

                                                                                             Sass的分享

                                                                                                              写于2020年8月7日   下午苏州宜家餐厅

        Sass 是什么？ 官网：https://www.sass.hk/guide/

        Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。

        特性概览 ：

        CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。

        Scss 与 Sass的区别

        Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点： 1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。 2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。

        安装 指令：

                npm install node-sass --save-dev

                npm install [email protected]^7.3.1 --save-dev    版本不低于7不高于8

                npm install style-loader --save-dev

        --save -dev与--save的区别 ：

        --save：将保存配置信息到pacjage.json的dependencies节点中。 --save-dev：将保存配置信息到pacjage.json的devDependencies节点中。 dependencies：运行时的依赖，发布后，即生产环境下还需要用的模块 devDependencies：开发时的依赖。里面的模块是开发时用的，发布时用不到它。

        变量声明 $highlight-color: #F90; $lightColor: #ffffff; $darkColor: #000000; $redColor : #f00; $blue-color: blue;

$highlight-color 这是变量的写法，相当于js中的 var highlight-color  他用$+变量名称组合。

        变量引用：    border:1px solid $darkColor;

        嵌套CSS 规则：

        css中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时，往往需要 一遍又一遍地写同一个ID：           #content article h1 { color: #333 }

#content article p { margin-bottom: 1.4em }

#content aside { background-color: #EEE }

像这种情况，sass可以让你只写一遍，且使样式可读性更高。sass在输出css时会帮你把这些嵌套规则处理好，避免你的重复书写。

#content {  

article {    

h1 { color: #333 }    

p { margin-bottom: 1.4em }  

}  

aside { background-color: #EEE }

}

父选择器的标识符&

article a { color: blue }

article a:hover { color: red }

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

群组选择器的嵌套

.container h1, .container h2, .container h3  { margin-bottom: .8em }

.container {   h1, h2, h3 {margin-bottom: .8em} }

子组合选择器和同层组合选择器： >、+和~ 选择器> 选择一个元素的直接子元素。 article section { margin: 5px } article > section { border: 1px solid #ccc } 同层相邻组合选择器+选择header元素后紧跟的p元素 header + p { font-size: 1.1em } 同层全体组合选择器~，选择所有跟在article后的同层article元素，不管它们之间隔了多少其他元素： article ~ article { border-top: 1px dashed #ccc }

.div1 {   color:$blue-color;   .div2 {     border:1px solid $darkColor;     .div3{       font-size:14px;       color:lighten($darkColor,70%);       &>a {         color:lighten($darkColor,70%);       }     }   } }

lighten($darkColor,70%); 是颜色透明度70% ，$darkColor的70%就是深灰色

article {   ~ article { border-top: 1px dashed #ccc }   > section { background: #eee }   dl > {     dt { color: #333 }     dd { color: #555 }   }   nav + & { margin-top: 0 } }

嵌套属性

nav {   border-style: solid;   border-width: 1px;   border-color: #ccc; } nav {   border: 1px solid #ccc {   left: 0px;   right: 0px;   } }

混合器

        混合器使用@mixin标识符定义 @mixin rounded-corners {   -moz-border-radius: 5px;   -webkit-border-radius: 5px;   border-radius: 5px; } 通过@include来使用这个混合器，放在你希望的任何地方 notice {   background-color: green;   border: 2px solid #00aa00;   @include rounded-corners; }

以下是博主的使用截图：

样式截图：

需要注意的是我们安装的是sass，但是实际项目中用的是scss,原因：scss是sass的一种，可以理解是一样的

通常这样写css定义

不过这样比较冗余，代码重复多，使用嵌套属性的做法：