SASS基本语法总结

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";

//如果不带后缀会搜索.sass和.scss后缀文件

@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);
 }
相关推荐
Facebook外贸营销5 天前
在FB上打广告这些设定你不得不知
sass·流量运营·facebook
猫爪子挠15 天前
npm install node-sass安装失败
npm·vue·sass·node-sass
Lovely Ruby18 天前
webpack 老项目升级记录:node-sass 规定的 node v8 提升至支持 node v22
webpack·rust·sass
松果猿21 天前
less和sass基本使用
前端·less·sass
前端拾光者21 天前
LESS、SASS 与 SCSS 预处理器详解
前端·css·less·sass·scss
Lovely Ruby22 天前
vue-cli 老项目升级依赖心得 node-sass 问题的处理
vue.js·rust·sass
°若水ღ23 天前
node-sass 对应的node版本
前端·css·sass
天外天-亮1 个月前
vue3.0 + vite:中使用 sass
前端·css·sass
Stacey-TL1 个月前
dart-sass和node-sass的区别,使用dart-sass后可能会出现的问题
开发语言·前端·vue·sass
carpe diem xt1 个月前
使用npm i报错node-sass失败问题解决
前端·npm·sass