JS-sass

sass讲解

sass概述

sass是一个预编译的css语言，它是使用ruby语言写的，和它一样的预编译语言还有less，它是使用js写的。sass的环境之前是ruby环境，但是由ruby并了python，所以它可以运行在python环境上，这个些内容并不能直接使用，因为它属于预编译css，没有进行编译是不能被使用的。编译完还是css，那么我们知道它有个编译过程并比损耗效率，它的优势在哪？

预编译css的优势就是它可以减少你的css代码的书写量，并编译出对应的简洁的css代码。

常用的预编译css

sass （底层采用ruby书写）循环可以支持所有类型

less （底层采用js书写） 循环只支持数值类型

stylus （底层采用的是js （功能单一) 它是以缩进来区分对应的层级）

sass的常用俩种形式

sass 后缀 （以缩进来做为区分 没有{} ;）

scss 后缀 （类似于css的区分）

sass的编译环境

node支持python 运用node环境来运行sass

安装

npm install sass -g

 

编译

sass 需要编译的文件 编译后的文件

监听编译

sass --wacth 需要编译的文件:编译后的文件

vscode的插件来帮助我们编译sass

easy sass 扩展

扩展设置

保存后自动编译

 

 

 

live sass 扩展

sass入门

官方文档

变量定义 使用$进行变量定义（*）

$color:red;
div{
    background-color:$color;
}
div {
  background-color: red;
}

 

选择器嵌套 使用&表示当前选择器（*）

样式嵌套

span{
    border: 1px solid #ccc {
        bottom: none;
        };
}
div span {
  border: 1px solid #ccc;
  border-bottom: none;
}

 

支持运算

div{
    background-color:$color;
    a,b{
        text-align: center;
    }
    &:hover{
        color: $color;
    }
}
div a, div b {
  text-align: center;
}
​
div:hover {
  color: red;
}

 

+ - * / %

$size:10px;
p{
    font-size: $size * 5 / 10 + 20 % 1;
}
#box{
    font-size: 10px + 10;
}
p {
  font-size: 5px;
}
#box {
  font-size: 20px;
}

 

支持if else判断

#content{
    @if $size>5 {font-size: $size - 5;}
    @if $size - 5>5 {color:red}
    @else if $size - 5<5{color:blue}
    @else {color:green}
}
#content {
  font-size: 5px;
  color: green;
}
支持for循环 （插值表达式 #{}）
//普通for循环
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}
//for each循环
$list : 1,2,3,4,5;
@each $var in $list {
    .icon-#{$var}{
        font-size:$var * 5px ;
    }
}
.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

.icon-1 {
  font-size: 5px;
}

.icon-2 {
  font-size: 10px;
}

.icon-3 {
  font-size: 15px;
}

.icon-4 {
  font-size: 20px;
}

.icon-5 {
  font-size: 25px;
}

 

支持while循环

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
.while-6 {
  width: 12em;
}

.while-4 {
  width: 8em;
}

.while-2 {
  width: 4em;
}

 

注释 /**/ 多行注释 // 单行注释

// 不会编译到css文件 /**/会编译到css文件

混入器 mixin （*）

//混入器
@mixin borderStyle {
    border: 1px solid red;
}
.box{
    @include borderStyle()
}
//传参的混入器 支持默认参数的
@mixin borderStyle1($a:1px,$b:solid,$c:green) {
    border: $a $b $c;
}
#box{
    // @include borderStyle1(1px,solid,red)
    @include borderStyle1(2px)
}
.box {
  border: 1px solid red;
}

#box {
  border: 2px solid green;
}

 

方法 返回值的形式

@function reduce($a){
    @return $a+10;
}
#hello{
  width: reduce(10px);
}
#hello {
  width: 20px;
}

 

继承 extend（复用 *）

#hi{
    //继承hello的内容
    @extend #hello;
    height: 20px;
}
#hello, #hi {
  width: 20px;
}

#hi {
  height: 20px;
}

 

导入 （*）

@import './mixin.scss';

#box{
    @include borderStyle1()
}
#box {
  border: 1px solid green;
}

 

gulp

gulp是一个自动化构建工具（构建环境 将代码打包 基于文件流的形式） （outer了），webpack --- vite。

https://www.gulpjs.com.cn/

都是基于node环境运行的。用到模块来构建环境

npm install gulp -g
npm install webpack -g
npm insatll vite -g