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开启监视

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

.div1width: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{.div{obj[0]}{width:obj[1];height:obj[1];background: red;}}
}
fn((1 50px),(2 100px),(3 200px))

sass，less，stylus相关推荐

was css,Sass无效的CSS…:期望的表达式(例如，1px，粗体)，是“{”
I have the following Sass, following this example for @each: 我有以下Sass,以下为@each: @each $flag in USA, ...
2023年高频前端面试项目考点（npm，git，webpack，TS4，sass，瀑布流，懒加载）
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客 *表示回顾基础知识项目为二面三面,面试官基本就是照着简历 ...
sass揭秘之@if，@for，@each
因为文章内含有很多sass代码,如需自己动手查看编译结果,推荐使用sassmeister这款在线编译工具,方便你阅读学习. 经过上两篇揭秘,大家心里对sass应该有了很好的认知感了,这篇文章基于前面两 ...
您详细比较三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
2019独角兽企业重金招聘Python工程师标准>>> CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS ...
CSS预处理器语言：Sass、LESS、Stylus
CSS预处理器语言:Sass.LESS.Stylus Sass 和 Less 都使用的是标准的 CSS 语法.默认 Sass 使用 .sass 扩展名, Less 使用 .less 扩展名,Stylu ...
Sass、LESS 和 Stylus区别总结
CSS 预处理器技术已经非常的成熟了,而且也涌现出了越来越多的 CSS 的预处理器框架.本文便总结下 Sass.Less CSS.Stylus这三个预处理器的区别和各自的基本语法. 1.什么是 CSS ...
【面试总结系列】CSS 预编译器 Sass、Less、Stylus 三者之间的比较详解
想要查看关于 CSS 的相关面试题,请移步至面试题 - CSS 篇查看,其他内容面试题请移步至 2021 最新最全的前端面试题集锦查看. CSS-当前主流的三种预编译器什么是预编译器: CSS ...
CSS预处理器——Sass、LESS和Stylus区别及联系
一.什么是CSS预处器 CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作.通俗的说 ...
CSS 与其预处理语言 Sass、Less、Stylus 之间的转化
预处理语言的由来:CSS 是一门非程序式语言,没有变量.函数.SCOPE(作用域),需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,为了让 CSS 富有逻辑性,短板不那么严重,涌现出了 ...

sass，less，stylus

sass，less，stylus三者的用法

sass

less

stylus

sass，less，stylus相关推荐

最新文章

热门文章