发表于： 2019-06-24 17:15:00
1 765
今日完成：1 将任务十提交
2 查询了解了师兄的提问：
关于css和sass的区别：
1 在写法上，css和sass的写法并无太大的区别，
css 写法： body{color：red；} sass写法：body{color：red；}
2 在页面编写时，css没有变量，都是常量，换句话说就是，如果页面需要改动时，那么编写人员就需要从一堆css代码
中找出所要改动的那几个值。如果使用@importent引入外部css，浏览器加载的速度会大幅削弱。
而sass中是有变量的，一般都会在顶部提前声明。并且更重要的就是sass中有模块化的概念，比如sass可以将内容轻易的
分为几个模块，比如_flex.scss , _padding.scss等，然后使用@importent引入到总的sass中，哪一个模块出问题，就直接调出
然后修改即可。
3 sass和css中的@importent完全不同，sass中的@importent是不会影响浏览器加载的
参考文档：
https://www.sasscss.com/docs
https://www.qianduan.net/high-performance-web-site-do-not-use-import/
今日收获：1 calc（）函数
定义与用法
calc() 函数用于动态计算长度值。
- 需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)； - 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
2 继承和占位符
两者都是通过
@extend来引用。
2.1 继承
一个已经存在的css样式类，可以被其他样式类继承。
例如，实现以下css样式：
.btn, .btn--primary, .btn--info { border: 1px solid blue; }.btn--primary { color: black; }.btn--info { color: gray; }scss中可以这样写，显然，这种写法便于维护和阅读！
.btn { border: 1px solid blue;
}.btn--primary { color: black;
@extend .btn;
}.btn--info { color: gray;
@extend .btn;
}2.2 占位符
顾名思义，如果不被
extend引用，它是不会被编译，也就是：不会占用css文件大小。这是和继承最大区别。
scss代码如下：
%btn { border: 1px solid blue;
}// 没有被extend// 不会出现在css文件中%test-btn { border: 1px solid black;
}.btn--primary { color: black;
@extend %btn;
}.btn--info { color: gray;
@extend %btn;
}编译后的css代码：
.btn--primary, .btn--info { border: 1px solid blue; }.btn--primary { color: black; }.btn--info { color: gray; }
返回列表
评论