sass

概述

sass是一个预编译（预先编译的css 自动编译成css）的css，与之相关的产品还有less以及stylus。预编
译css需要相关的环境来进行解析。主要是对应的css加载解析器来帮助解析（利用对应的node来下载这
个解析器 进行解析）。

sass解析环境

利用node来下载解析器进行解析 （版本问题）

npm i node-sass
npm i sass-load

利用vscode 插件来进行解析

easy sass插件

live sass插件

easy sass的相关配置 ### sass入门 sass有俩种后缀名

sass （以缩进作为区分 层级关系 （没有； 没有{} 不支持英文颜色））

div{
    color:#fff;
    background:#ccc
}

scss （和正常的css一样的写法）

div{
background-color: red;
}

sass的变量定义

使用$符号定义

支持运算符 （支持+ - * / %）

//变量定义 这个注释是不会生成的
$a:10px;
/* 注释 文档注释会生成 */
// sass支持运算
#context{
font-size: $a; //变量使用
border: $a+20 solid #000;
width: $a * 10;
height: $a / 5;
margin: $a - 20;
padding: $a % 4;
}

编译

/* 注释 文档注释会生成 */
#context {
font-size: 10px;
border: 30px solid #000;
width: 100px;
height: 2px;
margin: -10px;
padding: 2px;
}

sass中的注释

• // 不会编译的注释
• /**/ 会编译的注释

sass中的条件判断

• @if 满足条件进入
• @else 不满足上面的条件进入

---

//条件判断
$width: 200px;
.
box{
//如果宽度大于300
@if $width > 300{
font-size: 14px;
}
@if $width > 400{
font-size: 16px;
}
@if $width > 500{
font-size: 18px;
}
//否则
@else {
font-size: 20px;
}
}

编译后

sass中循环控制

//while循环
$i: 6; //变量
@while $i > 0 { //条件大于0
.
item-#{$i} { width: 2em * $i; }
$i: $i - 2; //每次-2
}

编译

item-6 {
width: 12em;
}
.
item-4 {
width: 8em;
}
.
item-2 {
width: 4em;
}

@for

//for循环
//从0数到5 包含0 不包含5
@for $item from 0 to 5 {
//#{}占位符 解析对应的变量
.
item
_
#{$item}{
width:$item;
}
}

编译

.item_0 {
width: 0;
}
.item_1 {
width: 1;
}
.item_2 {
width: 2;
}
.item_3 {
width: 3;
}
.item_4 {
width: 4;
}

@each

//foreach 循环
//定义一个多个值 在这个里面
//数组 多个值包含在一个变量里面
$list:1,2,3,4,5,6;
//$i 取 $list 里面的值
@each $i in $list {
. size _#{$i}{
font-size: 16 + $i * 2 + px;
}
}

编译

.size_1 {
font-size: 18px;
}
.size_2 {
font-size: 20px;
}
.size_3 {
font-size: 22px;
}
.size_4 {
font-size: 24px;
}
.size_5 {
font-size: 26px;
}
.size_6 {
font-size: 28px;
}

sass中的关系

父子关系（嵌套包含）

div{
width:100%;
//父子关系 div里面的a 支持多级嵌套
    a{
        color:red;
        b{
            font-size: 15px;
         }
    }
}
//针对伪类 &表示当前的自身
.
header{
    color:blue;
    &:hover{
        color:red;
    }
    a{
        &:hover{
            color: yellow;
       }
    }
  }

编译

div {
    width: 100%;
}
div a {
    color: red;
}
div a b {
    font-size: 15px;
}
.header {
    color: blue;
}
.
header:hover {
    color: red;
}
.header a:hover {
    color: yellow;
}

继承 @extend

.context{
color:red;
margin: 0;
font-weight: 600;
}
p{
//继承上面的样式
@extend .context;
color: blue;
font-size: 16px;
}

编译

.context, p {
    color: red;
    margin: 0;
    font-weight: 600;
}
p {
    color: blue;
    font-size: 16px;
}

sass中的函数 （提供复用的表达式 帮助处理一些业务）

• @function 定义函数
• @return 返回值

---

//定义函数
//@function 函数名(参数)
@function sum($first,$last){
@return $first + $last;
}
//使用
body{
//调用
width: sum(10px, 20px);
}
//指定默认的参数值
@function color_rgb($r:0,$g:0,$b:0){
@return 'rgb(#{$r},#{$g},#{$b})';
}
*{
    //默认的参数
    color:color_rgb()
}
//传入参数来覆盖默认值
.innerBox{
    background-color: color_rgb(20,20);
}
//函数和判断一起使用
@function fn($size){
    @if $size>100 {
        @return $size + 20;
    }
    @else {
        @return $size - 10;
    }
}
.warp{
font-size: fn(100px);
}

编辑

body {
    width: 30px;
}
*{
    color: "rgb(0,0,0)";
}
.innerBox {
    background-color: "rgb(20,20,0)";
}
.warp {
    font-size: 90px;
}

sass中的混入器 （公共代码块）

• @mixin 定义混入器
• @include 导入混入器

---

//混入器定义
//@mixin 混入器名(参数) {
// 公共代码
// }
//不传参的混入器
@mixin public_Style{
background-color: red;
color: #fff;
border: 1px solid #000;
}
//使用
. item{
    @include public_Style();
}
//传参的混入器
@mixin border_ Mixin($width,$line,$color) {
    border: $width $line $color;
}
//使用
ul{
    @include border_Mixin(2px, solid,#ccc)
}
//指定默认参数
@mixin
backgroundImg_Mixin($url,$isRepate:false,$left:0px,$top:0px,$size:contain) {
    background-image: url(#{$url});
    @if $isRepate {
        background-repeat: repeat;
    }
    @else{
        background-repeat: no-repeat;
    }
    background-position: $top $left;
    background-size: $size;
}
li{
@include backgroundImg_Mixin("http://www.baidu.com",true)
}

编译

.item {
    background-color: red;
    color: #fff;
    border: 1px solid #000;
}
ul {
    border: 2px solid #ccc;
}
li {
    background-image: url(http://www.baidu.com);
    background-repeat: repeat;
    background-position: 0px 0px;
    background-size: contain;
}

占位选择器 %

//占位选择器 结合@extend 使用%来进行占位
#context %a a{
    font-size: 10px;
    width: 100px;
}
.inner{
    @extend %a;
}
.nav{
    @extend %a;
}

编译

#context .inner a, #context .nav a {
    font-size: 10px;
    width: 100px;
}

@import 导入

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
@import "rounded-corners", "text-shadow";

导入样式到选择器内

#main {
    @import "example";
}