发表于: 2019-03-26 21:32:01

1 853


今天完成的任务

了解了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不可见



返回列表 返回列表
评论

    分享到