SASS预处理器（弱类型语言）.scss文件
注释
多行注释：
/*多行注释*/可以输出到.css文件里 不能输出到 .min.css里。
单行注释：
//单行注释不能输出到.css文件里 不能输出到 .min.css里。
输出到.min.css ：
/*!多行注释能输出到.min.css和.css 文件里*/ 加个感叹号之后 能输出到 .min.css 和 .css 文件里。
变量
定义：
$color:red;
字母开头，最好只出现字母、数字、下划线。
使用：
$color:red;
body{
color:$color;
}
1.作用域
全局变量：可以被本scss文件的所有类使用;
局部变量：
局部变量会覆盖全局变量的值;
局部变量可以被本类使用，不能被其他类使用，不能在全局使用;
想访问局部变量(局部变量转换成全局变量) 需要加 !global //$color1: yellow !global;
局部变量改变全局变量的值 只在本类中生效
~~最好把我写的代码 复制粘贴自己试一下 加深印象
//scss
$color:red;
body {
$color1: yellow;
$color: $color1;
color: $color;
}
div {
color: $color;
}
//css
body {
color: yellow;
}
div {
color: red;
}
2.变量类型：number、string、list、color
数字： 1 2.5 10px 10em 正负数和0 单位和数字是一个整体
字符串： 'red' "red" red 单双引号都会被编译成双引号
颜色： red #1e9fff rgba(255,0,0,.7)
布尔值： true false $value:true; $value:false;
空值： null
v
a
l
u
e
:
n
u
l
l
;
/
/
不
能
进
行
算
术
运
算
∗
∗
数
组
：
∗
∗
用
空
格
或
逗
号
作
分
隔
符
2
p
x
s
o
l
i
d
r
e
d
;
003
p
x
r
e
d
,
004
p
x
b
l
u
e
;
一
维
数
组
‘
2
p
x
s
o
l
i
d
r
e
d
‘
二
维
数
组
‘
(
12
)
,
(
34
)
;
‘
‘
12
,
34
;
‘
∗
∗
映
射
（
M
a
p
s
）
相
当
于
O
b
j
e
c
t
:
∗
∗
‘
value:null; //不能进行算术运算 **数组：** 用空格或逗号作分隔符 2px solid red; 0 0 3px red,0 0 4px blue; 一维数组 `2px solid red` 二维数组`(1 2), (3 4);` `1 2,3 4;` **映射（Maps）相当于 Object:** `
value:null;//不能进行算术运算∗∗数组：∗∗用空格或逗号作分隔符2pxsolidred;003pxred,004pxblue;一维数组‘2pxsolidred‘二维数组‘(12),(34);‘‘12,34;‘∗∗映射（Maps）相当于Object:∗∗‘map:(key1:“value1”,key2:“value2”)`
*判断数据类型:type-of($color)
*模板字符串：#{aaa}
!default
在定义变量后加入 !default 会检查前面是否的定义了该变量 如果定义了则使用前面的变量值 如果没定义则使用本变量值
如果第一次定义的值是null 则!defalut 不生效
!globa
想访问局部变量(局部变量变全局变量) 需要加 !global //$color1: yellow !global;
!optional
当继承@extend出现语法错误 加上这个参数 不会生成新选择器 会编译不通过
数字运算
只有一个单位按这个单位为准
没有单位则不加单位
两个单位按第一个单位为准
$width1:5px+5px; // 10px
$width2:5px - 2; // 3px
$width3:5px * 2; // 10px
$width4:10px / 2px; // 5 '/'号 直接赋值无效需要赋值给变量 然后将变量赋值给width属性：width:10px / 2px != width: 5
$width5:10px / 2; // 5px
$width:10px%5px; // 0px 10px%5px不赋给变量 直接赋值给属性会没有单位 width:2
$width6:3+2 * 5px; // 13px
$width7:(3+2)*5px; // 25px
字符串运算（拼接）
第一个有无引号决定了结果有无引号
$str:"a"+"b"; //"ab"
$str:"a"+b; //"ab"
$str:a+"b"; //ab
$str:a+b; //ab
数字和字符串拼接
$str_num:1+a; //1a
$str_num:a+1; //a1
$str_num:'1'+a; //"1a"
$str_num:1+"a"; //"1a"
$str_num:a+"1"; //a1
$str_num:1+"1"; //"11"
关系运算 返回值为true false
$bool:5px>3px; //true
$bool:5px>3; //true
$bool:5px>3 and 5px>3px; //true
$bool:5px<3 or 5px<3px; //false
$bool:not(5px<3); //true
$bool:5px==5; //true
$bool:5==5; //true 没有全等于===
语法
基本嵌套
//<div class="div_1">
// <h1>111</h1>
// <span>222</span>
//</div>
.div_1 {
h1 {
color: $color1
}
span {
color: $color2
}
}
高级嵌套 ~~最新版本才支持
body {
font: {
family: "微软雅黑";
size: 18px;
weight: bold;
}
}
模板字符串： #{变量名}
$bor:border;
$css_name:span;
//模板字符串 #{}
// <div class="div_1">
// <h1>111</h1>
// <span>222</span>
// </div>
.div_1 {
h1 {
#{$bor}: 1px solid red;
}
#{$css_name} {
#{$bor}: 1px solid blue;
}
}
父选择器
$bor:border;
$css_name:span;
//父选择器 &可省略
// <div class="div_1">
// <h1>111</h1>
// <span>222</span>
// </div>
.div_1 {
&:hover {
#{$bor}: 1px solid green;
}
&::after {
content: "aaa";
}
}
条件语句、循环语句
三目运算符
//scss
.div_1 {
color: if(1==1, green, red);
}
//css
.div_1 {
color: green;
}
@if
//scss
$color: red;
.div_1 {
@if $color !=red {
color: blue;
}
@else if($color==red) {
color: green;
}
@else {
color: yellow;
}
}
//css
.div_1 {
color: green;
}
@for from…through
//scss
$color: red;
.div_1 {
@for $li from 1 through 3 {
.li_#{$li} {
width: 10px * $li;
}
}
}
//css
.div_1 .li_1 {
width: 10px;
}
.div_1 .li_2 {
width: 20px;
}
.div_1 .li_3 {
width: 30px;
}
@for from…to
//scss
$sum:3;
@for $i from 1 to $sum {
.li_#{$i} {
width: $i*10px;
}
}
//css
.li_1 {
width: 10px;
}
.li_2 {
width: 20px;
}
@while
//scss
$li:6;
.div_1 {
@while $li >0{
.item_#{$li}{
width:10px * $li;
}
$li:$li-2;
}
}
//css
.div_1 .li_1 {
width: 10px;
}
.div_1 .li_2 {
width: 20px;
}
.div_1 .li_3 {
width: 30px;
}
@each 遍历数组
//scss
$colors:red blue green;
@each $i in $colors {
.icon_#{$i} {
background-color: $i;
}
}
//css
.icon_red {
background-color: red;
}
.icon_blue {
background-color: blue;
}
.icon_green {
background-color: green;
}
控制指令
@import
导入其他scss
可以调用被引用文件里的变量
样式也自动的导入了过来
每次使用@import 都会增加http请求次数
所以可以切割scss文件然后抖音入一个scss文件里
实现模块化
@import "yinyong.scss";
@import "yinyong";
@import "yinyong", "qr"; //同时引入多个文件
//注意 文件不存在会报错
@extend 继承
一个元素与另外一个元素有公共样式 但自己又添加了额外的样式
（抽出公共样式 有需要则继承就可以）
为被继承的类添加 子元素样式 则也会被继承
//scss
.font_size_30 {
font-size: 30px
}
.div_1 {
@extend .font_size_30;
color: red;
}
//css
.font_size, .div_1 {
font-size: 30px;
}
.div_1 {
color: red;
}
不想让公共样式编译
//scss
%font_size {
font-size: 30px
}
.div_1 {
@extend %font_size;
color: red;
}
//css
.div_1 {
font-size: 30px;
}
.div_1 {
color: red;
}
优缺点
优点：实现了代码复用 可以叠加引用
缺点：没有混合灵活 无法传参
@at-root 生成嵌套之外的样式
//scss
%font_size {
font-size: 30px
}
.div_1 {
@extend %font_size;
color: red;
@at-root {
.style {
background-color: aquamarine;
}
}
}
//css
.div_1 {
font-size: 30px;
}
.div_1 {
color: red;
}
.style {
background-color: aquamarine;
}
//.style 变成了一个单独的样式 而不是 .div_1 .style
@debug 检测错误
@warn 警告
//scss
$colors:(c1:red, c2:green);
@function func($key) {
@if not map-has-key($colors, $key) {
@warn '$key未找到！';
}
@return map-get($colors, $key);
}
.div_1 {
color: func(c3);
}
@error 报错
※混合
无参数@mixin
//scss
@mixin mx {
color: red;
a {
color: aquamarine
}
}
.div_1 {
@include mx;
}
//css
.div_1 {
color: red;
}
.div_1 a {
color: aquamarine;
}
有参数@mixin
//scss
$color:red;
@mixin mx($mx_color1, $mx_color2) {
color: $mx_color1;
span {
color: $mx_color2
}
}
.div_1 {
@include mx(red, blue);
}
//css
.div_1 {
color: red;
}
.div_1 span {
color: blue;
}
※自带函数
数字函数
//scss
$width:round(-10.7px); //四舍五入-11px
$width:ceil(10.7px);//向上取整 11px
$width:ceil(-10.7px);//向上取整-10px
$width:floor(-10.7px);//向下取整 -11px
$width:floor(10.7px);//10px
$width:percentage(600px / 1000px);//求百分比 60%;
abs(-10px); //绝对值 10px
$width:min(1, 2, 3); //最小值 1
$width:max(1, 2, 3); //最小值 3
字符串函数
//scss
$width:to-lower-case("ASDASD"); // 全部小写 "asdasd"
$width:to-upper-case("asd"); // 全部大写 "ASD"
$width:str-length("asd"); //获取字符串长度 3
$width:str-index("asd", "s"); //获取指定字符串下标 2
$width:str-insert("asd", "s", 10); //在指定位置插入字符串 "asds"
颜色函数
//scss
$color: hsla(222, 100%, 50%, 0.8);
body {
background-color: darken($color, 30%); //调暗
background-color: lighten($color, 10%); //调亮
background-color: desaturate($color, 50%); //增加饱和度
background-color: saturate($color, 50%); //减少饱和度
background-color: adjust-hue($color, 137deg); //调整色相
background-color: opacify($color, 0.3); //调整透明度
}
//css
body {
background-color: rgba(0, 31, 102, 0.8);
background-color: rgba(51, 112, 255, 0.8);
background-color: rgba(64, 102, 191, 0.8);
background-color: rgba(0, 77, 255, 0.8);
background-color: rgba(255, 0, 4, 0.8);
background-color: #004dff;
}
数组函数
//scss
$width: length(5px 6px); // 2
$width: nth(5px 6px,1); //找第一个数组元素
$width: index(5px 6px,6px); // 2
$width: append(1px solid,6px); //1px solid 6px
$width: join(1px solid,6px); //1px solid 6px
$width: join(1px solid,6px,comma); //1px, solid, 6px
//css
Map函数
//scss
$width: length((w1:100px, w2:200px)); // 2
$width: map-get((w1:100px, w2:200px),w1); // 200px
$width: map-keys((w1:100px, w2:200px)); // w1,w2
$width: map-values((w1:100px, w2:200px)); //100px,200px
$width: map-has-key((w1:100px, w2:200px),w3); // false
//css
自定义函数
//scss
$colors:(c1:red, c2:green);
@function func($key) {
@return map-get($colors, $key);
}
.div_1 {
color: func(c1);
}
//css
.div_1 {
color: red;
}
一些概念
其他的预处理器：Stylus、LESS。
出现的原因：无法写嵌套、无法复用。
历史：2007年诞生 最早最成熟的预处理器 借鉴了SCSS的长处 全面兼容SCSS。
与SCSS的关系：更新的语法被称为SCSS,旧语法是SASS 并不完全兼容CSS，SCSS完全兼容CSS 它们俩的语法也不同。
~~B站 大力推荐 1个多小时学scss足矣
https://www.bilibili.com/video/BV17W411w7nL?p=1
~~我写的不对也欢迎大家指正
1559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
