关键词：
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))
517，sytlus/sass/less的区别
...较为严禁，less要求一定要使用大括号“”，scss和stylus可以通过缩进表示层次与嵌套关系scss没有全局变量的概念，less和stylus有类似于其他语言的作用域概念sass是基于ruby语言的，而less和stylus可以基于nodejsnpm下载相应的库后... 查看详情
vue中使用lesssassstylus(代码片段)
...ss与sass只是语法规范不一样，具体使用可根据个人习惯。stylus的使用npmistylusstylus-loader-s组件内，设置<stylelang=‘stylus‘> 查看详情
sass入门及知识点整理(代码片段)
...于Sass的。因为这两种都是CSS的主流预处理器，当然还有Stylus。 要解释一下什么是Sass吗？Sass和Less一样都是CSS预处理器。CSS预处理器通俗来讲就是用它们专有的语法来写CSS，然后再 查看详情
stylus的用法
参考链接：预处器的对比——Sass、LESS和Stylus http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html因为在vue.js项目（高仿饿了么app）中会用到stylus，所以本文重点关注stylus的用法1.语法Stylus的语法花样多一些，它... 查看详情
stylus
stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS，SASS都在这方面做了一些贡献。Stylus是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预... 查看详情
css预处器的对比——sassless和stylus
预处器的对比——Sass、LESS和Stylus转载：英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout中文译文：http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocesso 查看详情
less(代码片段)
...处理语言的诞生其中就我所知的有三门语言：Sass、Less、Stylus。Sass诞生于2007年，Ruby编写，其语法功能都十分全面，可以说它完全把CSS变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优... 查看详情
less快速入门(代码片段)
...发社区已经解决了这个问题，现在我们拥有诸如Less,Sass和Stylus之类的预处理器，它们给我们提供了许多优于纯CSS的好处。变量-它可以让你更轻松的在整个样 查看详情
stylusless和sass的区别
...来越多的CSS的预处理器框架。本文便总结下Sass、LessCSS、Stylus这三个预处理器的区别和各自的基本语法。1.什么是CSS预处理器CSS预处理器是一种语言用来为CSS增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在CS... 查看详情
sass和stylus1px解决方案(代码片段)
1.sass1@charset"utf-8";2/**3*@module背景与边框4*@description为元素添加边框（包括1px边框）5*@methodborder6*@version2.0.07*@paramString$border-width指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置<2.0.0>... 查看详情
sassless和stylus区别总结(代码片段)
1.什么是CSS预处理器CSS预处理器是一种语言用来为CSS增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS更见简洁，适应性更... 查看详情
wepy-安装less/sass(代码片段)
关于sassless，在wepy文档里寻找 演示安装，默认已经安装了less，我们需要安装的是scss 安装less或scssyarnyarnaddwepy-compiler-sass npmnpminstallwepy-async-function--save 查看详情
sass/scss和less的区别(代码片段)
...，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sas 查看详情
css预处理器（框架）初探：sassless和stylus
...在最为普遍的三款CSS预处理器框架，分别是Sass、LessCSS、Stylus。拿less来说，可以在页面上直接使用less文件，但要引用less.js进行解析；同时也可以直接将less输出为css文件。推荐使用后者。最常用的less编译输出css工具：与node.js关... 查看详情
（转）预处器的对比——sassless和stylus
英文原文：http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less-vs-stylus-a-preprocessor-shootout原文链接：http://www.w3cplus.com/css/sass-vs-less-vs-stylus-a-preprocessor-shootout.html介绍CSS预处理器是一种 查看详情
less框架和sass框架(代码片段)
less框架@width:200px;//带参数的混入，括号中是参数，值可变.margin(@value)margin-bottom:@value; .box1width:@width;height:@width;background-color:red;//引用带参数的混入，将变量直接赋值.margin(10px); .box2//将一个已声明好的类（. 查看详情
lees入门(代码片段)
安装1下载EasyLess插件 2新建less文件，输入less语句，保存，就会在同级目录下生成同名的css文件 3在HTML页面导入<linkrel="stylesheet"href="../less/a.css"> 与Sass的区别：Less是基于JavaScript的，在客户端处理... 查看详情
配置mpvue安装less/sass出现问题：modulebuildfailed:typeerror:loadercontext.getresolveisnotafunction(示(代码片段)
查了下网上大部分都是有关sass/less的问题，看了下。发现原因是由于sass-loader/less-loader安装的版本过高，在【package.json】中，可查看到安装的版本解决办法:卸载安装的高版本的sass-loadernpmuninstallsass-loadernpminstallsass-loader@4.1.0--save... 查看详情