SASS是CSS预处理器,简单来说,SASS是比CSS更高一级的语言,它拥有CSS不具备的语法,比如if条件控制
SASS的预处理器
SASS是一种无法被浏览器直接执行的语言,我们需要通过预处理工具(可以理解为翻译工具),把SASS文件转化为CSS文件,预处理工具有很多,最推荐的方法的就是VScode的插件Easy SASS的方法,也可用webpack的插件sass-loader。
SASS基本语法
嵌套规则(Nested Rules)
SASS用缩进来简写嵌套结构
bash
#main p {
color: #00ff00;
width:97%;
/*嵌套后生成#main p .redbox*/
.redbox {
background-color:red;
color:#000;
}
}
父选择器引用(Referencing Parent Selectors: &)
&代表父选择器简写
bash
a {
font-size:12px;
&:hover {color: red;} //生成a:hover
.firebox & {color:black} //生成.firebox a
}
/* 多层嵌套 */
bash
h1 {
color:blue;
p {
color:red;
& a { //生成h1 p a
color:yellow
}
}
}
/*&规则:必须为前缀,可以加后缀 */
bash
.main {
&-head { //生成.main-head
}
}
父选择器 & 被作为一个后缀的时候,Sass 将抛出一个错误。
属性的嵌套( Nested Properties)
这部分用的很少,但是也算个功能
bash
.funky {
font:{
size:12px; //生成font-size
family:fatasy; //生成font-family
}
}
变量
//变量的声明
$width:5em;
$width:5em !global //全局声明,普通声明只在当前{}下有用
//变量的使用
width: w i d t h ; 变量名下划线和横杠互用, m a i n − h e a d 和 m a i n h e a d 默认相等,变量名必须是 width; 变量名下划线和横杠互用,main-head和main_head默认相等, 变量名必须是 width;变量名下划线和横杠互用,main−head和mainhead默认相等,变量名必须是开头
变量的数据类型
字符串
数字(数值保留单位)
颜色
布尔值
空值
值列表(数组)
maps(键值对)
变量默认符 !default
!default赋值的变量,如果已被赋值,则使用原值,否则使用新值
$name = 1em;
$name = 2em !default; //已被赋值1em,使用原值1em
插值语法#{}
插值语法常常是用来避免sass运算的,保证其内容为纯css内容
KaTeX parse error: Expected 'EOF', got '#' at position 14: name:'foo' p.#̲{name} { //p.foo
}
运算符
加减乘除±*/
分割符/属性替代表示: #{KaTeX parse error: Expected 'EOF', got '}' at position 8: number1}̲/#{number2}
-用作减法规则:number1 - number2前后带空格,(number1-number2)加括号,或者-number-前加空格后加数字
+可拼接字符串
布尔运算支持and,or,not
支持颜色运算,支持括号,不支持数组运算
函数
sassscript定义了部分可直接使用的函数 函数列表
//使用函数
bash
p {
color:hsl(100%,10%,0)
}
关键字参数
关键字参数是对函数参数的命名,除了方便阅读没有任何作用
bash
p {
color:hsl($light:100%,$darkness:10%,$hue:0)
}
css3 @规则
@import 引入外部样式表
@import "foo.sass";
@import "foo","tools"; //import多个
@media 媒体查询样式
bash
.sidebar {
width:100px;
@media ....... { //@media会冒泡到顶端
width:200px;
}
}
@extend 继承类
bash
.nav {
display:block;
font-size:12px
}
bash
.nav-small{
@extend .nav //继承.nav所有样式
color:black;
}
//继承css默认样式
@extend a:hover;
//!optional标记(找不到不会报错)
@at-root
将嵌套的层提到父层
@debug,@warn,#error
将结果输出到控制台
控制指令和表达式
条件语句 if( )
//语法
if(布尔值,值1,值2)
if(true,1px,2px) //1px
@if
bash
p {
@if 1+1 == 2 {
color:red;
}
@if 1+1 == 3 {
color:blue;
}
}
@if,@else if,@else
bash
p {
@if {}
@else if{}
@to
}
}
@for的两种形式
@for $var from through
@for v a r f r o m = = t o = = 循环中的参数 var from ==to== 循环中的参数 varfrom==to==循环中的参数name,不运算#{$name}
@for KaTeX parse error: Expected '}', got '#' at position 32: ... 3 { .item-#̲{i} {width:2em*$i;}
}
@each循环
@each $var in
@each v a r 1 , var1, var1,var2...in <多维list or map>
@while
bash
$i:0;
@while $i<5 {
.item-#{$i} {
width:2em*$i;
}
$i : $i+1;
}
混入样式@mixin
SASS可以指定一个自定义的样式
//定义一个混入样式
@
bash
mixin mixinname{
display:block;
color:white;
}
//引入混入样式
body {
@include mixinname
}
//带参数的引入样式
bash
@mixin mixinname ($para1,$para2){
display:block;
color:white;
}
body {
@include mixname(2px,$value2) //可引入直接值和变量
}
//关键字参数(就是给参数起变量名,用于方便阅读)
body {
@include mixname( c o l o r : b l u e , color:blue, color:blue,size:3) //
}
//可变参数...(参数数目可变)
@mixin mixinname($para...){ //参数后面加...
}
@content 内容混入
SASS可以自定义内容,并引入
//定义一个自定义内容name
bash
@mixin name{
@content
}
p {
include name { //引入自定义内容name
..... //content
}
}
函数指令
SASS可以声明函数
bash
@function func_name ($para){
@return $para*2
}
//使用
bash
p {
width: func_name(5);
}