sass，less，stylus

Posted 2022-08-22 勇敢*牛牛

sass，less，stylus三者的用法

• sass
• less
• stylus

sass

css编程语言
变量，控制，函数

创建a.scss
在父文件夹下开启这个

$a:50px;/* 变量 */

div
    width:$a;
    height: 50px;
    background-color: aqua;
    &:hover
        background-color: yellow;
    

有以下特点：

• 可以添加变量
• 使用变量的时候可以运算

使用函数时：
导入为：@import

.div2
    @import "./b.scss";

混合：@mixin @include 默认值

@mixin set_wh($a,$b,$c:red) 
    width: $a;
    height: $b;
    background-color: $c;

.div1
    @include set_wh(50px,50px ,greenyellow )

.div2
    @include set_wh(50px,50px ,rgb(61, 47, 255) )

循环控制
@while 循环
插值为#$i

@while $i<10 
    $i:$i+1;
    .div#$i
        width: 50xp;

for循环

@for $i from 1 through 3 
    .div#$i
        width: 50px*$i;
        height: 50px*$i;
        background-color: red;
    

each循环

@each $color in red,blue,green,yellow
    .div-#$color
        width: 50px;
        height: 50px;
        background-color: $color;
    

//map 对象式循环
@each $a,$color in (a:red,b:green,c:yellow,d:green)
    .div-#$a
        width: 50px;
        height: 50px;
        background-color: $color;
    

条件 @if @else if

@mixin set-wh($w,$h) 
    @if $w>200px 
        $w:200px
    @else if $w<20px 
        $w:20px;
    
    @if $h<50px $h:50px
    width: $w;
    height: $h;

选择嵌套 ，后代嵌套
>span 子代嵌套
+p相邻兄弟嵌套
&父选择器

div
    width: 150px;
    height: 150px;
    background-color: red;
    li
        color: white;
    
    >span
        color: greenyellow;
    
    +p
        color: blue;
    
    &:hover
    
        background-color: yellow;
    

less

node写的
两句话，上下写。

<link rel="stylesheet/less" type="text/css" href="./a.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>

/* 变量@ */
/* 函数 */
/* 命名空间 */
/* 映射 */
/* 作用域 */
/* 循环为each */
/* 对象 */

循环、函数

@color:
    a:red;
    b:green;
    c:blue;

each(@color,
    .div-@key
        width: 50px;
        height: 50px;
        background-color: @value;
    
)

@c:red,blue,green;
each(@c,
    .div-@value
        width: 50px;
        height: 50px;
        background-color: @c;
    
)

插值、遍历、函数、默认参数、条件判断

.set-wh(@w,@h,@c:red)
    width: if((@w>200px),200px,@w);
    height: @h;
    background-color: @c;

stylus

在文件夹下：
npm i stylus -g全局安装
stylus -w -m a.styl开启监视

可以缩进表示嵌套关系，但是不太习惯；

.div1
    width:50px;
    height:50px;
    background-color: red;

函数写法

.div1 
    width :50px;
    height :50px;

set-wh(w,h)
    width :w;
    height:h;

div
    set-wh(50px,50px)

变量值调用

.div1
    width:50px;
    height:(@width/2);
    background-color: red ;   

for in 循环,插值通过就行

ul
    for i in 1 2 3 4 5
        li:nth-child(i)
            if i==2 
                font-size: 50px;
            else
                font-size: (15px*i);
            
           
        
    


生成css；
ul li:nth-child(1) 
  font-size: 15px;

ul li:nth-child(2) 
  font-size: 50px;

ul li:nth-child(3) 
  font-size: 45px;

ul li:nth-child(4) 
  font-size: 60px;

ul li:nth-child(5) 
  font-size: 75px;

对象生成

getColor()
    (red green blue);

.div1
    color:getColor()[0];    


生成的css样式：

.div1 
  color: #f00;

函数的使用。

fn()
    for obj in arguments
        .divobj[0]
            width:obj[1];
            height:obj[1];
            background: red;
        
    

fn((1 50px),(2 100px),(3 200px))