发表于: 2019-03-26 21:32:01
1 851
今天完成的任务
了解了sass
完成了任务11 遇到的问题 无
下面是今天学习sass知识的一些总结
sass是底层语言Rydy语言写的 需要先编译成css代码才能使用!!
单文件编译:sass<sass文件路径>/style.scss:<css文件路径>/style.css
多文件:sass sass/:css/
动态:sass --watch <sass文件路径>/style.scss:<css文件路径>/style.css
有一些可视化工具 我下载了 考拉 亲测有效 非常好用
sass什么时候声明变量
1该值至少重复出现俩次
2该值至少可能被更新
3该值所有的表现都与变量有关 如$width:10px就是无关;
基本上 没有理由声明一个永远不需要更新 或者只在单一地方使用的变量
避免选择器的嵌套
我的理解是选择器嵌套很难阅读 对自己还好 要是队友看 简直噩梦 而且编译万之后css还是一样的 一般少用吧!!
混合器
语法 @mixin ..(){} 调用:@include ..
可以把重复代码放到混合器中 节省代码!而且可以带参传参 进行判断!!!
sass继承
可以继承类样式块中所有样式代码 调用:@extend..
占位符
%..{
功能十分强大,用处和继承相同,但是如果不被@extend的话css不会产生任何代码
}
这三位功能似乎都很强大 他们的一些优劣
混合器的优势是可以传参带参 缺点是编译的css代码会产生多个对应的样式代码 造成多余的代码
继承: 编译后代码合并,不能传参
占位符:使用上与继承基本相同 但不掉用时不会产生代码
插值
#{$..}作用在css属性上:border-#{$..}
不能作用在混合器上 可以作用在继承 占位符上
sass注释
/**/css可见
//css不可见
评论