❝文档参考 https://www.sass.hk/
❞
安装
yard add --dev node-sass //npm i node-sass -D
yard add --dev sass-loader //npm i sass-loader -D
webpack配置
变量
同名变量
$link-color和$link_color 是同一个变量，定义其中一个可以用另一个名字访问
全局变量
$basic-border: 1px solid black;
局部变量
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
默认变量
注:使用在组件sass/scss中，当被其他sass/scss文件@import时这个变量默认值为 400px,如果此时又写了一个同名变量,则变量值被后者覆盖，可以认为是 !important 这个css属性的对立
$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
覆盖变量
$link-color: blue;
$link-color: red;
a {
color: $link-color; /* red */
}
使用方法
// (1)作为属性的一部分
.selected {
border: 1px solid $highlight-color;
}
// (2)作为整个属性值
.selected {
border: $highlight-border;
}
注释
//单行注释
/* 特殊行注释 */
/**
* 文档注释
*/
嵌套
层级嵌套关系
#content {
article {
hl {
color: #333;
}
p {
margin-bottom: 1.4em;
}
}
aside {
background-color: #EEE;
}
}
/*编译后*/
content article hl {
color: #333;
}
#content article p {
margin-bottom: 1.4em;
}
#content aside {
background-color: #EEE;
}
#content {
background-color: #f5f5f5;
aside {
background-color: #eee;
}
}
//编译后
#content {
background-color: #f5f5f5;
}
#content aside {
background-color: #eee;
}
父选择器
article a {
color: blue;
&:hover {
color: red;
}
}
//编译后
article a {
color: blue;
}
article a:hover {
color: red;
}
#content aside {
color:red;
body.ie & { color:green; }
}
//编译后
#content aside { color:red; }
body.ie #content aside { color:green; }
组合嵌套关系
.container {
h1,h2,h3 {
margin-bottom: .8rem;
}
}
//编译后
.container h1,
.container h2,
.container h3 {
margin-bottom: .8rem;
}
nav,aside {
a {
color: blue;
}
}
//编译后
nav a {
color: blue;
}
aside a {
color: blue;
}
选择器嵌套关系
article {
~article{
border-top:1px dashed #ccc;
}
> section { background:#eee; }
dl > {
dt { color:#333; }
dd { color:#555; }
}
nav + & { margin-top: 0; }
}
//编译后
article ~ article{
border-top:1px dashed #ccc;
}
article > footer{
background:#eee;
}
article dl > dt {
color:#333;
}
article dl > dd {
color:#555;
}
nav + article{
margin-top: 0;
}
属性嵌套关系
nav{
border:{
style:solid;
width:1px;
color:#ccc;
}
}
//编译后
nav{
border-style:solid;
border-width:1px;
border-color:#ccc;
}
nav{
border:1px solid #ccc {
left:0;
right:0;
}
}
//上面比下面写更加优雅
nav{
border:1px solid #ccc;
border-left:0;
border-right:0;
}
导入
css的@import
它允许在一个css文件中导入其他css文件。只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢。
sass@import
（1）
sass的@import规则在编译生成css文件时就把相关文件导入进来无需发起额外的下载请求
（2）
使用sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀在不修改样式表拓展名的前提下，完全可以随意修改你或别人写的被导入的sass样式文件语法，在sass和scss语法之间随意切换。
因此出现一个问题，每一个sass/scss文件都会被编译为对应的一份css文件，为了解决有些sass/scss文件只是为了提高开发体验所写的"组件样式"，不想因此多了一个网络请求。
@import命令配上组件sass才能彻底发挥作用！
组件sass文件
当通过@import把sass样式分散到多个文件时,你通常只想生成少数几个css文件。那些专门为@import而编写的sass文件,并不需要生成对应的独立css文件,这样的sass文件称为局部文件。对此, sass有一个特殊的约定来命名这些文件。
局部文件的文件名以下划线开头。这样, sass就不会在编译时单独编译这个文件输出css。当你@import一个局部文件时省略文件名开头的下划线。举例来说,你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import "themes/night-sky";。
局部文件可以被多个不同的文件引用。当一些样式需要在多个页面甚至多个项目中使用时,这非常有用。在这种情况下,有时需要在你的样式表中对导入的样式稍作修改, sass有一个功能刚好可以解决这个问题,即默认变量值。
$bg-color:red !default;一旦这个文件被引用这个变量值是red,可以通过「覆盖变量」的方法修改它
混合器
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets; //上面的混合器被粘贴过来了！
}
//编译后
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
函数混合器
//顾名思义,就是带有参数的混合器
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover { color: $hover; }
&:visited { color: $visited; }
}
a {
@include link-colors(blue, red, green);
}
//编译后
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }
我对SCSS的看法
个人认为使用scss的主要方面就是css代码分层、分块、复用更有利于合作开发
1.通过嵌套解决列数过多,查找样式没有层次而花费时间过长的弊端
2.通过组件SCSS和@import解决代码分块问题,便于后期修改
3.通过变量、混合器、@include解决样式复用问题
@include 解决了小块重复样式复用问题
其他的方式
@extend
@while
@for
本文使用 mdnice 排版
