sass\less

ws的使用
Settings里esitor里code style里的file and code templates里设置模板。

//预格式化，文本有换行

tooltip

一、sass

1.安装sass

gem -v
gem install sass
gem install compass
sass -v

2.转换为css样式

sass ./sass/sass ./dist/a.css
sass转css
sass --watch ./scss:./dist 监听改变
数据改变就传递到dist里，并监听随时改变

3.各种选择器

1.$:定义变量
$color:red;

2.&：父选择器自身
span{
color: red;
&:hover{
color: blue;
}
}

3.p>&：hover//意思是p下的.div1
4…div2{>ul{//.div2下的ul
}
}
5.+span{}//div2的兄弟元素

6.属性嵌套：
.div3{
border:{
left:1px solid #000;
}
}

7.导入文件：
新建c.scss
.div4{
width:50px;

}
另一个b.scss文件里
.div5{
@import “c”;
}

8.重点：
函数，混合器
@mixin fn($w:50px,$h:50px,KaTeX parse error: Expected '}', got 'EOF' at end of input: …入时可缺省值 width:w;
…
@if ($w<50px){//if用法
KaTeX parse error: Expected 'EOF', got '}' at position 11: w:50px, }̲@else if(w>200){
$w:200px,
}
}

.div1{
@include fn(50px,50px,red);//调用
}
.div2{
@include fn();//调用
}
div3{
extend .div2;//继承div2
}

9.遍历
$cList:(“1”:red,“2”:blue)
@each $c in KaTeX parse error: Expected '}', got '#' at position 16: cList{//遍历 .div#̲{c}{
}
}

@mixin setColor($r,$g,$b,$a){//设置颜色
background-color:rgb($r,$g,$b,$a);
}
@for KaTeX parse error: Expected '}', got '#' at position 50: …>div:nth-child(#̲{i}){//第几个
//#{}大括号中可以是任何有效的表达式，然后计算并返回这个表达式的值
@include setColor(255,0,0,0.5);
}
}

less.js//写css用

npm install -g less

使用：引入：

//引入a.less //引入less.js

stylus