Sass、Scss有什么不同？
Sass 3 就是 Scss，是Sassy CSS的简写，它是CSS3语法的超集，也就是说所有有效的CSS/CSS3样式也同样适合于Sass。
1. 变量Variables
基本语法：
$变量:默认值 !default;
$变量:值 !global;作用域提升至全局范围
$变量:(
"属性1":值1,
"属性2":值2,
"属性3":值3,
...
);
示例：
<--scss-->
$white:#000;
div{
color:$white;
}
<--css-->
div{
color:#000;
}
<--scss-->
@use "sass:map";
$theme-colors: (
"success": #28a745,
"info": #17a2b8,
"warning": #ffc107,
);
.alert {
// Instead of $theme-color-#{warning}
background-color: map.get($theme-colors, "warning");
}
<--css-->
.alert {
background-color: #ffc107;
}
2. 嵌套
基本语法：
父元素{
子元素{
孙元素{
}
}
}
示例：
<--scss-->
div{
height:100px;
ul{
li{
color:red;
}
}
}
<--css-->
div {
height: 100px;
}
div ul li {
color: red;
}
3. 父选择器&Parent Selector
基本语法：&代表父元素
父元素{
&后续类名/伪元素{}
}
示例：
<--scss-->
li{
&:hover{
color:#000;
}
&--active{
color:green;
}
[dir=rtl] & {
margin-left: 0;
margin-right: 10px;
}
:not(&) {
opacity: 0.8;
}
}
<--css-->
li:hover{
color:#000;
}
li--active{
color:green;
}
[dir=rtl] li{
margin-left: 0;
margin-right: 10px;
}
:not(li) {
opacity: 0.8;
}
4. 占位符选择器%placeholder-selector
基本语法：%占位名称 样式直接写入元素下
<--scss-->
.alert:hover, %placeholder-selector {
font-weight: bold;
}
%placeholder-selector:hover {
color: red;
}
.buttons {
@extend %placeholder-selector;
margin: 10px;
}
<--css-->
.alert:hover {
font-weight: bold;
}
.buttons:hover {
color: red;
}
.buttons {
margin: 10px;
}
5.#{变量}： Interpolation插入
(相当于js的${变量})将变量转为string格式
基本语法：
作用域（全局变量--全局作用域；局部变量--局部作用域）
$变量:值;
元素{
#{$变量}:css属性值;
}
示例：
<--scss-->
$primary: #81899b;
$cindy: padding;
.button {
color: #{$primary};
#{$cindy}: 20px;
}
.example {
unquoted: #{"string"};
}
<--css-->
.button {
color: #81899b;
padding: 20px;
}
.example {
unquoted: string;
}
6. mixin 混合 （@mixin and @include）样式模板
基本语法：
@mixin 模板名（参数1:默认值，参数2，...）
{
........样式.......
}
元素{
@include 模板名(参数1,参数2，...);
}
示例：
<--scss-->
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.success {
@include theme($theme: DarkGreen);
}
<--css-->
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
color: #fff;
}
7. @extend继承/扩展（继承该类名下的所有样式）
基本语法：
.类名
元素{@extend .类名1,.类名2,...}
%继承名
元素{@extend 继承名}
示例：
<--scss-->
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.cindy{
margin:20px;
span{
background:black;
}
}
.message {
@extend %message-shared;
@extend .cindy;
}
<--css-->
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.cindy, .message {
margin: 20px;
}
.cindy span,.message span{
background:black;
}
8. 行内if语句(与三目运算相似)
基本语法：
类名{
css属性名:if(值,值===true时渲染,值===false时渲染)
}
示例：
<--scss-->
$is-cindy: false;//true
.button {
border: 1px solid black;
border-radius: if($is-cindy, 5px, null);
}
<--css-->
.button {
border: 1px solid black;
//border-radius: 5px;
}
9. @if and @else 条件语句
基本语法：
@if 条件{
...样式1...
}@else if 条件{
...样式2...
}@else{
...样式3...
}
示例：
<--scss-->
$cindyAge:23;
@mixin getAge($age){
@if $age<10 {
color:red;
}@else if $age==10{
color:green;
}@else{
color:purple;
}
}
.cindy{
@include getAge($age:$cindAge);
}
<--css-->
.cindy{
color:purple;
}
10. @each 循环语句
基本语法：
$变量:值1,值2,值3...;
@each $item in $变量{
$item
}
示例：
<--scss-->
$myPadding:10px,20px,30px;
@each $paddingValue in $myPadding{
.cindy__#{$paddingValue} {
padding:$paddingValue;
}
}
<--css-->
.cindy__10px{
padding:10px;
}
.cindy__20px{
padding:20px;
}
.cindy__30px{
padding:30px;
}
11. @for 循环语句
基本语法：
@for $value from 起始值 through 结束值 {
$value
}
示例：
<--scss-->
@for $margin from 1 through 3{
.cindy__#{$margin} {
margin:#{$margin}px;
}
}
<--css-->
.cindy__1{
margin:1px;
}
.cindy__2{
margin:2px;
}
.cindy__3{
margin:3px;
}
12. 导入scss文件
基本语法：
文件名.scss
@import 文件名.scss
示例：
<--cindy.scss-->
$color:#666666;
<--use.scss-->
@import cindy.scss
.button{
color: $color;
}
<--css-->
.button{
color: #666666;
}
@use '路径' as 模块名
可以直接使用此模块内的类名
变量：模块名.$变量名
